Descriptions描述列表
Descriptions
描述列表
展示多个只读字段的组合。
使用import{ Descriptions }from"antd"; |
常见于详情页的信息展示。
// >= 5.8.0 可用,推荐的写法 ✅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} />;// <5.8.0 可用,>=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>;
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 |
ProductCloud Database | Billing Mode Prepaid | |||||||||
Automatic RenewalYES | Order time2018-04-24 18:00:00 | |||||||||
Usage Time2019-04-24 18:00:00 | ||||||||||
StatusRunning | ||||||||||
Negotiated Amount$80.00 | Discount$20.00 | |||||||||
Official Receipts$60.00 | Config InfoData disk type: MongoDB Database version: 3.4 Package: dds.mongo.mid Storage space: 10 GB Replication factor: 3 Region: East China 1 | |||||||||
Official Receipts$60.00 | Config Info
|
longloooooooooooooooooooooooooooooooooooooooooooooooong | longloooooooooooooooooooooooooooooooooooooooooooooooong |
longloooooooooooooooooooooooooooooooooooooooooooooooong | longloooooooooooooooooooooooooooooooooooooooooooooooong |
longloooooooooooooooooooooooooooooooooooooooooooooooong |
long | long |
---|---|
loooooooooooooooooooooooooooooooooooooooooooooooong | loooooooooooooooooooooooooooooooooooooooooooooooong |
long | long |
loooooooooooooooooooooooooooooooooooooooooooooooong | loooooooooooooooooooooooooooooooooooooooooooooooong |
long | |
loooooooooooooooooooooooooooooooooooooooooooooooong |
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 |
Product | Cloud Database | Billing Mode | Prepaid | Automatic Renewal | YES |
---|
Product | Cloud Database | Billing Mode | Prepaid | Automatic Renewal | YES |
---|
UserNameZhou Maomao | Telephone1810000000 | LiveHangzhou, Zhejiang |
Remarkempty | AddressNo. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China |
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 |
通用属性参考:通用属性
参数 | 说明 | 类型 | 默认值 | 版本 |
---|---|---|---|---|
bordered | 是否展示边框 | boolean | false | |
colon | 配置 Descriptions.Item 的 colon 的默认值。表示是否显示 label 后面的冒号 | boolean | true | |
column | 一行的 DescriptionItems 数量,可以写成像素值或支持响应式的对象写法 { xs: 8, sm: 16, md: 24} | number | Record<Breakpoint, number> | 3 | |
contentStyle | 自定义内容样式 | CSSProperties | - | 4.10.0 |
extra | 描述列表的操作区域,显示在右上方 | ReactNode | - | 4.5.0 |
items | 描述列表项内容 | DescriptionsItem[] | - | 5.8.0 |
labelStyle | 自定义标签样式 | CSSProperties | - | 4.10.0 |
layout | 描述布局 | horizontal | vertical | horizontal | |
size | 设置列表的大小。可以设置为 middle 、small , 或不填(只有设置 bordered={true} 生效) | default | middle | small | - | |
title | 描述列表的标题,显示在最顶部 | ReactNode | - |
参数 | 说明 | 类型 | 默认值 | 版本 |
---|---|---|---|---|
contentStyle | 自定义内容样式 | CSSProperties | - | 4.9.0 |
label | 内容的描述 | ReactNode | - | |
labelStyle | 自定义标签样式 | CSSProperties | - | 4.9.0 |
span | 包含列的数量 | number | Screens | 1 | screens: 5.9.0 |
span 是 Description.Item 的数量。 span={2} 会占用两个 DescriptionItem 的宽度。当同时配置
style
和labelStyle
(或contentStyle
)时,两者会同时作用。样式冲突时,后者会覆盖前者。
Token 名称 | 描述 | 类型 | 默认值 |
---|---|---|---|
colonMarginLeft | 冒号左间距 | number | 2 |
colonMarginRight | 冒号右间距 | number | 8 |
contentColor | 内容区域文字颜色 | string | rgba(0, 0, 0, 0.88) |
extraColor | 额外区域文字颜色 | string | rgba(0, 0, 0, 0.88) |
itemPaddingBottom | 子项下间距 | number | 16 |
itemPaddingEnd | 子项结束间距 | number | 16 |
labelBg | 标签背景色 | string | rgba(0, 0, 0, 0.02) |
titleColor | 标题文字颜色 | string | rgba(0, 0, 0, 0.88) |
titleMarginBottom | 标题下间距 | number | 20 |