描述列表 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>;

代码演示

API

通用属性参考：通用属性

Descriptions

参数	说明	类型	默认值	版本	全局配置
bordered	是否展示边框	boolean	false		×
classNames	用于自定义组件内部各语义化结构的 class，支持对象或函数	Record<SemanticDOM, string> \| (info: { props })=> Record<SemanticDOM, string>	-		5.23.0
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	设置列表的大小。可以设置为 `medium` 、`small`, 或不填	`large` \| `medium` \| `small`	`large`		×
styles	用于自定义组件内部各语义化结构的行内 style，支持对象或函数	Record<SemanticDOM, CSSProperties> \| (info: { props })=> Record<SemanticDOM, CSSProperties>	-		5.23.0
title	描述列表的标题，显示在最顶部	ReactNode	-		×

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
头部元素，包含flex布局、对齐方式、下边距等头部区域的布局和样式控制
title
5.23.0
标题元素，包含文本省略、flex占比、颜色、字体权重、字体大小、行高等标题文字样式
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如何定制？

Token 名称	描述	类型	默认值
colorSplit	用于作为分割线的颜色，此颜色和 colorBorderSecondary 的颜色一致，但是用的是透明色。	string	rgba(5,5,5,0.06)
colorText	最深的文本色。为了符合W3C标准，默认的文本颜色使用了该色，同时这个颜色也是最深的中性色。	string	rgba(0,0,0,0.88)
colorTextSecondary	作为第二梯度的文本色，一般用在不那么需要强化文本颜色的场景，例如 Label 文本、Menu 的文本选中态等场景。	string	rgba(0,0,0,0.65)
borderRadiusLG	LG号圆角，用于组件中的一些大圆角，如 Card、Modal 等一些组件样式。	number	8
fontFamily	Ant Design 的字体家族中优先使用系统默认的界面字体，同时提供了一套利于屏显的备用字体库，来维护在不同平台以及浏览器的显示下，字体始终保持良好的易读性和可读性，体现了友好、稳定和专业的特性。	string	-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'
fontSize	设计系统中使用最广泛的字体大小，文本梯度也将基于该字号进行派生。	number	14
fontSizeLG	大号字体大小	number	16
fontWeightStrong	控制标题类组件（如 h1、h2、h3）或选中项的字体粗细。	number	600
lineHeight	文本行高	number	1.5714285714285714
lineHeightLG	大型文本行高	number	1.5
lineType	用于控制组件边框、分割线等的样式，默认是实线	string	solid
lineWidth	用于控制组件边框、分割线等的宽度	number	1
padding	控制元素的内间距。	number	16
paddingLG	控制元素的大内间距。	number	24
paddingSM	控制元素的小内间距。	number	12
paddingXS	控制元素的特小内间距。	number	8

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

带边框和背景颜色列表。

largemediumsmall

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

Product	Cloud Database	Billing Mode	Prepaid	Automatic Renewal	YES

User Info

Product	Cloud Database	Billing Mode	Prepaid	Automatic Renewal	YES

自定义语义结构的样式和类

通过 classNames 和 styles 传入对象/函数可以自定义 Descriptions 的语义化结构样式。

6.0.0

User Info

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

整行的展示。