index.md 1.58 KB
Newer Older
1
---
nikogu's avatar
nikogu committed
2 3
title:
  en-US: DescriptionList
nikogu's avatar
nikogu committed
4
  zh-CN: DescriptionList
5 6
subtitle: 描述列表
cols: 1
nikogu's avatar
nikogu committed
7
order: 4
8 9
---

10
成组展示多个只读字段,常见于详情页的信息展示。
11 12 13 14 15 16 17 18

## API

### DescriptionList

| 参数      | 说明                                      | 类型         | 默认值 |
|----------|------------------------------------------|-------------|-------|
| layout    | 布局方式                                 | Enum{'horizontal', 'vertical'}  | 'horizontal' |
ddcat1115's avatar
ddcat1115 committed
19
| col       | 指定信息最多分几列展示,最终一行几列由 col 配置结合[响应式规则](/components/DescriptionList#响应式规则)决定          | number(0 < col <= 4)  | 3 |
20 21
| title     | 列表标题                                 | ReactNode  | - |
| gutter    | 列表项间距,单位为 `px`                    | number  | 32 |
22
| size     | 列表型号,可以设置为 `large` `small`        | Enum{'large', 'small'}  | - |
23

ddcat1115's avatar
ddcat1115 committed
24 25 26 27 28 29 30 31
#### 响应式规则

| 窗口宽度             | 展示列数                                      | 
|---------------------|---------------------------------------------|
| `≥768px`           |  `col`                                       |
| `≥576px`           |  `col < 2 ? col : 2`                         |
| `<576px`           |  `1`                                         |

32 33 34 35 36 37 38 39
### DescriptionList.Description

| 参数      | 说明                                      | 类型         | 默认值 |
|----------|------------------------------------------|-------------|-------|
| term     | 列表项标题                                 | ReactNode  | - |