DescriptionList描述列表

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

引用方式：

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

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

代码演示

基本

基本描述列表。

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

const { Description } = DescriptionList;

ReactDOM.render(
  <DescriptionList size="large" title="title">
    <Description term="Firefox">
      A free, open source, cross-platform, graphical web browser developed by the Mozilla
      Corporation and hundreds of volunteers.
    </Description>
    <Description term="Firefox">
      A free, open source, cross-platform, graphical web browser developed by the Mozilla
      Corporation and hundreds of volunteers.
    </Description>
    <Description term="Firefox">
      A free, open source, cross-platform, graphical web browser developed by the Mozilla
      Corporation and hundreds of volunteers.
    </Description>
  </DescriptionList>,
  mountNode
);

垂直型

垂直布局。

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

const { Description } = DescriptionList;

ReactDOM.render(
  <DescriptionList size="large" title="title" layout="vertical">
    <Description term="Firefox">
      A free, open source, cross-platform, graphical web browser developed by the Mozilla
      Corporation and hundreds of volunteers.
    </Description>
    <Description term="Firefox">
      A free, open source, cross-platform, graphical web browser developed by the Mozilla
      Corporation and hundreds of volunteers.
    </Description>
    <Description term="Firefox">
      A free, open source, cross-platform, graphical web browser developed by the Mozilla
      Corporation and hundreds of volunteers.
    </Description>
  </DescriptionList>,
  mountNode
);

API#

DescriptionList#

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

响应式规则#

窗口宽度	展示列数
`≥768px`	`col`
`≥576px`	`col < 2 ? col : 2`
`<576px`	`1`

DescriptionList.Description#

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