Skip to content

Commit

Permalink
docs(components): [descriptions] use new display tag (element-plus#12673
Browse files Browse the repository at this point in the history 
)
  • Loading branch information
@wzc520pyfm @dannyhebertbell
wzc520pyfm authored and dannyhebertbell committed Nov 10, 2023
1 parent 0daf90e commit 23e6a6d
Show file tree
Hide file tree
Showing 3 changed files with 84 additions and 38 deletions.
80 changes: 42 additions & 38 deletions docs/en-US/component/descriptions.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,41 +39,45 @@ descriptions/customized-style

:::

## Descriptions Attributes

| 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 Slots

| 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 Item Attributes

| 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 | — | — |

## Descriptions Item Slots

| Name | Description |
| ----- | ------------------------- |
| — | customize default content |
| label | custom label |
## Descriptions API

### Descriptions Attributes

| 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] | '' |

### Descriptions Slots

| 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 | — |

## DescriptionsItem API

### DescriptionsItem Attributes

| 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 changes: 24 additions & 0 deletions packages/components/descriptions/src/description-item.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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: '',
Expand Down
18 changes: 18 additions & 0 deletions packages/components/descriptions/src/description.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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: '',
Expand Down

0 comments on commit 23e6a6d

Please sign in to comment.