描述列表 Descriptions

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

安装

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	`-`	-
labelStyle	显示标签的单元格的样式	CSSProperties	`-`	-
style	节点样式	CSSProperties	`-`	-
valueStyle	显示值的单元格的样式	CSSProperties	`-`	-

DataType

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