Descriptions
描述列表

展示多个只读字段的组合。
使用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>;

代码演示

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

简单的展示。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
User Info
ProductCloud DatabaseBilling ModePrepaidAutomatic RenewalYES
Order time2018-04-24 18:00:00Usage Time2019-04-24 18:00:00
StatusRunning
Negotiated Amount$80.00Discount$20.00Official Receipts$60.00
Config InfoData disk type: MongoDB
Database version: 3.4
Package: dds.mongo.mid
Storage space: 10 GB
Replication factor: 3
Region: East China 1

带边框和背景颜色列表。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
User Info
ProductCloud Database
Billing Mode
Prepaid
Automatic RenewalYES
Order time2018-04-24 18:00:00
Usage Time2019-04-24 18:00:00
StatusRunning
Negotiated Amount$80.00
Discount$20.00
Official Receipts$60.00
Config InfoData disk type: MongoDB
Database version: 3.4
Package: dds.mongo.mid
Storage space: 10 GB
Replication factor: 3
Region: East China 1
Official Receipts$60.00
Config Info
姓名年龄住址
胡彦斌32西湖区湖底公园1号
胡彦祖42西湖区湖底公园1号

复杂文本的情况。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
User Info
longloooooooooooooooooooooooooooooooooooooooooooooooong
longloooooooooooooooooooooooooooooooooooooooooooooooong
longloooooooooooooooooooooooooooooooooooooooooooooooong
longloooooooooooooooooooooooooooooooooooooooooooooooong
longloooooooooooooooooooooooooooooooooooooooooooooooong
User Info
long
long
loooooooooooooooooooooooooooooooooooooooooooooooong
loooooooooooooooooooooooooooooooooooooooooooooooong
long
long
loooooooooooooooooooooooooooooooooooooooooooooooong
loooooooooooooooooooooooooooooooooooooooooooooooong
long
loooooooooooooooooooooooooooooooooooooooooooooooong

间距

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code


Custom Size
ProductCloud DatabaseBillingPrepaidTime18:00:00
Amount$80.00Discount$20.00Official$60.00
Config InfoData 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

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

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Responsive Descriptions
ProductCloud DatabaseBillingPrepaidTime18:00:00
Amount$80.00Discount$20.00Official$60.00
Config InfoData disk type: MongoDB
Database version: 3.4
Package: dds.mongo.mid
Hardware InfoCPU: 6 Core 3.5 GHz
Storage space: 10 GB
Replication factor: 3
Region: East China 1

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

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
User Info
UserName
Telephone
Live
Zhou Maomao
1810000000
Hangzhou, Zhejiang
Address
Remark
No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China
empty

垂直的列表。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
User Info
ProductBilling ModeAutomatic Renewal
Cloud DatabasePrepaidYES
Order timeUsage Time
2018-04-24 18:00:002019-04-24 18:00:00
Status
Running
Negotiated AmountDiscountOfficial 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

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

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
User Info
ProductCloud DatabaseBilling ModePrepaidAutomatic RenewalYES
Root style
ProductCloud DatabaseBilling ModePrepaidAutomatic RenewalYES

自定义 label & wrapper 样式

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
User Info
UserNameZhou Maomao
Telephone1810000000
LiveHangzhou, Zhejiang
Remarkempty
AddressNo. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China

JSX 风格演示。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code


Custom Size
extra color: blue
ProductCloud DatabaseBillingPrepaidTime18:00:00
Amount$80.00Discount$20.00Official$60.00
Config InfoData 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

Component Token Debug.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
User Info
UserNameZhou MaomaoLiveHangzhou, Zhejiang
Remarkempty
AddressNo. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China

整行的展示。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code

API

通用属性参考:通用属性

Descriptions

参数说明类型默认值版本
bordered是否展示边框booleanfalse
colon配置 Descriptions.Itemcolon 的默认值。表示是否显示 label 后面的冒号booleantrue
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 | verticalhorizontal
size设置列表的大小。可以设置为 middlesmall, 或不填(只有设置 bordered={true} 生效)default | middle | small-
title描述列表的标题,显示在最顶部ReactNode-

DescriptionItem

参数说明类型默认值版本
contentStyle自定义内容样式CSSProperties-4.9.0
label内容的描述ReactNode-
labelStyle自定义标签样式CSSProperties-4.9.0
span包含列的数量(filled 铺满当前行剩余部分)number| filled | Screens1screens: 5.9.0filled: 5.22.0

span 是 Description.Item 的数量。 span={2} 会占用两个 DescriptionItem 的宽度。当同时配置 stylelabelStyle(或 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冒号左间距number2
colonMarginRight冒号右间距number8
contentColor内容区域文字颜色stringrgba(0,0,0,0.88)
extraColor额外区域文字颜色stringrgba(0,0,0,0.88)
itemPaddingBottom子项下间距number16
itemPaddingEnd子项结束间距number16
labelBg标签背景色stringrgba(0,0,0,0.02)
titleColor标题文字颜色stringrgba(0,0,0,0.88)
titleMarginBottom标题下间距number20

全局 Token如何定制?