Yao 66d6f4fc03
[improvement] 增加部分组件自定义样式类,方便自定义样式 (#352)
* 增加自定义样式类,并开放部分,在文档上体现

* 增加 cell 外部样式类说明

* 增加自定义样式类
2018-07-10 16:25:47 +08:00

58 lines
1.4 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

## Switch 开关
### 使用指南
在 index.json 中引入组件
```json
{
"usingComponents": {
"zan-switch": "path/to/zanui-weapp/dist/switch/index"
}
}
```
### 代码演示
可以在页面任意位置上使用 zan-switch 标签。
```html
<zan-switch
disabled="{{ disabled }}"
checked="{{ checked }}"
loading="{{ loading }}"
bind:change="handleFieldChange"
></zan-switch>
```
```js
Page({
data: {
disabled: false,
checked: false,
loading: false
},
methods: {
handleFieldChange(event, data) {
console.log(event, data);
}
}
});
```
### API
| 参数 | 说明 | 类型 | 默认值 | 必须 |
|-----------|-----------|-----------|-------------|-------------|
| loading | switch 是否是 loading 状态 | Boolean | false | |
| disabled | 是否不可用 | Boolean | false | |
| checked | 是否打开状态 | Boolean | false | 必须 |
### Event
| 事件名称 | 说明 | 回调参数 |
|-----------|-----------|-----------|
| change | 当绑定值变化时触发的事件 | event对象和数据对象包含loading和checked |
### 外部样式类
| 类名 | 说明 |
|-----------|-----------|
| custom-class | 根节点自定义样式类,通过这个可以改变根节点上的样式 |
| theme-class | 根节点自定义样式类,用于更改根节点上的主题样式 |