mirror of
https://github.com/element-plus/element-plus.git
synced 2025-01-12 10:45:10 +08:00
docs(descriptions): update doc about details of no border (#2984)
* docs(descriptions): update doc about details of no border re #2970 * docs: update
This commit is contained in:
kooriookami
GitHub
parent
a0e9eb2027
commit
2bc16a2bab
@ -8,13 +8,13 @@ Display multiple fields in list form.
|
||||
|
||||
```html
|
||||
<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-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>
|
||||
```
|
||||
:::
|
||||
@ -89,7 +89,7 @@ Display multiple fields in list form.
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
data() {
|
||||
return {
|
||||
size: ''
|
||||
};
|
||||
@ -165,10 +165,10 @@ Display multiple fields in list form.
|
||||
|------------- |---------------- |---------------- |---------------------- |-------- |
|
||||
| label | label text | string | — | — |
|
||||
| span | colspan of column | number | — | 1 |
|
||||
| width | column width, the width of the same column in different rows is set by the max value | string / number | — | — |
|
||||
| min-width | column minimum width, columns with `width` has a fixed width, while columns with `min-width` has a width that is distributed in proportion | string / number | — | — |
|
||||
| align | column content alignment | string | left / center / right | left |
|
||||
| label-align | column label alignment, if omitted, the value of the above `align` attribute will be applied | string | left / center / right | — |
|
||||
| width | column width, the width of the same column in different rows is set by the max value (If no `border`, width contains label and content) | string / number | — | — |
|
||||
| min-width | column minimum width, columns with `width` has a fixed width, while columns with `min-width` has a width that is distributed in proportion (If no`border`, width contains label and content) | string / number | — | — |
|
||||
| align | column content alignment (If no `border`, effective for both label and content) | string | left / center / right | left |
|
||||
| label-align | column label alignment, if omitted, the value of the above `align` attribute will be applied (If no `border`, please use `align` attribute) | string | left / center / right | — |
|
||||
| class-name | column content custom class name | string | — | — |
|
||||
| label-class-name | column label custom class name | string | — | — |
|
||||
|
||||
|
||||
@ -8,13 +8,13 @@ Display multiple fields in list form.
|
||||
|
||||
```html
|
||||
<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-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>
|
||||
```
|
||||
:::
|
||||
@ -89,7 +89,7 @@ Display multiple fields in list form.
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
data() {
|
||||
return {
|
||||
size: ''
|
||||
};
|
||||
@ -126,6 +126,23 @@ Display multiple fields in list form.
|
||||
```
|
||||
:::
|
||||
|
||||
### Customized Style
|
||||
|
||||
:::demo
|
||||
|
||||
```html
|
||||
<el-descriptions title="Customized style list" :column="3" border>
|
||||
<el-descriptions-item label="Username" label-align="right" align="center" label-class-name="my-label" class-name="my-content" width="150px">kooriookami</el-descriptions-item>
|
||||
<el-descriptions-item label="Telephone" label-align="right" align="center">18100000000</el-descriptions-item>
|
||||
<el-descriptions-item label="Place" label-align="right" align="center">Suzhou</el-descriptions-item>
|
||||
<el-descriptions-item label="Remarks" label-align="right" align="center">
|
||||
<el-tag size="small">School</el-tag>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="Address" label-align="right" align="center">No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
```
|
||||
:::
|
||||
|
||||
### Descriptions Attributes
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|------------- |---------------- |---------------- |---------------------- |-------- |
|
||||
@ -148,10 +165,10 @@ Display multiple fields in list form.
|
||||
|------------- |---------------- |---------------- |---------------------- |-------- |
|
||||
| label | label text | string | — | — |
|
||||
| span | colspan of column | number | — | 1 |
|
||||
| width | column width, the width of the same column in different rows is set by the max value | string / number | — | — |
|
||||
| min-width | column minimum width, columns with `width` has a fixed width, while columns with `min-width` has a width that is distributed in proportion | string / number | — | — |
|
||||
| align | column content alignment | string | left / center / right | left |
|
||||
| label-align | column label alignment, if omitted, the value of the above `align` attribute will be applied | string | left / center / right | — |
|
||||
| width | column width, the width of the same column in different rows is set by the max value (If no `border`, width contains label and content) | string / number | — | — |
|
||||
| min-width | column minimum width, columns with `width` has a fixed width, while columns with `min-width` has a width that is distributed in proportion (If no`border`, width contains label and content) | string / number | — | — |
|
||||
| align | column content alignment (If no `border`, effective for both label and content) | string | left / center / right | left |
|
||||
| label-align | column label alignment, if omitted, the value of the above `align` attribute will be applied (If no `border`, please use `align` attribute) | string | left / center / right | — |
|
||||
| class-name | column content custom class name | string | — | — |
|
||||
| label-class-name | column label custom class name | string | — | — |
|
||||
|
||||
|
||||
@ -8,13 +8,13 @@ Display multiple fields in list form.
|
||||
|
||||
```html
|
||||
<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-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>
|
||||
```
|
||||
:::
|
||||
@ -89,7 +89,7 @@ Display multiple fields in list form.
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
data() {
|
||||
return {
|
||||
size: ''
|
||||
};
|
||||
@ -126,6 +126,23 @@ Display multiple fields in list form.
|
||||
```
|
||||
:::
|
||||
|
||||
### Customized Style
|
||||
|
||||
:::demo
|
||||
|
||||
```html
|
||||
<el-descriptions title="Customized style list" :column="3" border>
|
||||
<el-descriptions-item label="Username" label-align="right" align="center" label-class-name="my-label" class-name="my-content" width="150px">kooriookami</el-descriptions-item>
|
||||
<el-descriptions-item label="Telephone" label-align="right" align="center">18100000000</el-descriptions-item>
|
||||
<el-descriptions-item label="Place" label-align="right" align="center">Suzhou</el-descriptions-item>
|
||||
<el-descriptions-item label="Remarks" label-align="right" align="center">
|
||||
<el-tag size="small">School</el-tag>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="Address" label-align="right" align="center">No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
```
|
||||
:::
|
||||
|
||||
### Descriptions Attributes
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|------------- |---------------- |---------------- |---------------------- |-------- |
|
||||
@ -148,10 +165,10 @@ Display multiple fields in list form.
|
||||
|------------- |---------------- |---------------- |---------------------- |-------- |
|
||||
| label | label text | string | — | — |
|
||||
| span | colspan of column | number | — | 1 |
|
||||
| width | column width, the width of the same column in different rows is set by the max value | string / number | — | — |
|
||||
| min-width | column minimum width, columns with `width` has a fixed width, while columns with `min-width` has a width that is distributed in proportion | string / number | — | — |
|
||||
| align | column content alignment | string | left / center / right | left |
|
||||
| label-align | column label alignment, if omitted, the value of the above `align` attribute will be applied | string | left / center / right | — |
|
||||
| width | column width, the width of the same column in different rows is set by the max value (If no `border`, width contains label and content) | string / number | — | — |
|
||||
| min-width | column minimum width, columns with `width` has a fixed width, while columns with `min-width` has a width that is distributed in proportion (If no`border`, width contains label and content) | string / number | — | — |
|
||||
| align | column content alignment (If no `border`, effective for both label and content) | string | left / center / right | left |
|
||||
| label-align | column label alignment, if omitted, the value of the above `align` attribute will be applied (If no `border`, please use `align` attribute) | string | left / center / right | — |
|
||||
| class-name | column content custom class name | string | — | — |
|
||||
| label-class-name | column label custom class name | string | — | — |
|
||||
|
||||
|
||||
@ -8,13 +8,13 @@ Display multiple fields in list form.
|
||||
|
||||
```html
|
||||
<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-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>
|
||||
```
|
||||
:::
|
||||
@ -89,7 +89,7 @@ Display multiple fields in list form.
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
data() {
|
||||
return {
|
||||
size: ''
|
||||
};
|
||||
@ -126,6 +126,23 @@ Display multiple fields in list form.
|
||||
```
|
||||
:::
|
||||
|
||||
### Customized Style
|
||||
|
||||
:::demo
|
||||
|
||||
```html
|
||||
<el-descriptions title="Customized style list" :column="3" border>
|
||||
<el-descriptions-item label="Username" label-align="right" align="center" label-class-name="my-label" class-name="my-content" width="150px">kooriookami</el-descriptions-item>
|
||||
<el-descriptions-item label="Telephone" label-align="right" align="center">18100000000</el-descriptions-item>
|
||||
<el-descriptions-item label="Place" label-align="right" align="center">Suzhou</el-descriptions-item>
|
||||
<el-descriptions-item label="Remarks" label-align="right" align="center">
|
||||
<el-tag size="small">School</el-tag>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="Address" label-align="right" align="center">No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
```
|
||||
:::
|
||||
|
||||
### Descriptions Attributes
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|------------- |---------------- |---------------- |---------------------- |-------- |
|
||||
@ -148,10 +165,10 @@ Display multiple fields in list form.
|
||||
|------------- |---------------- |---------------- |---------------------- |-------- |
|
||||
| label | label text | string | — | — |
|
||||
| span | colspan of column | number | — | 1 |
|
||||
| width | column width, the width of the same column in different rows is set by the max value | string / number | — | — |
|
||||
| min-width | column minimum width, columns with `width` has a fixed width, while columns with `min-width` has a width that is distributed in proportion | string / number | — | — |
|
||||
| align | column content alignment | string | left / center / right | left |
|
||||
| label-align | column label alignment, if omitted, the value of the above `align` attribute will be applied | string | left / center / right | — |
|
||||
| width | column width, the width of the same column in different rows is set by the max value (If no `border`, width contains label and content) | string / number | — | — |
|
||||
| min-width | column minimum width, columns with `width` has a fixed width, while columns with `min-width` has a width that is distributed in proportion (If no`border`, width contains label and content) | string / number | — | — |
|
||||
| align | column content alignment (If no `border`, effective for both label and content) | string | left / center / right | left |
|
||||
| label-align | column label alignment, if omitted, the value of the above `align` attribute will be applied (If no `border`, please use `align` attribute) | string | left / center / right | — |
|
||||
| class-name | column content custom class name | string | — | — |
|
||||
| label-class-name | column label custom class name | string | — | — |
|
||||
|
||||
|
||||
@ -8,13 +8,13 @@
|
||||
|
||||
```html
|
||||
<el-descriptions title="用户信息">
|
||||
<el-descriptions-item label="用户名">kooriookami</el-descriptions-item>
|
||||
<el-descriptions-item label="手机号">18100000000</el-descriptions-item>
|
||||
<el-descriptions-item label="居住地">苏州市</el-descriptions-item>
|
||||
<el-descriptions-item label="备注">
|
||||
<el-tag size="small">学校</el-tag>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="联系地址">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item>
|
||||
<el-descriptions-item label="用户名">kooriookami</el-descriptions-item>
|
||||
<el-descriptions-item label="手机号">18100000000</el-descriptions-item>
|
||||
<el-descriptions-item label="居住地">苏州市</el-descriptions-item>
|
||||
<el-descriptions-item label="备注">
|
||||
<el-tag size="small">学校</el-tag>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="联系地址">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
```
|
||||
:::
|
||||
@ -89,7 +89,7 @@
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
data() {
|
||||
return {
|
||||
size: ''
|
||||
};
|
||||
@ -165,10 +165,10 @@
|
||||
|------------- |---------------- |---------------- |---------------------- |-------- |
|
||||
| label | 标签文本 | string | — | — |
|
||||
| span | 列的数量 | number | — | 1 |
|
||||
| width | 列的宽度，不同行相同列的宽度按最大值设定 | string / number | — | — |
|
||||
| min-width | 列的最小宽度，与 `width` 的区别是 `width` 是固定的，`min-width` 会把剩余宽度按比例分配给设置了 `min-width` 的列 | string / number | — | — |
|
||||
| align | 列的内容对齐方式 | string | left / center / right | left |
|
||||
| label-align | 列的标签对齐方式，若不设置该项，则使用内容的对齐方式 | string | left / center / right | — |
|
||||
| width | 列的宽度，不同行相同列的宽度按最大值设定（如无 `border` ，宽度包含标签与内容） | string / number | — | — |
|
||||
| min-width | 列的最小宽度，与 `width` 的区别是 `width` 是固定的，`min-width` 会把剩余宽度按比例分配给设置了 `min-width` 的列（如无 `border`，宽度包含标签与内容） | string / number | — | — |
|
||||
| align | 列的内容对齐方式（如无 `border`，对标签和内容均生效） | string | left / center / right | left |
|
||||
| label-align | 列的标签对齐方式，若不设置该项，则使用内容的对齐方式（如无 `border`，请使用 `align` 参数） | string | left / center / right | — |
|
||||
| class-name | 列的内容自定义类名 | string | — | — |
|
||||
| label-class-name | 列的标签自定义类名 | string | — | — |
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user