Descriptions描述列表

成组展示多个只读字段。

何时使用

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

代码演示

Descriptions描述列表 - 图1

基本

简单的展示。

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

Descriptions描述列表 - 图2

带边框的

带边框和背景颜色列表。

  1. import { Descriptions, Badge } from 'antd';
  2. ReactDOM.render(
  3. <Descriptions title="User Info" bordered>
  4. <Descriptions.Item label="Product">Cloud Database</Descriptions.Item>
  5. <Descriptions.Item label="Billing Mode">Prepaid</Descriptions.Item>
  6. <Descriptions.Item label="Automatic Renewal">YES</Descriptions.Item>
  7. <Descriptions.Item label="Order time">2018-04-24 18:00:00</Descriptions.Item>
  8. <Descriptions.Item label="Usage Time" span={2}>
  9. 2019-04-24 18:00:00
  10. </Descriptions.Item>
  11. <Descriptions.Item label="Status" span={3}>
  12. <Badge status="processing" text="Running" />
  13. </Descriptions.Item>
  14. <Descriptions.Item label="Negotiated Amount">$80.00</Descriptions.Item>
  15. <Descriptions.Item label="Discount">$20.00</Descriptions.Item>
  16. <Descriptions.Item label="Official Receipts">$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<br />
  29. </Descriptions.Item>
  30. </Descriptions>,
  31. mountNode,
  32. );

Descriptions描述列表 - 图3

自定义尺寸

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

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

Descriptions描述列表 - 图4

响应式

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

  1. import { Descriptions } from 'antd';
  2. const Demo = () => {
  3. return (
  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. );
  32. };
  33. ReactDOM.render(<Demo />, mountNode);

Descriptions描述列表 - 图5

垂直

垂直的列表。

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

Descriptions描述列表 - 图6

垂直带边框的

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

  1. import { Descriptions, Badge } from 'antd';
  2. ReactDOM.render(
  3. <Descriptions title="User Info" layout="vertical" bordered>
  4. <Descriptions.Item label="Product">Cloud Database</Descriptions.Item>
  5. <Descriptions.Item label="Billing Mode">Prepaid</Descriptions.Item>
  6. <Descriptions.Item label="Automatic Renewal">YES</Descriptions.Item>
  7. <Descriptions.Item label="Order time">2018-04-24 18:00:00</Descriptions.Item>
  8. <Descriptions.Item label="Usage Time" span={3}>
  9. 2019-04-24 18:00:00
  10. </Descriptions.Item>
  11. <Descriptions.Item label="Status" span={3}>
  12. <Badge status="processing" text="Running" />
  13. </Descriptions.Item>
  14. <Descriptions.Item label="Negotiated Amount">$80.00</Descriptions.Item>
  15. <Descriptions.Item label="Discount">$20.00</Descriptions.Item>
  16. <Descriptions.Item label="Official Receipts">$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<br />
  29. </Descriptions.Item>
  30. </Descriptions>,
  31. mountNode,
  32. );

API

Descriptions

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

DescriptionItem

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

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