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 } 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 bordered title="Custom Size" size={this.state.size}>
  26.           <Descriptions.Item label="Product">Cloud Database</Descriptions.Item>
  27.           <Descriptions.Item label="Billing">Prepaid</Descriptions.Item>
  28.           <Descriptions.Item label="time">18:00:00</Descriptions.Item>
  29.           <Descriptions.Item label="Amount">$80.00</Descriptions.Item>
  30.           <Descriptions.Item label="Discount">$20.00</Descriptions.Item>
  31.           <Descriptions.Item label="Official">$60.00</Descriptions.Item>
  32.           <Descriptions.Item label="Config Info">
  33.             Data disk type: MongoDB
  34.             <br />
  35.             Database version: 3.4
  36.             <br />
  37.             Package: dds.mongo.mid
  38.             <br />
  39.             Storage space: 10 GB
  40.             <br />
  41.             Replication factor: 3
  42.             <br />
  43.             Region: East China 1<br />
  44.           </Descriptions.Item>
  45.         </Descriptions>
  46.         <br />
  47.         <br />
  48.         <Descriptions title="Custom Size" size={this.state.size}>
  49.           <Descriptions.Item label="Product">Cloud Database</Descriptions.Item>
  50.           <Descriptions.Item label="Billing">Prepaid</Descriptions.Item>
  51.           <Descriptions.Item label="time">18:00:00</Descriptions.Item>
  52.           <Descriptions.Item label="Amount">$80.00</Descriptions.Item>
  53.           <Descriptions.Item label="Discount">$20.00</Descriptions.Item>
  54.           <Descriptions.Item label="Official">$60.00</Descriptions.Item>
  55.         </Descriptions>
  56.       </div>
  57.     );
  58.   }
  59. }
  61. ReactDOM.render(<Demo />, mountNode);

Descriptions描述列表 - 图4

响应式

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

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

参数说明类型默认值版本
title描述列表的标题，显示在最顶部ReactNode-3.19.0
bordered是否展示边框booleanfalse3.19.0
column一行的 DescriptionItems 数量，可以写成像素值或支持响应式的对象写法 { xs: 8, sm: 16, md: 24}number33.19.0
size设置列表的大小。可以设置为 middle 、small, 或不填（只有设置 bordered={true} 生效）default | middle | smallfalse3.19.0
layout描述布局horizontal | verticalhorizontal3.19.8
colon配置 Descriptions.Item 的 colon 的默认值booleantrue3.21.0

DescriptionItem

参数说明类型默认值版本
label内容的描述ReactNode-3.19.0
span包含列的数量number13.19.0

span 是 Description.Item 的数量。 span={2} 会占用两个 DescriptionItem 的宽度。