Skip to content

Commit 034da49

Browse files
cs1707cs1707
authored
Descriptions: add description component (#21129)
1 parent 68e07ca commit 034da49

22 files changed

Lines changed: 1553 additions & 2 deletions

‎components.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -83,5 +83,7 @@
8383
"popconfirm": "./packages/popconfirm/index.js",
8484
"skeleton": "./packages/skeleton/index.js",
8585
"skeleton-item": "./packages/skeleton-item/index.js",
86-
"empty": "./packages/empty/index.js"
86+
"empty": "./packages/empty/index.js",
87+
"descriptions": "./packages/description/index.js",
88+
"descriptions-item": "./packages/description-item/index.js"
8789
}

‎examples/demo-styles/descriptions.scss‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
.demo-block.demo-descriptions {
2+
.margin-top {
3+
margin-top: 20px;
4+
}
5+
6+
.my-label {
7+
background: #E1F3D8;
8+
}
9+
10+
.my-content {
11+
background: #FDE2E2;
12+
}
13+
}

‎examples/demo-styles/index.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,4 +45,5 @@
4545
@import "./avatar.scss";
4646
@import "./drawer.scss";
4747
@import "./skeleton.scss";
48+
@import "./descriptions.scss";
4849

‎examples/docs/en-US/descriptions.md‎

