Descriptions
描述列表

成组展示多个只读字段。

何时使用

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

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

垂直带边框的

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

API

通用属性参考：通用属性

Descriptions

参数	说明	类型	默认值	版本
bordered	是否展示边框	boolean	false
colon	配置 `Descriptions.Item` 的 `colon` 的默认值	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	-

DescriptionItem

参数	说明	类型	默认值	版本
contentStyle	自定义内容样式	CSSProperties	-	4.9.0
label	内容的描述	ReactNode	-
labelStyle	自定义标签样式	CSSProperties	-	4.9.0
span	包含列的数量	number	1

span 是 Description.Item 的数量。 span={2} 会占用两个 DescriptionItem 的宽度。当同时配置 style 和 labelStyle（或 contentStyle）时，两者会同时作用。样式冲突时，后者会覆盖前者。

Design Token

组件 Token

全局 Token

何时使用

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

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

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

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

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

API

通用属性参考：通用属性

Descriptions

参数	说明	类型	默认值	版本
bordered	是否展示边框	boolean	false
colon	配置 `Descriptions.Item` 的 `colon` 的默认值	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	-

DescriptionItem

参数	说明	类型	默认值	版本
contentStyle	自定义内容样式	CSSProperties	-	4.9.0
label	内容的描述	ReactNode	-
labelStyle	自定义标签样式	CSSProperties	-	4.9.0
span	包含列的数量	number	1

span 是 Description.Item 的数量。 span={2} 会占用两个 DescriptionItem 的宽度。当同时配置 style 和 labelStyle（或 contentStyle）时，两者会同时作用。样式冲突时，后者会覆盖前者。

Namu Design

Descriptions
描述列表

Namu Design

Descriptions
描述列表

何时使用

代码演示

API

Descriptions

DescriptionItem

Design Token

组件 Token

全局 Token

何时使用

代码演示

API

Descriptions

DescriptionItem

Design Token

组件 Token

全局 Token

Descriptions描述列表更新日志

Descriptions描述列表更新日志

何时使用

代码演示

API

Descriptions

DescriptionItem

Design Token

组件 Token

全局 Token

何时使用

代码演示

API

Descriptions

DescriptionItem

Design Token

组件 Token

全局 Token

Descriptions
描述列表

Descriptions
描述列表