0.0.24 • Published 3 years ago
@retailwe/ui-steps v0.0.24
steps 进度
引入
全局引入,在miniprogram根目录下的app.json
中配置,局部引入,在需要引入的页面或组件的index.json
中配置。
// app.json 或 index.json
"usingComponents": {
"wr-steps": "@retailwe/ui-steps/index"
}
代码演示
基础用法
<wr-steps
steps="{{ steps }}"
active="{{ active }}"
/>
Page({
data: {
steps: [
{
title: '步骤一',
desc: '描述信息'
icon: 'success',
},
{
title: '步骤二',
desc: '描述信息'
},
{
title: '步骤三',
desc: '描述信息'
},
{
title: '步骤四',
desc: '描述信息'
}
]
}
});
自定义样式
可以通过 active-icon
和 active-color
属性设置激活状态下的图标和颜色
<wr-steps
steps="{{ steps }}"
active="{{ active }}"
active-icon="success"
active-color="#38f"
/>
竖向步骤条
可以通过设置direction
属性来改变步骤条的显示方式
<wr-steps
steps="{{ steps }}"
active="{{ active }}"
direction="vertical"
active-color="#ee0a24"
/>
API
Steps Props
参数 | 说明 | 类型 | 默认值 | 版本 |
---|---|---|---|---|
active | 当前步骤 | number | 0 | - |
direction | 显示方向,可选值为 horizontal vertical | string | horizontal | - |
active-color | 激活状态颜色 | string | #07c160 | - |
inactive-color | 未激活状态颜色 | string | #969799 | - |
active-icon | 激活状态底部图标名称 | string | checked | - |
inactive-icon | 未激活状态底部图标名称 | string | - | - |
外部样式类
类名 | 说明 |
---|---|
wr-class | 根节点样式类 |
wr-desc | 描述信息样式类 |
0.0.24
3 years ago
0.0.23
3 years ago
0.0.22
4 years ago
0.0.21
4 years ago
0.0.20
4 years ago
0.0.19
4 years ago
0.0.18
4 years ago
0.0.17
4 years ago
0.0.16
4 years ago
0.0.15
4 years ago
0.0.14
4 years ago
0.0.13
4 years ago
0.0.12
4 years ago
0.0.11
4 years ago
0.0.10
4 years ago
0.0.9
4 years ago
0.0.8
4 years ago
0.0.7-beta.1
4 years ago