# Level 水平线

实现item水平方向两端对齐，垂直方向居中对齐效果。可包裹任何元素或组件。

## 组件引入

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

```json
{
  "usingComponents": {
    "tea-level": "../dist/level/index"
  }
}
```

## 用法

组件提供三个slot，item根据放置位置，实现不同效果。

### 1. 单个item，默认会相对于容器水平垂直居中

```html
<tea-level ext-class="demo1">
  <view class="bor imageWrap">
    <image mode="widthFix" src="https://imgcache.qq.com/open_proj/proj_qcloud_v2/tc-x/tea-ui/assets/tea-ui.svg"></image>
  </view>
</tea-level>
```

### 2. 两个item放置在对应的slot内，左右两端对齐

```html
<tea-level>
  <view slot="start">
    <view class="title bor">新品上市</view>
    <view class="meta bor">发现最新最酷的科技产品</view>
  </view>
  <view slot="end">
    <view class="details bor">查看更多 ></view>
  </view>
</tea-level>
```

### 3. 左侧item宽度由内容撑开或宽度固定，右侧item占据剩余空间

[提示]：右侧item内容默认居右对齐，如若居左对齐，请自行设置 `view` 的样式，设置方法可参考示例。

```html
<tea-level start-width="100px" end-flex="1">
  <view slot="start">
    <view class="title bor">你的身份证号码</view>
  </view>
  <view slot="end" style="display:flex; width:100%; justify-content:flex-start;">
    <view class="details bor">123456789012345678</view>
  </view>
</tea-level>
```

### 4. 右侧item宽度由内容撑开或宽度固定，左侧item占据剩余空间

```html
<tea-level end-width="90px" start-flex="1">
  <view slot="start">
    <view class="title bor">Lofree圆点蓝牙机械键盘  ￥399</view>
  </view>
  <view slot="end">
    <view class="details bor">剩余200件</view>
  </view>
</tea-level>
```

## Props

| 参数         | 描述                       | 类型       | 默认值    | 可选值             |
| ---------- | ------------------------ | -------- | ------ | --------------- |
| startFlex  | 设置 start slot 的 flex 属性值 | `String` | `none` | `["none", "1"]` |
| startWidth | 设置 start slot 的宽度        | `String` | `auto` | -               |
| endFlex    | 设置 end slot 的 flex 属性值   | `String` | `none` | `["none", "1"]` |
| endWidth   | 设置 end slot 的宽度          | `String` | `auto` | -               |

## Slots

| 名称      | 描述           |
| ------- | ------------ |
|         | 未具名slot，居中展示 |
| `start` | 左侧slot       |
| `end`   | 右侧slot       |

## 外部样式类

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