Search
Descriptions
Display multiple read-only fields in groups.
When to use
Commonly displayed on the details page.
Basic
Simplest Usage.
User Info
UserName | Telephone | Live |
|---|---|---|
Zhou Maomao | 1810000000 | Hangzhou, Zhejiang |
Remark | Address | |
empty | No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China | |
Border
Descriptions with border and background color.
User Info
| Product | Billing Mode | Automatic Renewal |
|---|---|---|
| Cloud Database | Prepaid | YES |
| Order time | Usage Time | Status |
| 2018-04-24 18:00:00 | 2019-04-24 18:00:00 | 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 | ||
Responsive
Responsive configuration enables perfect presentation on small screen devices.
Responsive Descriptions
| Product | Billing | time |
|---|---|---|
| Cloud Database | Prepaid | 18:00:00 |
| Amount | Discount | Official |
| $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 | ||
Horisontal
Simplest Usage.
User Info
UserNameZhou Maomao | Telephone1810000000 | LiveHangzhou, Zhejiang |
Remarkempty | AddressNo. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China | |
Horisontal border
Descriptions with border and background color.
User Info
| 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 | ||||
API
Descriptions
| Property | Description | Type | Default |
|---|---|---|---|
title | The title of the description list, placed at the top | ReactNode | - |
bordered | Whether to display the border | boolean | false |
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 | 3 |
size | Set the size of the list. Can be set to middle,small, or not filled | default | middle | small | - |
layout | Define description layout | horizontal | vertical | vertical |
colon | Change default props colon value of Descriptions.Item | boolean | true |
DescriptionItem
| Property | Description | Type | Default |
|---|---|---|---|
label | The description of the content | ReactNode | - |
span | The number of columns included | number | 1 |