mirror/element-plus
2
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2024-11-27 02:01:15 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs(components): [descriptions] use new display tag (#12673)

Browse Source
This commit is contained in:
wzc520pyfm 2023-10-11 23:28:46 +08:00 committed by GitHub
parent 351774f418
commit 4bfe10e682
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 77 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
docs/en-US/component/descriptions.md
View File

@ -39,41 +39,45 @@ descriptions/customized-style
:::
## Descriptions Attributes
## Descriptions API
| Name | 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 | large / default / small | default |
| title | title text, display on the top left | string | — | — |
| extra | extra text, display on the top right | string | — | — |
### Descriptions Attributes
## Descriptions Slots
| Name | Description | Type | Default |
| --------- | ------------------------------------------ | ---------------------------------------------- | ---------- |
| border | with or without border | ^[boolean] | false |
| column | numbers of `Descriptions Item` in one line | ^[number] | 3 |
| direction | direction of list | ^[enum]`'vertical' \| 'horizontal'` | horizontal |
| size | size of list | ^[enum]`'' \| 'large' \| 'default' \| 'small'` | — |
| title | title text, display on the top left | ^[string] | '' |
| extra | extra text, display on the top right | ^[string] | '' |
| Name | Description | Subtags |
| ----- | ------------------------------------------- | ----------------- |
| — | customize default content | Descriptions Item |
| title | custom title, display on the top left | — |
| extra | custom extra area, display on the top right | — |
### Descriptions Slots
## Descriptions Item Attributes
| Name | Description | Subtags |
| ------- | ------------------------------------------- | ----------------- |
| default | customize default content | Descriptions Item |
| title | custom title, display on the top left | — |
| extra | custom extra area, display on the top right | — |
| Name | Description | Type | Accepted Values | Default |
| ---------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------- | --------------------- | ------- |
| 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 (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 | — | — |
## DescriptionsItem API
## Descriptions Item Slots
### DescriptionsItem Attributes
| Name | Description |
| ----- | ------------------------- |
| — | customize default content |
| label | custom label |
| Name | Description | Type | Default |
| ---------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------- | ------- |
| 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 (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) | ^[enum]`'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) | ^[enum]`'left' \| 'center' \| 'right'` | '' |
| class-name | column content custom class name | ^[string] | '' |
| label-class-name | column label custom class name | ^[string] | '' |
### DescriptionsItem Slots
| Name | Description |
| ------- | ------------------------- |
| default | customize default content |
| label | custom label |

24
packages/components/descriptions/src/description-item.ts
View File

@ -4,34 +4,58 @@ import { buildProps } from '@element-plus/utils'
import type { ExtractPropTypes, Slot, VNode } from 'vue'
const descriptionItemProps = buildProps({
/**
* @description label text
*/
label: {
type: String,
default: '',
},
/**
* @description colspan of column
*/
span: {
type: Number,
default: 1,
},
/**
* @description 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)
*/
width: {
type: [String, Number],
default: '',
},
/**
* @description 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)
*/
minWidth: {
type: [String, Number],
default: '',
},
/**
* @description column content alignment (If no `border`, effective for both label and content)
*/
align: {
type: String,
default: 'left',
},
/**
* @description column label alignment, if omitted, the value of the above `align` attribute will be applied (If no `border`, please use `align` attribute)
*/
labelAlign: {
type: String,
default: '',
},
/**
* @description column content custom class name
*/
className: {
type: String,
default: '',
},
/**
* @description column label custom class name
*/
labelClassName: {
type: String,
default: '',

18
packages/components/descriptions/src/description.ts
View File

@ -4,24 +4,42 @@ import { useSizeProp } from '@element-plus/hooks'
import type Description from './description.vue'
export const descriptionProps = buildProps({
/**
* @description with or without border
*/
border: {
type: Boolean,
default: false,
},
/**
* @description numbers of `Descriptions Item` in one line
*/
column: {
type: Number,
default: 3,
},
/**
* @description direction of list
*/
direction: {
type: String,
values: ['horizontal', 'vertical'],
default: 'horizontal',
},
/**
* @description size of list
*/
size: useSizeProp,
/**
* @description title text, display on the top left
*/
title: {
type: String,
default: '',
},
/**
* @description extra text, display on the top right
*/
extra: {
type: String,
default: '',