Descriptions

Display multiple read-only fields in a group.

When to use

Commonly displayed on the details page.

Simplest Usage.

Descriptions with border and background color.

Custom sizes to fit in a variety of containers.

Responsive configuration enables perfect presentation on small screen devices.

Simplest Usage.

Descriptions with border and background color.

You can customize the semantic dom style of Descriptions by passing objects/functions through classNames and styles.

Display of the entire line.

Descriptions and Descriptions.Item are exported from @ceebee/ui/client.

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`	`-`	—

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