# List 列表

[toc]

属于基础布局组件，基于 `List` 和 `Item` 来定义信息区块框架，帮助用户快速搭建列表布局。

## 组件引入

在`app.json`或在`index.json`中引入：

```json

{
  "usingComponents": {
    "tea-list": "../dist/list/index"
  }
}

```

## 用法

### 基础用法

设置 `title` 属性后即可展示列表分组标题。

```html
<tea-list title="列表分组标题文字">
  <tea-item title="标题文字"></tea-item>
  <tea-item title="标题文字" value="内容文字"></tea-item>
</tea-list>
```

### 列表外边框显示方式

设置 `bordered` 属性控制是否显示外边框后，可通过 `borderPosition` 属性指定外边框显示方式，可设置 `horizontal`、`top`、`bottom`。默认值为 `horizontal`。

```html
<!-- 列表外边框显示方式(无边框) -->
<tea-list>
  <tea-item title="标题文字"></tea-item>
  <tea-item title="标题文字" value="内容文字"></tea-item>
</tea-list>

<!-- 列表外边框显示方式(上下) -->
<tea-list bordered>
  <tea-item title="标题文字"></tea-item>
  <tea-item title="标题文字" value="内容文字"></tea-item>
</tea-list>

<!-- 列表外边框显示方式(上) -->
<tea-list bordered borderPosition="top">
  <tea-item title="标题文字"></tea-item>
  <tea-item title="标题文字" value="内容文字"></tea-item>
</tea-list>

<!-- 列表外边框显示方式(下) -->
<tea-list bordered borderPosition="bottom">
  <tea-item title="标题文字"></tea-item>
  <tea-item title="标题文字" value="内容文字"></tea-item>
</tea-list>
```

## Props

| 参数             | 描述                          | 类型        | 默认值          | 可选值                               |
| -------------- | --------------------------- | --------- | ------------ | --------------------------------- |
| title          | 分组标题                        | `String`  | -            | -                                 |
| bordered       | 是否显示外边框                     | `Boolean` | `false`      | -                                 |
| borderPosition | 外边框显示位置，需与 bordered 一同使用才生效 | `String`  | `horizontal` | `["horizontal", "top", "bottom"]` |

## Slots

| 名称  | 描述      |
| --- | ------- |
| -   | 自定义显示内容 |

## 外部样式类

| 类名          | 描述       |
| ----------- | -------- |
| `ext-class` | 组件根节点样式类 |

## CSS变量属性表

| 变量名                   | 默认值                     | 描述  |
| --------------------- | ----------------------- | --- |
| list-title-text-size  | @font-size-h5           | -   |
| list-title-text-color | @text-light-color       | -   |
| list-title-padding    | @padding-xs @padding-md | -   |