mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-14 17:31:02 +08:00
f48c497703
* feat(descriptions): new component Descriptions * feat: update * feat: update * feat: update * feat: update * fix: revert readme.md * feat: update * feat: update provide key
5.4 KiB
5.4 KiB
Descriptions
Display multiple fields in list form.
Basic usage
:::demo
<el-descriptions title="User Info">
<el-descriptions-item label="Username">kooriookami</el-descriptions-item>
<el-descriptions-item label="Telephone">18100000000</el-descriptions-item>
<el-descriptions-item label="Place">Suzhou</el-descriptions-item>
<el-descriptions-item label="Remarks">
<el-tag size="small">School</el-tag>
</el-descriptions-item>
<el-descriptions-item label="Address">No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province</el-descriptions-item>
</el-descriptions>
:::
Sizes
:::demo
<template>
<el-radio-group v-model="size">
<el-radio label="">Default</el-radio>
<el-radio label="medium">Medium</el-radio>
<el-radio label="small">Small</el-radio>
<el-radio label="mini">Mini</el-radio>
</el-radio-group>
<el-descriptions class="margin-top" title="With border" :column="3" :size="size" border>
<template #extra>
<el-button type="primary" size="small">Operation</el-button>
</template>
<el-descriptions-item>
<template #label>
<i class="el-icon-user"></i>
Username
</template>
kooriookami
</el-descriptions-item>
<el-descriptions-item>
<template #label>
<i class="el-icon-mobile-phone"></i>
Telephone
</template>
18100000000
</el-descriptions-item>
<el-descriptions-item>
<template #label>
<i class="el-icon-location-outline"></i>
Place
</template>
Suzhou
</el-descriptions-item>
<el-descriptions-item>
<template #label>
<i class="el-icon-tickets"></i>
Remarks
</template>
<el-tag size="small">School</el-tag>
</el-descriptions-item>
<el-descriptions-item>
<template #label>
<i class="el-icon-office-building"></i>
Address
</template>
No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province
</el-descriptions-item>
</el-descriptions>
<el-descriptions class="margin-top" title="Without border" :column="3" :size="size">
<template #extra>
<el-button type="primary" size="small">Operation</el-button>
</template>
<el-descriptions-item label="Username">kooriookami</el-descriptions-item>
<el-descriptions-item label="Telephone">18100000000</el-descriptions-item>
<el-descriptions-item label="Place">Suzhou</el-descriptions-item>
<el-descriptions-item label="Remarks">
<el-tag size="small">School</el-tag>
</el-descriptions-item>
<el-descriptions-item label="Address">No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province</el-descriptions-item>
</el-descriptions>
</template>
<script>
export default {
data () {
return {
size: ''
};
}
}
</script>
:::
Vertical List
:::demo
<el-descriptions title="Vertical list with border" direction="vertical" :column="4" border>
<el-descriptions-item label="Username">kooriookami</el-descriptions-item>
<el-descriptions-item label="Telephone">18100000000</el-descriptions-item>
<el-descriptions-item label="Place" :span="2">Suzhou</el-descriptions-item>
<el-descriptions-item label="Remarks">
<el-tag size="small">School</el-tag>
</el-descriptions-item>
<el-descriptions-item label="Address">No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province</el-descriptions-item>
</el-descriptions>
<el-descriptions class="margin-top" title="Vertical list without border" :column="4" direction="vertical">
<el-descriptions-item label="Username">kooriookami</el-descriptions-item>
<el-descriptions-item label="Telephone">18100000000</el-descriptions-item>
<el-descriptions-item label="Place" :span="2">Suzhou</el-descriptions-item>
<el-descriptions-item label="Remarks">
<el-tag size="small">School</el-tag>
</el-descriptions-item>
<el-descriptions-item label="Address">No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province</el-descriptions-item>
</el-descriptions>
:::
Descriptions Attributes
Attribute | Description | Type | Accepted Values | Default |
---|---|---|---|---|
border | with or without border | boolean | — | false |
column | numbers of Descriptions Item in one line |
number | — | 3 |
direction | direction of list | string | vertical / horizontal | horizontal |
size | size of list | string | medium / small / mini | — |
title | title text, display on the top left | string | — | — |
extra | extra text, display on the top right | string | — | — |
Descriptions Slots
Name | Description |
---|---|
title | custom title, display on the top left |
extra | custom extra area, display on the top right |
Descriptions Item Attributes
Attribute | Description | Type | Accepted Values | Default |
---|---|---|---|---|
label | label text | string | — | — |
span | colspan of column | number | — | 1 |
Descriptions Item Slots
Name | Description |
---|---|
label | custom label |