Description - Semi Design

Demos

How to import


import { Descriptions } from '@douyinfe/semi-ui';

Basic Usage

Data can be passed in as an array of key-value pairs { key: value } through props.data Both key and value support the ReactNode type. You can pass in a string or a higher degree of freedom ReactNode to freely customize the render dom.

Alignment

You can use align to set alignment of key-value. Supporting values including: center(default), justify, left, and plain. When row is true, this configuration is invalid

Row Display

Set row to display the data to two-row, supporting three sizes: small, medium(default), and large.

Descriptions Using JSX

Set layout mode

The layout mode can be set through layout, which supports horizontal and vertical (support after v2.54.0) . Default is vertical.
When horizontal is set, column can be used to specify the maximum number of columns per row.

Custom Key Style

You can customize the style of key through keyStyle property, such as setting a fixed width to achieve alignment. This property supports all CSS styles, such as width, maxWidth, textAlign, color, etc.

You can also use it with JSX syntax:

API Reference

Descriptions

Properties	Instructions	type	Default
align	Alignment of the key-value data, one of `center`, `left`, `plain`	string	`center`
className	Classname	string	-
data	Data to display	DataItem[]	-
row	Toggle whether to display data in double-row	boolean	`false`
size	Size of the list for double-row display, one of `small`, `medium`, `large`	string	`medium`
style	Inline style	CSSProperties	-
layout	List layout mode v>=2.54.0	string	`vertical`
column	Total number of columns in landscape layout v>=2.54.0	number	3

DataItem

Properties	Instructions	type	Default
key	Key value	ReactNode	-
value	Data value	ReactNode \| (() => ReactNode)	-
hidden	Toggle whether the data should be displayed	boolean	-
span	The number of columns the cell should span v>=2.54.0	number	1
keyStyle	Custom style for key, can be used to set width, alignment, etc.	CSSProperties	-

Descriptions.Item

Properties	Instructions	type	Default
itemKey	Key value	ReactNode	-
hidden	Toggle whether the data should be displayed	boolean	-
className	Item external wrapper: class name of tr DOM element	string	-
style	Item external wrapper: inline style of tr DOM element	CSSProperties	-
span	The number of columns the cell should span v>=2.54.0	number	1
keyStyle	Custom style for key, can be used to set width, alignment, etc.	CSSProperties	-

Content Guidelines

Field names and values are written in upper and lower case according to the Sentence case principle