# Progress 进度条

## 引入

首先在页面 `index.json`中引入组件：

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

然后在对应的`wxml`页面中既可使用：

```html
  <tea-progress value="{{0}}"></tea-progress>
```

## 示例

### 基础用法

```html
  <tea-progress value="{{0}}"></tea-progress>
```

### 禁用状态

```html
  <tea-progress value="{{60.5}}" variant="disabled"></tea-progress>
```

### 成功状态

```html
  <tea-progress value="{{100}}" variant="success"></tea-progress>
```

### 不展示具体数值

```html
  <tea-progress value="{{80}}" show-value="{{false}}"></tea-progress>
```

```js
// index.js
Page({
  data: {
    progressList: [{
			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'
		}]
  }
})
```

```css
.component-wrap {
  width: 100%;
  padding-left: 20px;
  padding-right: 20px;
  margin-top: 10px;
  margin-bottom: 10px;
  box-sizing: border-box;
}
```

### 圆环
```html
<tea-progress value="{{20}}" shape="circle"></tea-progress>
<tea-progress value="{{50}}" shape="circle" variant="disabled"></tea-progress>
<tea-progress value="{{80}}" shape="circle" variant="success"></tea-progress>
```

### 圆环(成功)
```html
<tea-progress value="{{80}}" shape="circle" variant="success"></tea-progress>
```

## Props

| 参数        | 描述      | 类型        | 默认值       | 可选值                                  |
| --------- | ------- | --------- | --------- | ------------------------------------ |
| showValue | 是否展示值   | `Boolean` | `true`    | -                                    |
| value     | 当前值，百分比 | `Number`  | `0`       | -                                    |
| variant   | 状态      | `String`  | `default` | `['default', 'success', 'disabled']` |
| unit      | 设置单位    | `String`  | `%`       | -                                    |
| shape     | 进度条形状   | `String`  | `line`    | `['line', 'circle']`                 |

## CSS变量属性表

| 变量名                                    | 默认值                                                                                                           | 描述        |
| -------------------------------------- | ------------------------------------------------------------------------------------------------------------- | --------- |
| progress-gap                           | 16px                                                                                                          | 进度条与值的间隙  |
| progress-background-color              | @color-gray-1                                                                                                 | 进度条默认背景颜色 |
| progress-bar-background-color          | @background-primary-color                                                                                     | -         |
| progress-bar-success-background-color  | @background-success-color                                                                                     | -         |
| progress-bar-disabled-background-color | @color-gray-3                                                                                                 | -         |
| progress-status-key                    | default success disabled                                                                                      | -         |
| progress-status-value                  | @progress-bar-background-color @progress-bar-success-background-color @progress-bar-disabled-background-color | -         |