Descriptions描述列表

成组展示多个只读字段。

何时使用

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

代码演示

User Info

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

基本

简单的展示。

TypeScript
JavaScript
import React from 'react';
import { Descriptions } from 'antd';

const App: React.FC = () => (
  <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>
);

export default App;

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

带边框的

带边框和背景颜色列表。

TypeScript
JavaScript
import React from 'react';
import { Badge, Descriptions } from 'antd';

const App: React.FC = () => (
  <Descriptions title="User Info" bordered>
    <Descriptions.Item label="Product">Cloud Database</Descriptions.Item>
    <Descriptions.Item label="Billing Mode">Prepaid</Descriptions.Item>
    <Descriptions.Item label="Automatic Renewal">YES</Descriptions.Item>
    <Descriptions.Item label="Order time">2018-04-24 18:00:00</Descriptions.Item>
    <Descriptions.Item label="Usage Time" span={2}>
      2019-04-24 18:00:00
    </Descriptions.Item>
    <Descriptions.Item label="Status" span={3}>
      <Badge status="processing" text="Running" />
    </Descriptions.Item>
    <Descriptions.Item label="Negotiated Amount">$80.00</Descriptions.Item>
    <Descriptions.Item label="Discount">$20.00</Descriptions.Item>
    <Descriptions.Item label="Official Receipts">$60.00</Descriptions.Item>
    <Descriptions.Item label="Config Info">
      Data disk type: MongoDB
      <br />
      Database version: 3.4
      <br />
      Package: dds.mongo.mid
      <br />
      Storage space: 10 GB
      <br />
      Replication factor: 3
      <br />
      Region: East China 1
      <br />
    </Descriptions.Item>
  </Descriptions>
);

export default App;

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

自定义尺寸

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

TypeScript
JavaScript
import React, { useState } from 'react';
import type { RadioChangeEvent } from 'antd';
import { Button, Descriptions, Radio } from 'antd';

const App: React.FC = () => {
  const [size, setSize] = useState<'default' | 'middle' | 'small'>('default');

  const onChange = (e: RadioChangeEvent) => {
    console.log('size checked', e.target.value);
    setSize(e.target.value);
  };

  return (
    <div>
      <Radio.Group onChange={onChange} value={size}>
        <Radio value="default">default</Radio>
        <Radio value="middle">middle</Radio>
        <Radio value="small">small</Radio>
      </Radio.Group>
      <br />
      <br />
      <Descriptions
        bordered
        title="Custom Size"
        size={size}
        extra={<Button type="primary">Edit</Button>}
      >
        <Descriptions.Item label="Product">Cloud Database</Descriptions.Item>
        <Descriptions.Item label="Billing">Prepaid</Descriptions.Item>
        <Descriptions.Item label="time">18:00:00</Descriptions.Item>
        <Descriptions.Item label="Amount">$80.00</Descriptions.Item>
        <Descriptions.Item label="Discount">$20.00</Descriptions.Item>
        <Descriptions.Item label="Official">$60.00</Descriptions.Item>
        <Descriptions.Item label="Config Info">
          Data disk type: MongoDB
          <br />
          Database version: 3.4
          <br />
          Package: dds.mongo.mid
          <br />
          Storage space: 10 GB
          <br />
          Replication factor: 3
          <br />
          Region: East China 1
          <br />
        </Descriptions.Item>
      </Descriptions>
      <br />
      <br />
      <Descriptions title="Custom Size" size={size} extra={<Button type="primary">Edit</Button>}>
        <Descriptions.Item label="Product">Cloud Database</Descriptions.Item>
        <Descriptions.Item label="Billing">Prepaid</Descriptions.Item>
        <Descriptions.Item label="time">18:00:00</Descriptions.Item>
        <Descriptions.Item label="Amount">$80.00</Descriptions.Item>
        <Descriptions.Item label="Discount">$20.00</Descriptions.Item>
        <Descriptions.Item label="Official">$60.00</Descriptions.Item>
      </Descriptions>
    </div>
  );
};

export default App;

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

响应式

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

TypeScript
JavaScript
import React from 'react';
import { Descriptions } from 'antd';

const App: React.FC = () => (
  <div>
    <Descriptions
      title="Responsive Descriptions"
      bordered
      column={{ xxl: 4, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 }}
    >
      <Descriptions.Item label="Product">Cloud Database</Descriptions.Item>
      <Descriptions.Item label="Billing">Prepaid</Descriptions.Item>
      <Descriptions.Item label="time">18:00:00</Descriptions.Item>
      <Descriptions.Item label="Amount">$80.00</Descriptions.Item>
      <Descriptions.Item label="Discount">$20.00</Descriptions.Item>
      <Descriptions.Item label="Official">$60.00</Descriptions.Item>
      <Descriptions.Item label="Config Info">
        Data disk type: MongoDB
        <br />
        Database version: 3.4
        <br />
        Package: dds.mongo.mid
        <br />
        Storage space: 10 GB
        <br />
        Replication factor: 3
        <br />
        Region: East China 1
      </Descriptions.Item>
    </Descriptions>
  </div>
);

