使用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 | ||||
带边框和背景颜色列表。
| 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 | ||
垂直带边框和背景颜色的列表。
| UserName | Zhou Maomao | Live | Hangzhou, Zhejiang | ||
|---|---|---|---|---|---|
| Remark | empty | ||||
| Address | No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China | ||||
整行的展示。
通用属性参考：通用属性
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| bordered | 是否展示边框 | boolean | false | |
| colon | 配置 Descriptions.Item 的 colon 的默认值。表示是否显示 label 后面的冒号 | boolean | true | |
| column | 一行的 DescriptionItems 数量，可以写成像素值或支持响应式的对象写法 { xs: 8, sm: 16, md: 24} | number | Record<Breakpoint, number> | 3 | |
自定义内容样式，请使用 styles={{ content: {} }} 替换 | CSSProperties | - | 4.10.0 | |
| extra | 描述列表的操作区域，显示在右上方 | ReactNode | - | 4.5.0 |
| items | 描述列表项内容 | DescriptionsItem[] | - | 5.8.0 |
自定义标签样式，请使用 styles={{ label: {} }} 替换 | CSSProperties | - | 4.10.0 | |
| layout | 描述布局 | horizontal | vertical | horizontal | |
| size | 设置列表的大小。可以设置为 middle 、small, 或不填（只有设置 bordered={true} 生效） | default | middle | small | - | |
| title | 描述列表的标题，显示在最顶部 | ReactNode | - | |
| classNames | 语义化结构 class | Record<SemanticDOM, string> | - | 5.23.0 |
| styles | 语义化结构 style | Record<SemanticDOM, CSSProperties> | - | 5.23.0 |
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
自定义内容样式，请使用 styles={{ content: {} }} 替换 | CSSProperties | - | 4.9.0 | |
| label | 内容的描述 | ReactNode | - | |
自定义标签样式，请使用 styles={{ label: {} }} 替换 | CSSProperties | - | 4.9.0 | |
| span | 包含列的数量（filled 铺满当前行剩余部分） | number| filled | Screens | 1 | screens: 5.9.0，filled: 5.22.0 |
span 是 Description.Item 的数量。 span={2} 会占用两个 DescriptionItem 的宽度。当同时配置
style和labelStyle（或contentStyle）时，两者会同时作用。样式冲突时，后者会覆盖前者。
Telephone1810000000 |
| 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) |
| labelColor | 标签文字颜色 | string | rgba(0,0,0,0.45) |
| titleColor | 标题文字颜色 | string | rgba(0,0,0,0.88) |
| titleMarginBottom | 标题下间距 | number | 20 |
