---
title: Descriptions 描述列表
order: 27
group:
  path: /components
nav:
  title: 组件
  path: /components
---

### 使用原则

- 常见于详情页的信息展示。

### 基本使用

```jsx
import React from 'react';
import { Descriptions } from 'quanta-design';

export default () => (
  <Descriptions title="User Info">
    <Descriptions.Item label="UserName">Zhou Maomao</Descriptions.Item>
    <Descriptions.Item label="Telephone">1810000000</Descriptions.Item>
    <Descriptions.Item label="Live">Hangzhou, Zhejiang</Descriptions.Item>
    <Descriptions.Item label="Remark">empty</Descriptions.Item>
    <Descriptions.Item label="Address">
      No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China,No. 18,
      Wantang Road, Xihu District, Hangzhou, Zhejiang, China,No. 18, Wantang
      Road, Xihu District, Hangzhou, Zhejiang, China,No. 18, Wantang Road, Xihu
      District, Hangzhou, Zhejiang, China,No. 18, Wantang Road, Xihu District,
      Hangzhou, Zhejiang, China
    </Descriptions.Item>
  </Descriptions>
);
```

一行显示两项信息，如果内容的值较长会自动占据两列的宽度

```jsx
import React from 'react';
import { Descriptions } from 'quanta-design';

const props = {
  column: 2,
};

export default () => (
  <Descriptions {...props} title="User Info">
    <Descriptions.Item label="UserName">Zhou Maomao</Descriptions.Item>
    <Descriptions.Item label="Telephone">1810000000</Descriptions.Item>
    <Descriptions.Item label="Live">Hangzhou, Zhejiang</Descriptions.Item>
    <Descriptions.Item label="Remark">empty</Descriptions.Item>
    <Descriptions.Item label="Address">
      No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China,No. 18,
      Wantang Road, Xihu District, Hangzhou, Zhejiang, China,No. 18, Wantang
      Road, Xihu District, Hangzhou, Zhejiang, China,No. 18, Wantang Road, Xihu
      District, Hangzhou, Zhejiang, China,No. 18, Wantang Road, Xihu District,
      Hangzhou, Zhejiang, China
    </Descriptions.Item>
  </Descriptions>
);
```

## API

### Descriptions

| 属性   | 说明                         | 类型      | 默认值 | 版本 |
| ------ | ---------------------------- | --------- | ------ | ---- |
| column | 设置一行展示几列信息         | Number    | 1      |
| title  | 描述列表的标题，显示在最顶部 | ReactNode | -      |
| colon  | label 是否包含冒号           | Boolean   | true   |

### Descriptions.Item

| 属性  | 说明                         | 类型      | 默认值 | 版本 |
| ----- | ---------------------------- | --------- | ------ | ---- |
| label | 内容的描述                   | ReactNode | -      |
| span  | 设置当前信息占据一行中的几列 | Number    | 1      |