# UInfoList 详情列表
- [示例](#示例)
- [基本用法](#基本用法)
- [栅格分列](#栅格分列)
- [额外插槽](#额外插槽)
- [与表格结合](#与表格结合)
- [隐藏标题行](#隐藏标题行)
- [UInfoList API](#uinfolist-api)
- [Props/Attrs](#propsattrs)
- [Slots](#slots)
- [UInfoListItem API](#uinfolistitem-api)
- [Props/Attrs](#propsattrs-2)
- [Slots](#slots-2)
- [UInfoListGroup API](#uinfolistgroup-api)
- [Props/Attrs](#propsattrs-3)
- [Slots](#slots-3)
**Display**
详情列表
## 示例
### 基本用法
``` html
defaultVPC
152f36a3cfff4572a3a35
10.3.0.4/16
是
2018-02-22
defaultVPC
152f36a3cfff4572a3a35
10.3.0.4/16
是
2018-02-22
```
### 栅格分列
类似``组件，在``或``组件上使用`repeat`属性来定义栅格列数，用`span`属性来设置列跨越的栅格数。`repeat`默认为`3`列。
下面是两个示例：
``` html
defaultVPC
152f36a3cfff4572a3a35
10.3.0.4/16
是
2018-02-22
defaultVPC
152f36a3cfff4572a3a35
10.3.0.4/16
2018-02-22
defaultVPC
152f36a3cfff4572a3a35
10.3.0.4/16
是
2018-02-22
云服务器是网易云提供的一种弹性可伸缩的云计算基础服务，快速满足公司产品上线、开发测试等对IT基础设施的需求，帮助用户降低IT成本，简化运维工作。
```
``` html
defaultVPC
152f36a3cfff4572a3a35
10.3.0.4/16
是
2018-02-22
defaultVPC
152f36a3cfff4572a3a35
云服务器是网易云提供的一种弹性可伸缩的云计算基础服务，快速满足公司产品上线、开发测试等对IT基础设施的需求，帮助用户降低IT成本，简化运维工作。
```
### 额外插槽
对于一些操作项，可以使用`extra`插槽添加在详情列表组的右上角。
``` html
设置
defaultVPC
152f36a3cfff4572a3a35
10.3.0.4/16
是
2018-02-22
```
### 与表格结合
对于详情列表内部添加的表格，一般设置`color="light"`与`u-info-list`风格更配。
``` html
```
### 隐藏标题行
在弹窗或面板中，可能想要隐藏掉标题行。这时不使用``组件即可。
下面是两个示例：
``` html
defaultVPC
152f36a3cfff4572a3a35
10.3.0.4/16
是
2018-02-22
云服务器是网易云提供的一种弹性可伸缩的云计算基础服务，快速满足公司产品上线、开发测试等对IT基础设施的需求，帮助用户降低IT成本，简化运维工作。
```
``` html
defaultVPC
152f36a3cfff4572a3a35
10.3.0.4/16
是
2018-02-22
```
## UInfoList API
### Props/Attrs
| Prop/Attr | Type | Options | Default | Description |
| --------- | ---- | ------- | ------- | ----------- |
| repeat | number | | `3` | 整个详情列表的划分列数 |
| show-head | boolean | | `true` | 是否显示表格头部 |
| label-size | string | `[object Object]`
`[object Object]`
`[object Object]`
`[object Object]` | `'auto'` | 设置详情列表所有列表项的标题宽度。 |
### Slots
#### (default)
插入``或``子组件。
## UInfoListItem API
### Props/Attrs
| Prop/Attr | Type | Options | Default | Description |
| --------- | ---- | ------- | ------- | ----------- |
| label | string | | | |
| span | number | | | 列跨越的格数 |
| ellipsis | boolean | | `false` | 文字过长是否省略显示。默认文字超出时会换行。 |
| label-size | string | `[object Object]`
`[object Object]`
`[object Object]`
`[object Object]` | `'auto'` | |
### Slots
#### (default)
插入文本或HTML。
#### label
用于自定义 label 内容。
## UInfoListGroup API
### Props/Attrs
| Prop/Attr | Type | Options | Default | Description |
| --------- | ---- | ------- | ------- | ----------- |
| title | string | | | |
| repeat | number | | | 当前组范围内的划分列数 |
| label-size | string | `[object Object]`
`[object Object]`
`[object Object]`
`[object Object]` | `'auto'` | 设置详情列表组所有列表项的标题宽度。 |
### Slots
#### (default)
插入``子组件
#### title
自定义标题。
#### extra
自定义额外操作项。