描述列表 Descriptions - Ant Design

何时使用

常见于详情页的信息展示。

tsx

// >= 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>;

代码演示

User Info

UserNameZhou Maomao	Telephone1810000000	LiveHangzhou, Zhejiang
Remarkempty	AddressNo. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China

简单的展示。

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

带边框和背景颜色列表。

defaultmiddlesmall

Custom Size

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

Custom Size

ProductCloud Database	BillingPrepaid	Time18:00:00
Amount$80.00	Discount$20.00	Official$60.00

自定义尺寸

自定义尺寸，适应在各种容器中展示。

Responsive Descriptions

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

通过响应式的配置可以实现在小屏幕设备上的完美呈现。

User Info

UserName	Telephone	Live
Zhou Maomao	1810000000	Hangzhou, Zhejiang
Address		Remark
No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China		empty

垂直的列表。

User Info

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

垂直带边框的

垂直带边框和背景颜色的列表。

User Info

UserName	Zhou Maomao	Live	Hangzhou, Zhejiang
Remark	empty
Address	No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China

整行的展示。

API

通用属性参考：通用属性

Descriptions

参数	说明	类型	默认值	版本
bordered	是否展示边框	boolean	false
colon	配置 `Descriptions.Item` 的 `colon` 的默认值。表示是否显示 label 后面的冒号	boolean	true
column	一行的 `DescriptionItems` 数量，可以写成像素值或支持响应式的对象写法 `{ xs: 8, sm: 16, md: 24}`	number \| Record<Breakpoint, number>	3
~~contentStyle~~	自定义内容样式，请使用 `styles={{ content: {} }}` 替换	CSSProperties	-	4.10.0
extra	描述列表的操作区域，显示在右上方	ReactNode	-	4.5.0
items	描述列表项内容	DescriptionsItem[]	-	5.8.0
~~labelStyle~~	自定义标签样式，请使用 `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

DescriptionItem

参数	说明	类型	默认值	版本
~~contentStyle~~	自定义内容样式，请使用 `styles={{ content: {} }}` 替换	CSSProperties	-	4.9.0
label	内容的描述	ReactNode	-
~~labelStyle~~	自定义标签样式，请使用 `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）时，两者会同时作用。样式冲突时，后者会覆盖前者。

Semantic DOM

Toggle Border

User Info

Telephone1810000000

root
5.23.0
根元素
header
5.23.0
头部元素
title
5.23.0
标题元素
extra
5.23.0
额外内容
label
5.23.0
标签元素
content
5.23.0
内容元素

主题变量（Design Token）

组件 Token如何定制？

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

全局 Token如何定制？