Display multiple read-only fields in groups.
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>,},];<Descriptions title="User Info" items={items} />;// works when <5.8.0 , deprecated when >=5.8.0 🙅🏻♀️<Descriptions title="User Info"><Descriptions.Item label="UserName">Zhou Maomao</Descriptions.Item><Descriptions.Item label="Telephone">1810000000</Descriptions.Item><Descriptions.Item label="Live">Hangzhou, Zhejiang</Descriptions.Item><Descriptions.Item label="Remark">empty</Descriptions.Item><Descriptions.Item label="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 | |
| colon | Change default props colon value of Descriptions.Item | boolean | true | |
| column | The number of DescriptionItems in a row,could be a number or a object like { xs: 8, sm: 16, md: 24},(Only set bordered={true} to take effect) | number | Record<Breakpoint, number> | 3 | |
| contentStyle | Customize content style | 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 |
| labelStyle | Customize label style | CSSProperties | - | 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 | - | |
| title | The title of the description list, placed at the top | ReactNode | - |
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| contentStyle | Customize content style | CSSProperties | - | 4.9.0 |
| label | The description of the content | ReactNode | - | |
| labelStyle | Customize label style | CSSProperties | - | 4.9.0 |
| span | The number of columns included | number | Screens | 1 | screens: 5.9.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 |
| extraColor | Text color of extra area | string | rgba(0, 0, 0, 0.88) |
| itemPaddingBottom | Bottom padding of item | number | 16 |
| labelBg | Background color of label | string | rgba(0, 0, 0, 0.02) |
| 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.
UserNameZhou Maomao | Telephone1810000000 | LiveHangzhou, Zhejiang |
Remarkempty | AddressNo. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China | |
| 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 | ||||
ProductCloud Database | BillingPrepaid | Time18:00:00 |
Amount$80.00 | Discount$20.00 | Official$60.00 |
| 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 | ||
