DescriptionList

Groups display multiple read-only fields, which are common to informational displays on detail pages.

Usage:

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

Learning more to visit: Using Pro Components Alone

Examples

Basic

Basic DescriptionList.

expand codeexpand code
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
);
Vertical

Vertical layout.

expand codeexpand code
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#

Property Description Type Default
layout type of layout Enum{'horizontal', 'vertical'} 'horizontal'
col specify the maximum number of columns to display, the final columns number is determined by col setting combined with Responsive Rules number(0 < col <= 4) 3
title title ReactNode -
gutter specify the distance between two items, unit is px number 32
size size of list Enum{'large', 'small'} -

Responsive Rules#

Window Width Columns Number
≥768px col
≥576px col < 2 ? col : 2
<576px 1

DescriptionList.Description#

Property Description Type Default
term item title ReactNode -
CountDownException