Ant Design

⌘ K

5.21.3

Descriptions

Display multiple read-only fields in a group.

가져오기import{ Descriptions }from"antd";

소스components/descriptions

문서

이 페이지 수정 변경 로그

Ant Design

⌘ K

5.21.3

Descriptions

Display multiple read-only fields in a group.

가져오기import{ Descriptions }from"antd";

소스components/descriptions

문서

이 페이지 수정 변경 로그

When To Use

Commonly displayed on the details page.

// works when >= 5.8.0, recommended ✅

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

// works when <5.8.0 , deprecated when >=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>;

Examples

API

Common props ref：Common props

Descriptions

Property	Description	Type	Default	Version
bordered	Whether to display the border	boolean	false
colon	Change default props `colon` value of Descriptions.Item. Indicates whether the colon after the label is displayed	boolean	true
column	The number of `DescriptionItems` in a row,could be a number or a object like `{ xs: 8, sm: 16, md: 24}`,(Only set `bordered={true}` to take effect)	number \| Record<Breakpoint, number>	3
contentStyle	Customize content style	CSSProperties	-	4.10.0
extra	The action area of the description list, placed at the top-right	ReactNode	-	4.5.0
items	Describe the contents of the list item	DescriptionsItem[]	-	5.8.0
labelStyle	Customize label style	CSSProperties	-	4.10.0
layout	Define description layout	`horizontal` \| `vertical`	`horizontal`
size	Set the size of the list. Can be set to `middle`,`small`, or not filled	`default` \| `middle` \| `small`	-
title	The title of the description list, placed at the top	ReactNode	-

DescriptionItem

Property	Description	Type	Default	Version
contentStyle	Customize content style	CSSProperties	-	4.9.0
label	The description of the content	ReactNode	-
labelStyle	Customize label style	CSSProperties	-	4.9.0
span	The number of columns included	number \| Screens	1	`screens: 5.9.0`

The number of span Description.Item. Span={2} takes up the width of two DescriptionItems. When both style and labelStyle(or contentStyle) configured, both of them will work. And next one will overwrite first when conflict.

Design 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)
titleColor	标题文字颜色	string	rgba(0, 0, 0, 0.88)
titleMarginBottom	标题下间距	number	20

글로벌 토큰어떻게 사용하나요?

When To Use

Commonly displayed on the details page.

// works when >= 5.8.0, recommended ✅

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

// works when <5.8.0 , deprecated when >=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>;

Examples

API

Common props ref：Common props

Descriptions

Property	Description	Type	Default	Version
bordered	Whether to display the border	boolean	false
colon	Change default props `colon` value of Descriptions.Item. Indicates whether the colon after the label is displayed	boolean	true
column	The number of `DescriptionItems` in a row,could be a number or a object like `{ xs: 8, sm: 16, md: 24}`,(Only set `bordered={true}` to take effect)	number \| Record<Breakpoint, number>	3
contentStyle	Customize content style	CSSProperties	-	4.10.0
extra	The action area of the description list, placed at the top-right	ReactNode	-	4.5.0
items	Describe the contents of the list item	DescriptionsItem[]	-	5.8.0
labelStyle	Customize label style	CSSProperties	-	4.10.0
layout	Define description layout	`horizontal` \| `vertical`	`horizontal`
size	Set the size of the list. Can be set to `middle`,`small`, or not filled	`default` \| `middle` \| `small`	-
title	The title of the description list, placed at the top	ReactNode	-

DescriptionItem

Property	Description	Type	Default	Version
contentStyle	Customize content style	CSSProperties	-	4.9.0
label	The description of the content	ReactNode	-
labelStyle	Customize label style	CSSProperties	-	4.9.0
span	The number of columns included	number \| Screens	1	`screens: 5.9.0`

The number of span Description.Item. Span={2} takes up the width of two DescriptionItems. When both style and labelStyle(or contentStyle) configured, both of them will work. And next one will overwrite first when conflict.

Design 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)
titleColor	标题文字颜色	string	rgba(0, 0, 0, 0.88)
titleMarginBottom	标题下间距	number	20

글로벌 토큰어떻게 사용하나요?

Customize label & wrapper style

Customize label & wrapper style

JSX demo

Component Token

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

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号

User Info

longloooooooooooooooooooooooooooooooooooooooooooooooong	longloooooooooooooooooooooooooooooooooooooooooooooooong
longloooooooooooooooooooooooooooooooooooooooooooooooong	longloooooooooooooooooooooooooooooooooooooooooooooooong
longloooooooooooooooooooooooooooooooooooooooooooooooong

User Info

long	long
loooooooooooooooooooooooooooooooooooooooooooooooong	loooooooooooooooooooooooooooooooooooooooooooooooong
long	long
loooooooooooooooooooooooooooooooooooooooooooooooong	loooooooooooooooooooooooooooooooooooooooooooooooong
long
loooooooooooooooooooooooooooooooooooooooooooooooong

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

horizontalvertical

User Info

Product	Cloud Database	Billing Mode	Prepaid	Automatic Renewal	YES

Root style

Product	Cloud Database	Billing Mode	Prepaid	Automatic Renewal	YES

User Info

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

defaultmiddlesmall

Custom Size

extra color: blue

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