Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 1 commit into from
Oct 11, 2023
+84 −38
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
80 changes: 42 additions & 38 deletions docs/en-US/component/descriptions.md
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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