export default App;

User Info

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

垂直

垂直的列表。

TypeScript
JavaScript
import React from 'react';
import { Descriptions } from 'antd';

const App: React.FC = () => (
  <Descriptions title="User Info" layout="vertical">
    <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="Address" span={2}>
      No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China
    </Descriptions.Item>
    <Descriptions.Item label="Remark">empty</Descriptions.Item>
  </Descriptions>
);

export default App;

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

垂直带边框的

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

TypeScript
JavaScript
import React from 'react';
import { Badge, Descriptions } from 'antd';

const App: React.FC = () => (
  <Descriptions title="User Info" layout="vertical" bordered>
    <Descriptions.Item label="Product">Cloud Database</Descriptions.Item>
    <Descriptions.Item label="Billing Mode">Prepaid</Descriptions.Item>
    <Descriptions.Item label="Automatic Renewal">YES</Descriptions.Item>
    <Descriptions.Item label="Order time">2018-04-24 18:00:00</Descriptions.Item>
    <Descriptions.Item label="Usage Time" span={2}>
      2019-04-24 18:00:00
    </Descriptions.Item>
    <Descriptions.Item label="Status" span={3}>
      <Badge status="processing" text="Running" />
    </Descriptions.Item>
    <Descriptions.Item label="Negotiated Amount">$80.00</Descriptions.Item>
    <Descriptions.Item label="Discount">$20.00</Descriptions.Item>
    <Descriptions.Item label="Official Receipts">$60.00</Descriptions.Item>
    <Descriptions.Item label="Config Info">
      Data disk type: MongoDB
      <br />
      Database version: 3.4
      <br />
      Package: dds.mongo.mid
      <br />
      Storage space: 10 GB
      <br />
      Replication factor: 3
      <br />
      Region: East China 1
      <br />
    </Descriptions.Item>
  </Descriptions>
);

export default App;

API

Descriptions

参数	说明	类型	默认值	版本
bordered	是否展示边框	boolean	false
colon	配置 `Descriptions.Item` 的 `colon` 的默认值	boolean	true
column	一行的 `DescriptionItems` 数量，可以写成像素值或支持响应式的对象写法 `{ xs: 8, sm: 16, md: 24}`	number	3
contentStyle	自定义内容样式	CSSProperties	-	4.10.0
extra	描述列表的操作区域，显示在右上方	ReactNode	-	4.5.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）时，两者会同时作用。样式冲突时，后者会覆盖前者。

import React from 'react'; import { Descriptions } from 'antd'; const App: React.FC = () => ( <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> ); export default App;

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

import React from 'react'; import { Badge, Descriptions } from 'antd'; const App: React.FC = () => ( <Descriptions title="User Info" bordered> <Descriptions.Item label="Product">Cloud Database</Descriptions.Item> <Descriptions.Item label="Billing Mode">Prepaid</Descriptions.Item> <Descriptions.Item label="Automatic Renewal">YES</Descriptions.Item> <Descriptions.Item label="Order time">2018-04-24 18:00:00</Descriptions.Item> <Descriptions.Item label="Usage Time" span={2}> 2019-04-24 18:00:00 </Descriptions.Item> <Descriptions.Item label="Status" span={3}> <Badge status="processing" text="Running" /> </Descriptions.Item> <Descriptions.Item label="Negotiated Amount">$80.00</Descriptions.Item> <Descriptions.Item label="Discount">$20.00</Descriptions.Item> <Descriptions.Item label="Official Receipts">$60.00</Descriptions.Item> <Descriptions.Item label="Config Info"> Data disk type: MongoDB <br /> Database version: 3.4 <br /> Package: dds.mongo.mid <br /> Storage space: 10 GB <br /> Replication factor: 3 <br /> Region: East China 1 <br /> </Descriptions.Item> </Descriptions> ); export default App;

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

