DescriptionList描述列表

成组展示多个只读字段，常见于详情页的信息展示。

引用方式：

  1. import DescriptionList from 'ant-design-pro/lib/DescriptionList';

详细使用方式请参照：独立使用 pro 组件

代码演示

DescriptionList 描述列表 - 图1

基本

基本描述列表。

  1. import DescriptionList from 'ant-design-pro/lib/DescriptionList';
  3. const { Description } = DescriptionList;
  5. ReactDOM.render(
  6.   <DescriptionList size="large" title="title">
  7.     <Description term="Firefox">
  8.       A free, open source, cross-platform,
  9.       graphical web browser developed by the
  10.       Mozilla Corporation and hundreds of
  11.       volunteers.
  12.     </Description>
  13.     <Description term="Firefox">
  14.       A free, open source, cross-platform,
  15.       graphical web browser developed by the
  16.       Mozilla Corporation and hundreds of
  17.       volunteers.
  18.     </Description>
  19.     <Description term="Firefox">
  20.       A free, open source, cross-platform,
  21.       graphical web browser developed by the
  22.       Mozilla Corporation and hundreds of
  23.       volunteers.
  24.     </Description>
  25.   </DescriptionList>
  26. , mountNode);

DescriptionList 描述列表 - 图2

垂直型

垂直布局。

  1. import DescriptionList from 'ant-design-pro/lib/DescriptionList';
  3. const { Description } = DescriptionList;
  5. ReactDOM.render(
  6.   <DescriptionList size="large" title="title" layout="vertical">
  7.     <Description term="Firefox">
  8.       A free, open source, cross-platform,
  9.       graphical web browser developed by the
  10.       Mozilla Corporation and hundreds of
  11.       volunteers.
  12.     </Description>
  13.     <Description term="Firefox">
  14.       A free, open source, cross-platform,
  15.       graphical web browser developed by the
  16.       Mozilla Corporation and hundreds of
  17.       volunteers.
  18.     </Description>
  19.     <Description term="Firefox">
  20.       A free, open source, cross-platform,
  21.       graphical web browser developed by the
  22.       Mozilla Corporation and hundreds of
  23.       volunteers.
  24.     </Description>
  25.   </DescriptionList>
  26. , mountNode);

API

DescriptionList

参数说明类型默认值
layout布局方式Enum{'horizontal', 'vertical'}'horizontal'
col指定信息最多分几列展示，最终一行几列由 col 配置结合响应式规则决定number(0 < col <= 4)3
title列表标题ReactNode-
gutter列表项间距，单位为 pxnumber32
size列表型号Enum{'large', 'small'}-

响应式规则

窗口宽度展示列数
≥768pxcol
≥576pxcol < 2 ? col : 2
<576px1

DescriptionList.Description

参数说明类型默认值
term列表项标题ReactNode-