何时使用

代码演示

基本

带边框的

自定义尺寸

Descriptions
描述列表

展示多个只读字段的组合。

使用import { Descriptions } from "antd";

反馈

components/descriptions 提交问题待解决

文档

编辑此页

文档贡献者

Collapse折叠面板 Empty空状态

何时使用

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

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
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）时，两者会同时作用。样式冲突时，后者会覆盖前者。

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 名称

描述

类型

默认值

colonMarginLeft

冒号左间距

number

colonMarginRight

冒号右间距

number

contentColor

内容区域文字颜色

string

rgba(0,0,0,0.88)

extraColor

额外区域文字颜色

string

rgba(0,0,0,0.88)

itemPaddingBottom

子项下间距

number

itemPaddingEnd

子项结束间距

number

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

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

Ant Design

Descriptions
描述列表

何时使用

代码演示

API

Descriptions

DescriptionItem

Semantic DOM

root

header

title

extra

label

content

主题变量（Design Token）

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

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

Descriptions描述列表

何时使用

代码演示

API

Descriptions

DescriptionItem

Semantic DOM

root

header

title

extra

label

content

主题变量（Design Token）

Descriptions
描述列表