import React, { useState } from 'react'; import type { RadioChangeEvent } from 'antd'; import { Button, Descriptions, Radio } from 'antd'; const App: React.FC = () => { const [size, setSize] = useState<'default' | 'middle' | 'small'>('default'); const onChange = (e: RadioChangeEvent) => { console.log('size checked', e.target.value); setSize(e.target.value); }; return ( <div> <Radio.Group onChange={onChange} value={size}> <Radio value="default">default</Radio> <Radio value="middle">middle</Radio> <Radio value="small">small</Radio> </Radio.Group> <br /> <br /> <Descriptions bordered title="Custom Size" size={size} extra={<Button type="primary">Edit</Button>} > <Descriptions.Item label="Product">Cloud Database</Descriptions.Item> <Descriptions.Item label="Billing">Prepaid</Descriptions.Item> <Descriptions.Item label="time">18:00:00</Descriptions.Item> <Descriptions.Item label="Amount">$80.00</Descriptions.Item> <Descriptions.Item label="Discount">$20.00</Descriptions.Item> <Descriptions.Item label="Official">$60.00</Descriptions.Item> <Descriptions.Item label="Config Info"> Data disk type: MongoDB <br /> Database version: 3.4 <br /> Package: dds.mongo.mid <br /> Storage space: 10 GB <br /> Replication factor: 3 <br /> Region: East China 1 <br /> </Descriptions.Item> </Descriptions> <br /> <br /> <Descriptions title="Custom Size" size={size} extra={<Button type="primary">Edit</Button>}> <Descriptions.Item label="Product">Cloud Database</Descriptions.Item> <Descriptions.Item label="Billing">Prepaid</Descriptions.Item> <Descriptions.Item label="time">18:00:00</Descriptions.Item> <Descriptions.Item label="Amount">$80.00</Descriptions.Item> <Descriptions.Item label="Discount">$20.00</Descriptions.Item> <Descriptions.Item label="Official">$60.00</Descriptions.Item> </Descriptions> </div> ); }; export default App;

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

import React from 'react'; import { Descriptions } from 'antd'; const App: React.FC = () => ( <div> <Descriptions title="Responsive Descriptions" bordered column={{ xxl: 4, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 }} > <Descriptions.Item label="Product">Cloud Database</Descriptions.Item> <Descriptions.Item label="Billing">Prepaid</Descriptions.Item> <Descriptions.Item label="time">18:00:00</Descriptions.Item> <Descriptions.Item label="Amount">$80.00</Descriptions.Item> <Descriptions.Item label="Discount">$20.00</Descriptions.Item> <Descriptions.Item label="Official">$60.00</Descriptions.Item> <Descriptions.Item label="Config Info"> Data disk type: MongoDB <br /> Database version: 3.4 <br /> Package: dds.mongo.mid <br /> Storage space: 10 GB <br /> Replication factor: 3 <br /> Region: East China 1 </Descriptions.Item> </Descriptions> </div> ); export default App;

UserName

Telephone

Live

Zhou Maomao

1810000000

Hangzhou, Zhejiang

Address

Remark

No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China

empty

import React from 'react'; import { Descriptions } from 'antd'; const App: React.FC = () => ( <Descriptions title="User Info" layout="vertical"> <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="Address" span={2}> No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China </Descriptions.Item> <Descriptions.Item label="Remark">empty</Descriptions.Item> </Descriptions> ); export default App;

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

import React from 'react'; import { Badge, Descriptions } from 'antd'; const App: React.FC = () => ( <Descriptions title="User Info" layout="vertical" bordered> <Descriptions.Item label="Product">Cloud Database</Descriptions.Item> <Descriptions.Item label="Billing Mode">Prepaid</Descriptions.Item> <Descriptions.Item label="Automatic Renewal">YES</Descriptions.Item> <Descriptions.Item label="Order time">2018-04-24 18:00:00</Descriptions.Item> <Descriptions.Item label="Usage Time" span={2}> 2019-04-24 18:00:00 </Descriptions.Item> <Descriptions.Item label="Status" span={3}> <Badge status="processing" text="Running" /> </Descriptions.Item> <Descriptions.Item label="Negotiated Amount">$80.00</Descriptions.Item> <Descriptions.Item label="Discount">$20.00</Descriptions.Item> <Descriptions.Item label="Official Receipts">$60.00</Descriptions.Item> <Descriptions.Item label="Config Info"> Data disk type: MongoDB <br /> Database version: 3.4 <br /> Package: dds.mongo.mid <br /> Storage space: 10 GB <br /> Replication factor: 3 <br /> Region: East China 1 <br /> </Descriptions.Item> </Descriptions> ); export default App;

API

Descriptions

参数	说明	类型	默认值	版本
bordered	是否展示边框	boolean	false
colon	配置 `Descriptions.Item` 的 `colon` 的默认值	boolean	true
column	一行的 `DescriptionItems` 数量，可以写成像素值或支持响应式的对象写法 `{ xs: 8, sm: 16, md: 24}`	number	3
contentStyle	自定义内容样式	CSSProperties	-	4.10.0
extra	描述列表的操作区域，显示在右上方	ReactNode	-	4.5.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）时，两者会同时作用。样式冲突时，后者会覆盖前者。

Ant Design

Descriptions描述列表

Ant Design

Descriptions描述列表

何时使用

代码演示

API

Descriptions

DescriptionItem

何时使用

代码演示

API

Descriptions

DescriptionItem