Descriptions

When To Use

Commonly displayed on the details page.

tsx

// works when >= 5.8.0, recommended ✅

const items: DescriptionsProps['items'] = [
  {
    key: '1',
    label: 'UserName',
    children: <p>Zhou Maomao</p>,
  },
  {
    key: '2',
    label: 'Telephone',
    children: <p>1810000000</p>,
  },
  {
    key: '3',
    label: 'Live',
    children: <p>Hangzhou, Zhejiang</p>,
  },
  {
    key: '4',
    label: 'Remark',
    children: <p>empty</p>,
  },
  {
    key: '5',
    label: 'Address',
    children: <p>No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China</p>,
  },
];

<Descriptions title="User Info" items={items} />;

// works when <5.8.0 , deprecated when >=5.8.0 🙅🏻‍♀️

<Descriptions title="User Info">
  <Descriptions.Item label="UserName">Zhou Maomao</Descriptions.Item>
  <Descriptions.Item label="Telephone">1810000000</Descriptions.Item>
  <Descriptions.Item label="Live">Hangzhou, Zhejiang</Descriptions.Item>
  <Descriptions.Item label="Remark">empty</Descriptions.Item>
  <Descriptions.Item label="Address">
    No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China
  </Descriptions.Item>
</Descriptions>;

Examples

<code src="./demo/basic.tsx">Basic</code> <code src="./demo/border.tsx">border</code> <code src="./demo/text.tsx" debug>border</code> <code src="./demo/padding.tsx" debug>padding</code> <code src="./demo/size.tsx">Custom size</code> <code src="./demo/responsive.tsx">responsive</code> <code src="./demo/vertical.tsx">Vertical</code> <code src="./demo/vertical-border.tsx">Vertical border</code> <code src="./demo/style.tsx" debug>Customize label & wrapper style</code> <code src="./demo/style-class.tsx" version="6.0.0">Custom semantic dom styling</code> <code src="./demo/jsx.tsx" debug>JSX demo</code> <code src="./demo/component-token.tsx" debug>Component Token</code> <code src="./demo/block.tsx">row</code>

API

Common props ref：Common props

Property	Description	Type	Default	Version
bordered	Whether to display the border	boolean	false
classNames	Customize class for each semantic structure inside the component. Supports object or function.	Record<SemanticDOM, string> \| (info: { props })=> Record<SemanticDOM, string>	-
colon	Change default props `colon` value of Descriptions.Item. Indicates whether the colon after the label is displayed	boolean	true
column	The number of `DescriptionItems` in a row, could be an object (like `{ xs: 8, sm: 16, md: 24}`, but must have `bordered={true}`) or a number	number \| Record<Breakpoint, number>	3
~~contentStyle~~	Customize content style, Please use `styles.content` instead	CSSProperties	-	4.10.0
extra	The action area of the description list, placed at the top-right	ReactNode	-	4.5.0
items	Describe the contents of the list item	DescriptionsItem[]	-	5.8.0
~~labelStyle~~	Customize label style, Please use `styles.label` instead	CSSProperties	-	4.10.0
layout	Define description layout	`horizontal` \| `vertical`	`horizontal`
size	Set the size of the list. Can be set to `medium`,`small`, or not filled	`large` \| `medium` \| `small`	`large`
styles	Customize inline style for each semantic structure inside the component. Supports object or function.	Record<SemanticDOM, CSSProperties> \| (info: { props })=> Record<SemanticDOM, CSSProperties>	-
title	The title of the description list, placed at the top	ReactNode	-

DescriptionItem

Property	Description	Type	Default	Version
~~contentStyle~~	Customize content style, Please use `styles.content` instead	CSSProperties	-	4.9.0
label	The description of the content	ReactNode	-
~~labelStyle~~	Customize label style, Please use `styles.label` instead	CSSProperties	-	4.9.0
span	The number of columns included(`filled` Fill the remaining part of the current row)	number \| `filled` \| Screens	1	`screens: 5.9.0`, `filled: 5.22.0`

The number of span Description.Item. Span={2} takes up the width of two DescriptionItems. When both style and labelStyle(or contentStyle) configured, both of them will work. And next one will overwrite first when conflict.

Semantic DOM

Design Token