Descriptions描述列表

成组展示多个只读字段。

何时使用

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

代码演示

Descriptions描述列表 - 图1

基本

简单的展示。

  1. import { Descriptions } from 'antd';
  3. ReactDOM.render(
  4.   <Descriptions title="User Info">
  5.     <Descriptions.Item label="UserName">Zhou Maomao</Descriptions.Item>
  6.     <Descriptions.Item label="Telephone">1810000000</Descriptions.Item>
  7.     <Descriptions.Item label="Live">Hangzhou, Zhejiang</Descriptions.Item>
  8.     <Descriptions.Item label="Remark">empty</Descriptions.Item>
  9.     <Descriptions.Item label="Address">
  10.       No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China
  11.     </Descriptions.Item>
  12.   </Descriptions>,
  13.   mountNode,
  14. );

Descriptions描述列表 - 图2

带边框的

带边框和背景颜色列表。

  1. import { Descriptions, Badge } from 'antd';
  3. ReactDOM.render(
  4.   <Descriptions title="User Info" bordered>
  5.     <Descriptions.Item label="Product">Cloud Database</Descriptions.Item>
  6.     <Descriptions.Item label="Billing Mode">Prepaid</Descriptions.Item>
  7.     <Descriptions.Item label="Automatic Renewal">YES</Descriptions.Item>
  8.     <Descriptions.Item label="Order time">2018-04-24 18:00:00</Descriptions.Item>
  9.     <Descriptions.Item label="Usage Time" span={2}>
  10.       2019-04-24 18:00:00
  11.     </Descriptions.Item>
  12.     <Descriptions.Item label="Status" span={3}>
  13.       <Badge status="processing" text="Running" />
  14.     </Descriptions.Item>
  15.     <Descriptions.Item label="Negotiated Amount">$80.00</Descriptions.Item>
  16.     <Descriptions.Item label="Discount">$20.00</Descriptions.Item>
  17.     <Descriptions.Item label="Official Receipts">$60.00</Descriptions.Item>
  18.     <Descriptions.Item label="Config Info">
  19.       Data disk type: MongoDB
  20.       <br />
  21.       Database version: 3.4
  22.       <br />
  23.       Package: dds.mongo.mid
  24.       <br />
  25.       Storage space: 10 GB
  26.       <br />
  27.       Replication factor: 3
  28.       <br />
  29.       Region: East China 1<br />
  30.     </Descriptions.Item>
  31.   </Descriptions>,
  32.   mountNode,
  33. );

Descriptions描述列表 - 图3

自定义尺寸

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

  1. import { Descriptions, Radio, Button } from 'antd';
  3. class Demo extends React.Component {
  4.   state = {
  5.     size: 'default',
  6.   };
  8.   onChange = e => {
  9.     console.log('size checked', e.target.value);
  10.     this.setState({
  11.       size: e.target.value,
  12.     });
  13.   };
  15.   render() {
  16.     return (
  17.       <div>
  18.         <Radio.Group onChange={this.onChange} value={this.state.size}>
  19.           <Radio value="default">default</Radio>
  20.           <Radio value="middle">middle</Radio>
  21.           <Radio value="small">small</Radio>
  22.         </Radio.Group>
  23.         <br />
  24.         <br />
  25.         <Descriptions
  26.           bordered
  27.           title="Custom Size"
  28.           size={this.state.size}
  29.           extra={<Button type="primary">Edit</Button>}
  30.         >
  31.           <Descriptions.Item label="Product">Cloud Database</Descriptions.Item>
  32.           <Descriptions.Item label="Billing">Prepaid</Descriptions.Item>
  33.           <Descriptions.Item label="time">18:00:00</Descriptions.Item>
  34.           <Descriptions.Item label="Amount">$80.00</Descriptions.Item>
  35.           <Descriptions.Item label="Discount">$20.00</Descriptions.Item>
  36.           <Descriptions.Item label="Official">$60.00</Descriptions.Item>
  37.           <Descriptions.Item label="Config Info">
  38.             Data disk type: MongoDB
  39.             <br />
  40.             Database version: 3.4
  41.             <br />
  42.             Package: dds.mongo.mid
  43.             <br />
  44.             Storage space: 10 GB
  45.             <br />
  46.             Replication factor: 3
  47.             <br />
  48.             Region: East China 1<br />
  49.           </Descriptions.Item>
  50.         </Descriptions>
  51.         <br />
  52.         <br />
  53.         <Descriptions
  54.           title="Custom Size"
  55.           size={this.state.size}
  56.           extra={<Button type="primary">Edit</Button>}
  57.         >
  58.           <Descriptions.Item label="Product">Cloud Database</Descriptions.Item>
  59.           <Descriptions.Item label="Billing">Prepaid</Descriptions.Item>
  60.           <Descriptions.Item label="time">18:00:00</Descriptions.Item>
  61.           <Descriptions.Item label="Amount">$80.00</Descriptions.Item>
  62.           <Descriptions.Item label="Discount">$20.00</Descriptions.Item>
  63.           <Descriptions.Item label="Official">$60.00</Descriptions.Item>
  64.         </Descriptions>
  65.       </div>
  66.     );
  67.   }
  68. }
  70. ReactDOM.render(<Demo />, mountNode);

