# 描述列表 Descriptions

- 页面: https://jiguang132.com/zh/resources/arco-design/docs/descriptions
- 资源: Arco Design (https://jiguang132.com/zh/resources/arco-design.md)
- 全部指南: https://jiguang132.com/zh/resources/arco-design/docs.md

一般用于详情页的信息展示。

## 安装

```bash
npm install @arco-design/web-react@2.66.18
```

在入口引入 `@arco-design/web-react/dist/css/arco.css`，用 `ConfigProvider` 设置语言。React 19 项目还需在入口最先引入 `@arco-design/web-react/es/_util/react-19-adapter`，否则 Message、Modal 等命令式 API 无法渲染。

## 示例

- **基本用法**：简单地成组展示多个只读字段，一般用于详情页的信息。
- **单列样式**：单列的描述列表样式。
- **标签文本对齐**：标签文本可以设置左对齐右对齐，也可以设置垂直的排列方式。
- **带边框展示**：带边框和背景颜色的列表。
- **不同排列模式**：有水平排列、垂直排列、行内水平排列、行内垂直排列四种排列模式。
- **不同尺寸**：展示不同尺寸下的描述列表。
- **响应式排列**：支持响应式排列。

示例来自 Arco Design 官方仓库（MIT），固定在 npm 2.66.18 对应的提交；部分示例使用在线图片或上传地址，预览中网络请求被禁用。

## API

### Descriptions

|参数名|描述|类型|默认值|版本|
|---|---|---|---|---|
|border|是否显示边框|boolean |`-`|-|
|layout|排列方式|'horizontal' \| 'vertical' \| 'inline-horizontal' \| 'inline-vertical' |`horizontal`|-|
|size|描述列表的尺寸，如不指定默认为 `default`|'mini' \| 'small' \| 'medium' \| 'default' \| 'large' |`-`|-|
|tableLayout|描述中表格样式的 `layout-fixed`，当设置成 `fixed` 时，宽度会均分。|'auto' \| 'fixed' |`auto`|2.6.0|
|colon|标签文字后显示的内容，一般配置为 ` :`|ReactNode |`-`|-|
|title|标题|ReactNode |`-`|-|
|className|节点类名|string \| string[] |`-`|-|
|column|一行放置几列数据，一个数据为一列。支持配置 `column` 为数字或者对象，配置对象格式时，支持配置为 `{ xs: 1, md: 2, lg: 3 }` 这种形式来支持响应式排列|\| number\| {xs?: number;sm?: number;md?: number;lg?: number;xl?: number;xxl?: number;xxxl?: number;} |`3`|-|
|data|描述列表的数据|[DataType](#datatype) |`-`|-|
|labelStyle|显示标签的单元格的样式|CSSProperties |`-`|-|
|style|节点样式|CSSProperties |`-`|-|
|valueStyle|显示值的单元格的样式|CSSProperties |`-`|-|

### DataType

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

---

JGuang 全部资源索引: https://jiguang132.com/llms.txt