---
title: Descriptions - 描述列表
order: 6
path: /descriptions
nav:
  order: 1
  title: 桌面组件
  path: /design
group:
  order: 2
  path: /dataShow
  title: 数据展示
---

用于反馈一系列操作任务的处理结果，当有重要操作需告知用户处理结果，且反馈内容较为复杂时使用。

## 基本用法

简单地成组展示多个只读字段，一般用于详情页的信息

<code src='./demos/basic.tsx'  height='400px'>

## 标签文本不同对齐方式

根据具体目标和制约因素，选择最佳的标签对齐方式

<code src='./demos/alignment.tsx'  height='400px'>

## 带间距展示

一般情况的表单填写后的详情页面，用间距区分标签文本和内容文本

<code src='./demos/spacing.tsx'  height='400px'>

## 带边框样式

带边框和背景颜色的列表，用于需要信息内容有明显区分的页面

<code src='./demos/border.tsx'  height='400px'>

## 布局模式

有水平排列、垂直排列、行内垂直排列三种布局模式。

<code src='./demos/layout.tsx'  height='400px'>

## API

### Descriptions

| 参数          | 说明                                                                                            | 类型                                   | 默认值       |
| ------------- | ----------------------------------------------------------------------------------------------- | -------------------------------------- | ------------ |
| bordered      | 是否展示边框                                                                                    | boolean                                | false        |
| colon         | 配置 `Descriptions.Item` 的 `colon` 的默认值                                                    | boolean                                | true         |
| column        | 一行的 `DescriptionItems` 数量，可以写成像素值或支持响应式的对象写法 `{ xs: 8, sm: 16, md: 24}` | number                                 | 3            |
| contentStyle  | 自定义内容样式                                                                                  | CSSProperties                          | -            |
| extra         | 描述列表的操作区域，显示在右上方                                                                | ReactNode                              | -            |
| labelStyle    | 自定义标签样式                                                                                  | CSSProperties                          | -            |
| layout        | 描述布局                                                                                        | `horizontal` \| `inline` \| `vertical` | `horizontal` |
| size          | 设置列表的大小。可以设置为 `middle` 、`small`, 或不填（只有设置 `bordered={true}` 生效）        | `default` \| `middle` \| `small`       | -            |
| title         | 描述列表的标题，显示在最顶部                                                                    | ReactNode                              | -            |
| labelWidth    | label 标签的宽度                                                                                | number                                 | -            |
| labelPosition | 标签的位置，如果值为 left 或者 right 时，则需要设置 label-width                                 | `right\|left`                          | `left`       |

### DescriptionItem

| 参数         | 说明           | 类型          | 默认值 |
| ------------ | -------------- | ------------- | ------ |
| contentStyle | 自定义内容样式 | CSSProperties | -      |
| label        | 内容的描述     | ReactNode     | -      |
| labelStyle   | 自定义标签样式 | CSSProperties | -      |
| span         | 包含列的数量   | number        | 1      |

> span 是 Description.Item 的数量。 span={2} 会占用两个 DescriptionItem 的宽度。当同时配置 `style` 和 `labelStyle`（或 `contentStyle`）时，两者会同时作用。样式冲突时，后者会覆盖前者。