Descriptions
Generally used to display information on the detail page.
Install
npm install @arco-design/web-react@2.66.18
Import @arco-design/web-react/dist/css/arco.css at the entry and set the locale with ConfigProvider. React 19 projects must also import @arco-design/web-react/es/_util/react-19-adapter first, or imperative APIs such as Message and Modal cannot render.
Examples
- Basic: Simply display multiple read-only fields in groups. Generally used for information on the details page.
- Single column style: Single column descriptions style.
- Label text alignment: The label text can either be left-aligned, right-aligned, or vertical-aligned.
- Border: With border and background color.
- Different layout: There are four arrangement modes: horizontal, vertical, inline horizontal, and inline vertical.
- Size: Descriptions in different sizes.
- Responsive: Support responsive layout.
Examples come from the official Arco Design repository (MIT) at the commit published as npm 2.66.18. Some use online images or upload endpoints; network requests are disabled in previews.
API
Descriptions
| Property | Description | Type | DefaultValue | Version |
|---|---|---|---|---|
| border | Whether to display the border | boolean | - | - |
| layout | Layout arrangement | 'horizontal' | 'vertical' | 'inline-horizontal' | 'inline-vertical' | horizontal | - |
| size | Size of the list | 'mini' | 'small' | 'medium' | 'default' | 'large' | - | - |
| tableLayout | The layout-fixed of the table style in the description. The width will be evenly distributed when it's set to fixed. | 'auto' | 'fixed' | auto | 2.6.0 |
| colon | The content displayed after the label text, generally configured as : | ReactNode | - | - |
| title | Title of the description | ReactNode | - | - |
| className | Additional css class | string | string[] | - | - |
| column | Number of data columns in a row, with one data counted as one column. Can be set with a number or object.Use object format such as { xs: 1, md: 2, lg: 3 } for responsive arrangement | | number| {xs?: number;sm?: number;md?: number;lg?: number;xl?: number;xxl?: number;xxxl?: number;} | 3 | - |
| data | Data of the description | DataType | - | - |
| labelStyle | Style of label | CSSProperties | - | - |
| style | Additional style | CSSProperties | - | - |
| valueStyle | Style of value | CSSProperties | - | - |
DataType
export type DataType = {
key?: React.Key;
label?: ReactNode;
value?: ReactNode;
span?: number;
}[];