# Stepper 步骤条

[toc]

`Stepper` 步骤条组件可以提供横向，纵向以及无序号步骤三种表现形式

## 组件引入

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

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

## 用法

横向步骤条

```html
<tea-stepper list="{{stepperList}}" current="{{current}}"></tea-stepper>
```

纵向步骤条

```html
<tea-stepper list="{{stepperList}}" current="b2" vertical></tea-stepper>
```

纵向且不显示序号

```html
<tea-stepper list="{{stepperList}}" vertical current="c" has-count="{{false}}"></tea-stepper>
```

```js
Page({
	data: {
		current: 'b',
		stepperList: [{
			title: '基本信息',
			key: 'a',
			children: [{
				title: "步骤一下的步骤一",
				key: 'a1'
			}, {
				title: "步骤一下的步骤一",
				key: 'a2'
			}]
		}, {
			title: '付款信息',
			key: 'b',
			children: [{
				title: "步骤二下的步骤二",
				key: 'b1'
			}, {
				title: "步骤二下的步骤二",
				key: 'b2'
			}]
		}, {
			title: '线下汇款',
			key: 'c'
		}, {
			title: '结果反馈',
			key: 'd'
		}]
  },
})
```

## Props

| 参数       | 描述                | 类型        | 默认值     |
| -------- | ----------------- | --------- | ------- |
| list     | 步骤条列表             | `Array`   | `[]`    |
| current  | 当前步骤，list里面的key属性 | `String`  | -       |
| danger   | 出错步骤，list里面的key属性 | `String`  | -       |
| vertical | 步骤条显示方向           | `Boolean` | `false` |
| hasCount | 是否显示序号            | `Boolean` | `true`  |

### Props list

| 参数       | 描述                           | 类型       | 默认值  |
| -------- | ---------------------------- | -------- | ---- |
| title    | 标题内容                         | `String` | -    |
| key      | 此步骤条唯一标示，用于slot与current项（必填） | `String` | -    |
| children | 子步骤                          | `Array`  | `[]` |

#### Props children

| 参数    | 描述                           | 类型       | 默认值 |
| ----- | ---------------------------- | -------- | --- |
| title | 标题内容                         | `String` | -   |
| key   | 此步骤条唯一标示，用于slot与current项（必填） | `String` | -   |

## 事件

| 事件名     | 描述                          | 回调参数           |
| ------- | --------------------------- | -------------- |
| itemtap | 子项被点击以后的回调事件，返回`lists item` | `{data: item}` |

## Slots

| 名称         | 描述                           |
| ---------- | ---------------------------- |
| `item key` | 与 `lists item` 下的 `key` 属性同名 |

## 外部样式类

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

## CSS变量属性表

| 变量名                                | 默认值                       | 描述  |
| ---------------------------------- | ------------------------- | --- |
| stepper-completed                  | @color-success-5          | -   |
| stepper-arrow-color                | @color-gray-3             | -   |
| stepper-arrow-and-counter-gap      | 10px                      | -   |
| stepper-counter-size               | 20px                      | -   |
| stepper-children-counter-size      | 9px                       | -   |
| stepper-font-size                  | 14px                      | -   |
| stepper-counter-default-bg-color   | @background-primary-color | -   |
| stepper-counter-completed-bg-color | @stepper-completed        | -   |
| stepper-counter-danger-bg-color    | @color-danger-5           | -   |
| stepper-counter-disabled-bg-color  | @color-black-3            | -   |
| stepper-default-text-color         | @color-black-0            | -   |
| stepper-completed-text-color       | @stepper-completed        | -   |
| stepper-disabled-text-color        | @color-black-3            | -   |
| stepper-danger-text-color          | @color-danger-5           | -   |
| stepper-desc-text-color            | @color-black-2            | -   |