Descriptions描述列表 - 图4

响应式

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

  1. import { Descriptions } from 'antd';
  3. const Demo = () => (
  4.   <div>
  5.     <Descriptions
  6.       title="Responsive Descriptions"
  7.       bordered
  8.       column={{ xxl: 4, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 }}
  9.     >
  10.       <Descriptions.Item label="Product">Cloud Database</Descriptions.Item>
  11.       <Descriptions.Item label="Billing">Prepaid</Descriptions.Item>
  12.       <Descriptions.Item label="time">18:00:00</Descriptions.Item>
  13.       <Descriptions.Item label="Amount">$80.00</Descriptions.Item>
  14.       <Descriptions.Item label="Discount">$20.00</Descriptions.Item>
  15.       <Descriptions.Item label="Official">$60.00</Descriptions.Item>
  16.       <Descriptions.Item label="Config Info">
  17.         Data disk type: MongoDB
  18.         <br />
  19.         Database version: 3.4
  20.         <br />
  21.         Package: dds.mongo.mid
  22.         <br />
  23.         Storage space: 10 GB
  24.         <br />
  25.         Replication factor: 3
  26.         <br />
  27.         Region: East China 1
  28.       </Descriptions.Item>
  29.     </Descriptions>
  30.   </div>
  31. );
  33. ReactDOM.render(<Demo />, mountNode);

Descriptions描述列表 - 图5

垂直

垂直的列表。

  1. import { Descriptions } from 'antd';
  3. ReactDOM.render(
  4.   <Descriptions title="User Info" layout="vertical">
  5.     <Descriptions.Item label="UserName">Zhou Maomao</Descriptions.Item>
  6.     <Descriptions.Item label="Telephone">1810000000</Descriptions.Item>
  7.     <Descriptions.Item label="Live">Hangzhou, Zhejiang</Descriptions.Item>
  8.     <Descriptions.Item label="Address" span={2}>
  9.       No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China
  10.     </Descriptions.Item>
  11.     <Descriptions.Item label="Remark">empty</Descriptions.Item>
  12.   </Descriptions>,
  13.   mountNode,
  14. );

Descriptions描述列表 - 图6

垂直带边框的

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

  1. import { Descriptions, Badge } from 'antd';
  3. ReactDOM.render(
  4.   <Descriptions title="User Info" layout="vertical" bordered>
  5.     <Descriptions.Item label="Product">Cloud Database</Descriptions.Item>
  6.     <Descriptions.Item label="Billing Mode">Prepaid</Descriptions.Item>
  7.     <Descriptions.Item label="Automatic Renewal">YES</Descriptions.Item>
  8.     <Descriptions.Item label="Order time">2018-04-24 18:00:00</Descriptions.Item>
  9.     <Descriptions.Item label="Usage Time" span={2}>
  10.       2019-04-24 18:00:00
  11.     </Descriptions.Item>
  12.     <Descriptions.Item label="Status" span={3}>
  13.       <Badge status="processing" text="Running" />
  14.     </Descriptions.Item>
  15.     <Descriptions.Item label="Negotiated Amount">$80.00</Descriptions.Item>
  16.     <Descriptions.Item label="Discount">$20.00</Descriptions.Item>
  17.     <Descriptions.Item label="Official Receipts">$60.00</Descriptions.Item>
  18.     <Descriptions.Item label="Config Info">
  19.       Data disk type: MongoDB
  20.       <br />
  21.       Database version: 3.4
  22.       <br />
  23.       Package: dds.mongo.mid
  24.       <br />
  25.       Storage space: 10 GB
  26.       <br />
  27.       Replication factor: 3
  28.       <br />
  29.       Region: East China 1<br />
  30.     </Descriptions.Item>
  31.   </Descriptions>,
  32.   mountNode,
  33. );

API

Descriptions

参数说明类型默认值版本
bordered是否展示边框booleanfalse
colon配置 Descriptions.Item 的 colon 的默认值booleantrue
column一行的 DescriptionItems 数量，可以写成像素值或支持响应式的对象写法 { xs: 8, sm: 16, md: 24}number3
contentStyle自定义内容样式CSSProperties-4.10.0
extra描述列表的操作区域，显示在右上方ReactNode-4.5.0
labelStyle自定义标签样式CSSProperties-4.10.0
layout描述布局horizontal | verticalhorizontal
size设置列表的大小。可以设置为 middle 、small, 或不填（只有设置 bordered={true} 生效）default | middle | small-
title描述列表的标题，显示在最顶部ReactNode-

DescriptionItem

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

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