# Descriptions

- Page: https://jiguang132.com/resources/arco-design/docs/descriptions
- Resource: Arco Design (https://jiguang132.com/resources/arco-design.md)
- All guides: https://jiguang132.com/resources/arco-design/docs.md

Generally used to display information on the detail page.

## Install

```bash
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](#datatype) |`-`|-|
|labelStyle|Style of label|CSSProperties |`-`|-|
|style|Additional style|CSSProperties |`-`|-|
|valueStyle|Style of value|CSSProperties |`-`|-|

### DataType

```js
export type DataType = {
  key?: React.Key;
  label?: ReactNode;
  value?: ReactNode;
  span?: number;
}[];
```

---

Index of all JGuang resources: https://jiguang132.com/llms.txt