Lines changed: 191 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,191 @@
1+
## Descriptions
2+
3+
Display multiple fields in list form.
4+
5+
### Basic usage
6+
7+
:::demo
8+
9+
```html
10+
<el-descriptions title="User Info">
11+
<el-descriptions-item label="Username">kooriookami</el-descriptions-item>
12+
<el-descriptions-item label="Telephone">18100000000</el-descriptions-item>
13+
<el-descriptions-item label="Place">Suzhou</el-descriptions-item>
14+
<el-descriptions-item label="Remarks">
15+
<el-tag size="small">School</el-tag>
16+
</el-descriptions-item>
17+
<el-descriptions-item label="Address">No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province</el-descriptions-item>
18+
</el-descriptions>
19+
```
20+
:::
21+
22+
### Sizes
23+
24+
:::demo
25+
26+
```html
27+
<template>
28+
<el-radio-group v-model="size">
29+
<el-radio label="">Default</el-radio>
30+
<el-radio label="medium">Medium</el-radio>
31+
<el-radio label="small">Small</el-radio>
32+
<el-radio label="mini">Mini</el-radio>
33+
</el-radio-group>
34+
35+
<el-descriptions class="margin-top" title="With border" :column="3" :size="size" border>
36+
<template slot="extra">
37+
<el-button type="primary" size="small">Operation</el-button>
38+
</template>
39+
<el-descriptions-item>
40+
<template slot="label">
41+
<i class="el-icon-user"></i>
42+
Username
43+
</template>
44+
kooriookami
45+
</el-descriptions-item>
46+
<el-descriptions-item>
47+
<template slot="label">
48+
<i class="el-icon-mobile-phone"></i>
49+
Telephone
50+
</template>
51+
18100000000
52+
</el-descriptions-item>
53+
<el-descriptions-item>
54+
<template slot="label">
55+
<i class="el-icon-location-outline"></i>
56+
Place
57+
</template>
58+
Suzhou
59+
</el-descriptions-item>
60+
<el-descriptions-item>
61+
<template slot="label">
62+
<i class="el-icon-tickets"></i>
63+
Remarks
64+
</template>
65+
<el-tag size="small">School</el-tag>
66+
</el-descriptions-item>
67+
<el-descriptions-item>
68+
<template slot="label">
69+
<i class="el-icon-office-building"></i>
70+
Address
71+
</template>
72+
No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province
73+
</el-descriptions-item>
74+
</el-descriptions>
75+
76+
<el-descriptions class="margin-top" title="Without border" :column="3" :size="size">
77+
<template slot="extra">
78+
<el-button type="primary" size="small">Operation</el-button>
79+
</template>
80+
<el-descriptions-item label="Username">kooriookami</el-descriptions-item>
81+
<el-descriptions-item label="Telephone">18100000000</el-descriptions-item>
82+
<el-descriptions-item label="Place">Suzhou</el-descriptions-item>
83+
<el-descriptions-item label="Remarks">
84+
<el-tag size="small">School</el-tag>
85+
</el-descriptions-item>
86+
<el-descriptions-item label="Address">No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province</el-descriptions-item>
87+
</el-descriptions>
88+
</template>
89+
90+
<script>
91+
export default {
92+
data () {
93+
return {
94+
size: ''
95+
};
96+
}
97+
}
98+
</script>
99+
```
100+
:::
101+
102+
### Vertical List
103+
104+
:::demo
105+
106+
```html
107+
<el-descriptions title="Vertical list with border" direction="vertical" :column="4" border>
108+
<el-descriptions-item label="Username">kooriookami</el-descriptions-item>
109+
<el-descriptions-item label="Telephone">18100000000</el-descriptions-item>
110+
<el-descriptions-item label="Place" :span="2">Suzhou</el-descriptions-item>
111+
<el-descriptions-item label="Remarks">
112+
<el-tag size="small">School</el-tag>
113+
</el-descriptions-item>
114+
<el-descriptions-item label="Address">No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province</el-descriptions-item>
115+
</el-descriptions>
116+
117+
<el-descriptions class="margin-top" title="Vertical list without border" :column="4" direction="vertical">
118+
<el-descriptions-item label="Username">kooriookami</el-descriptions-item>
119+
<el-descriptions-item label="Telephone">18100000000</el-descriptions-item>
120+
<el-descriptions-item label="Place" :span="2">Suzhou</el-descriptions-item>
121+
<el-descriptions-item label="Remarks">
122+
<el-tag size="small">School</el-tag>
123+
</el-descriptions-item>
124+
<el-descriptions-item label="Address">No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province</el-descriptions-item>
125+
</el-descriptions>
126+
```
127+
:::
128+
129+
### Customized Style
130+
131+
:::demo
132+
133+
```html
134+
<el-descriptions title="Customized style list" :column="3" border>
135+
<el-descriptions-item label="Username" label-class-name="my-label" content-class-name="my-content">kooriookami</el-descriptions-item>
136+
<el-descriptions-item label="Telephone">18100000000</el-descriptions-item>
137+
<el-descriptions-item label="Place">Suzhou</el-descriptions-item>
138+
<el-descriptions-item label="Remarks">
139+
<el-tag size="small">School</el-tag>
140+
</el-descriptions-item>
141+
<el-descriptions-item label="Address" :content-style="{'text-align': 'right'}">No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province</el-descriptions-item>
142+
</el-descriptions>
143+
<style>
144+
.my-label {
145+
background: #E1F3D8;
146+
}
147+
148+
.my-content {
149+
background: #FDE2E2;
150+
}
151+
</style>
152+
```
153+
:::
154+
155+
### Descriptions Attributes
156+
| Attribute | Description | Type | Accepted Values | Default |
157+
|------------- |---------------- |---------------- |---------------------- |-------- |
158+
| border | with or without border | boolean | — | false |
159+
| column | numbers of `Descriptions Item` in one line | number | — | 3 |
160+
| direction | direction of list | string | vertical / horizontal | horizontal |
161+
| size | size of list | string | medium / small / mini | — |
162+
| title | title text, display on the top left | string | — | — |
163+
| extra | extra text, display on the top right | string | — | — |
164+
| colon | change default props colon value of Descriptions Item | boolean | — | true |
165+
| labelClassName | custom label class name | string | — | — |
166+
| contentClassName | custom content class name | string | — | — |
167+
| labelStyle | custom label style | object | — | — |
168+
| contentStyle | custom content style | object | — | — |
169+
170+
### Descriptions Slots
171+
172+
| Name | Description |
173+
|------|--------|
174+
| title | custom title, display on the top left |
175+
| extra | custom extra area, display on the top right |
176+
177+
### Descriptions Item Attributes
178+
| Attribute | Description | Type | Accepted Values | Default |
179+
|------------- |---------------- |---------------- |---------------------- |-------- |
180+
| label | label text | string | — | — |
181+
| span | colspan of column | number | — | 1 |
182+
| labelClassName | custom label class name | string | — | — |
183+
| contentClassName | custom content class name | string | — | — |
184+
| labelStyle | custom label style | object | — | — |
185+
| contentStyle | custom content style | object | — | — |
186+
187+
### Descriptions Item Slots
188+
189+
| Name | Description |
190+
|------|--------|
191+
| label | custom label |

0 commit comments

Comments
 (0)