Importimport { Descriptions } from 'antd';
Docs
contributors
- Components Overview
- Changelogv6.1.4
- General
- Layout
- Navigation
- Data Entry
- Data Display
- Feedback
- Other
Commonly displayed on the details page.
// works when >= 5.8.0, recommended βconst items:DescriptionsProps['items']=[{key:'1',label:'UserName',children:<p>Zhou Maomao</p>,},{key:'2',label:'Telephone',children:<p>1810000000</p>,},{key:'3',label:'Live',children:<p>Hangzhou, Zhejiang</p>,},{key:'4',label:'Remark',children:<p>empty</p>,},{key:'5',label:'Address',children:<p>No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China</p>,},];<Descriptionstitle="User Info"items={items}/>;// works when <5.8.0 , deprecated when >=5.8.0 π π»ββοΈ<Descriptionstitle="User Info"><Descriptions.Itemlabel="UserName">Zhou Maomao</Descriptions.Item><Descriptions.Itemlabel="Telephone">1810000000</Descriptions.Item><Descriptions.Itemlabel="Live">Hangzhou, Zhejiang</Descriptions.Item><Descriptions.Itemlabel="Remark">empty</Descriptions.Item><Descriptions.Itemlabel="Address">No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China</Descriptions.Item></Descriptions>;
Common props ref:Common props
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| bordered | Whether to display the border | boolean | false | |
| classNames | Customize class for each semantic structure inside the component. Supports object or function. | Record<SemanticDOM, string> | (info: { props })=> Record<SemanticDOM, string> | - | |
| colon | Change default props colon value of Descriptions.Item. Indicates whether the colon after the label is displayed | boolean | true | |
| column | The number of DescriptionItems in a row, could be an object (like { xs: 8, sm: 16, md: 24}, but must have bordered={true}) or a number | number | Record<Breakpoint, number> | 3 | |
Customize content style, Please use styles.content instead | CSSProperties | - | 4.10.0 | |
| extra | The action area of the description list, placed at the top-right | ReactNode | - | 4.5.0 |
| items | Describe the contents of the list item | DescriptionsItem[] | - | 5.8.0 |
| Customize label style | CSSProperties, Please use styles.label instead | - | 4.10.0 | |
| layout | Define description layout | horizontal | vertical | horizontal | |
| size | Set the size of the list. Can be set to middle,small, or not filled | default | middle | small | - | |
| styles | Customize inline style for each semantic structure inside the component. Supports object or function. | Record<SemanticDOM, CSSProperties> | (info: { props })=> Record<SemanticDOM, CSSProperties> | - | |
| title | The title of the description list, placed at the top | ReactNode | - |
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
Customize content style, Please use styles.content instead | CSSProperties | - | 4.9.0 | |
| label | The description of the content | ReactNode | - | |
Customize label style, Please use styles.label instead | CSSProperties | - | 4.9.0 | |
| span | The number of columns included(filled Fill the remaining part of the current row) | number | filled | Screens | 1 | screens: 5.9.0, filled: 5.22.0 |
The number of span Description.Item. Span={2} takes up the width of two DescriptionItems. When both
styleandlabelStyle(orcontentStyle) configured, both of them will work. And next one will overwrite first when conflict.
| Token Name | Description | Type | Default Value |
|---|---|---|---|
| colonMarginLeft | Left margin of colon | number | 2 |
| colonMarginRight | Right margin of colon | number | 8 |
| contentColor | Text color of content | string | rgba(0,0,0,0.88) |
| extraColor | Text color of extra area | string | rgba(0,0,0,0.88) |
| itemPaddingBottom | Bottom padding of item | number | 16 |
| itemPaddingEnd | End padding of item | number | 16 |
| labelBg | Background color of label | string | rgba(0,0,0,0.02) |
| labelColor | Text color of label | string | rgba(0,0,0,0.45) |
| titleColor | Text color of title | string | rgba(0,0,0,0.88) |
| titleMarginBottom | Bottom margin of title | number | 20 |
Simplest Usage.
Descriptions with border and background color.
Custom sizes to fit in a variety of containers.
Responsive configuration enables perfect presentation on small screen devices.
Simplest Usage.
Descriptions with border and background color.
You can customize the semantic dom style of Descriptions by passing objects/functions through classNames and styles.
Display of the entire line.
| Product | Cloud Database | Billing Mode | Prepaid | Automatic Renewal | YES |
|---|---|---|---|---|---|
| Order time | 2018εΉ΄04ζ24ζ₯ 18:00:00 | Usage Time | 2019εΉ΄04ζ24ζ₯ 18:00:00 | ||
| Status | Running | ||||
| Negotiated Amount | 80γγ«.00 | Discount | 20γγ«.00 | Official Receipts | 60γγ«.00 |
| Config Info | Data disk type: MongoDB Database version: 3.4 Package: dds.mongo.mid Storage space: 10 GB Replication factor: 3 Region: East China 1 | ||||
| Product | Cloud Database | Billing | Prepaid | Time | 18:00:00 |
|---|---|---|---|---|---|
| Amount | 80γγ«.00 | Discount | 20γγ«.00 | Official | 60γγ«.00 |
| Config Info | Data disk type: MongoDB Database version: 3.4 Package: dds.mongo.mid Storage space: 10 GB Replication factor: 3 Region: East China 1 | ||||
| Product | Cloud Database | Billing | Prepaid | Time | 18:00:00 |
|---|---|---|---|---|---|
| Amount | 80γγ«.00 | Discount | 20γγ«.00 | Official | 60γγ«.00 |
| Config Info | Data disk type: MongoDB Database version: 3.4 Package: dds.mongo.mid | Hardware Info | CPU: 6 Core 3.5 GHz Storage space: 10 GB Replication factor: 3 Region: East China 1 | ||
UserName | Telephone | Live |
|---|---|---|
Zhou Maomao | 1810000000 | Hangzhou, Zhejiang |
Address | Remark | |
No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China | empty | |
| Product | Billing Mode | Automatic Renewal |
|---|---|---|
| Cloud Database | Prepaid | YES |
| Order time | Usage Time | |
| 2018εΉ΄04ζ24ζ₯ 18:00:00 | 2019εΉ΄04ζ24ζ₯ 18:00:00 | |
| Status | ||
| Running | ||
| Negotiated Amount | Discount | Official Receipts |
| 80γγ«.00 | 20γγ«.00 | 60γγ«.00 |
| Config Info | ||
| Data disk type: MongoDB Database version: 3.4 Package: dds.mongo.mid Storage space: 10 GB Replication factor: 3 Region: East China 1 | ||
| Product | Cloud Database | Billing Mode | Prepaid | Automatic Renewal | YES |
|---|
| Product | Cloud Database | Billing Mode | Prepaid | Automatic Renewal | YES |
|---|
| UserName | Zhou Maomao | Live | Hangzhou, Zhejiang | ||
|---|---|---|---|---|---|
| Remark | empty | ||||
| Address | No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China | ||||
