@wines/selectable

Selectable 选框组

选框组。

使用指南

$3

``json
{
"navigationBarTitleText": "wux-selectable",
"usingComponents": {
"wux-selectable": "@wines/selectable"
}
}
`

$3

`xml


Selectable
选框组


Checkbox & Radio









type="radio"
color="light"
value="1"
defaultChecked
/>
type="radio"
color="stable"
value="2"
defaultChecked
/>
type="radio"
color="positive"
value="3"
defaultChecked
/>
type="radio"
color="calm"
value="4"
defaultChecked
/>
type="radio"
color="balanced"
value="5"
defaultChecked
/>
type="radio"
color="energized"
value="6"
defaultChecked
/>
type="radio"
color="assertive"
value="7"
disabled
defaultChecked
/>
type="radio"
color="royal"
value="8"
disabled
defaultChecked
/>
type="radio"
color="dark"
value="9"
disabled
defaultChecked
/>
Controlled
color="light"
value="1"
checked="{{ checked }}"
bind:change="onCheckboxChange"
/>
Slot




With cellGroup







With cellGroup



slot="footer"
wux-class="checkbox"
type="radio"
value="{{ item.value }}"
checked="{{ value === item.value }}"
controlled
bind:change="onChange"
/>



Other
Agree agreement



`

`ts
import { SelectableOnChangeValue } from '@wines/selectable';
import './index.less';

Page({
data: {
items: [
{
value: '1',
label: 'Wux',
},
{
value: '2',
label: 'Weapp',
},
],
value: '1',
checked: false,
},
onCheckboxChange(e) {
console.log(e);
this.setData({
checked: e.detail.checked,
});
},
onChange(e) {
const detail = e.detail as SelectableOnChangeValue;
console.log(detail);
this.setData({
value: detail.value,
});
},
});
`

API

$3

| 参数 | 类型 | 描述 | 默认值 |
| -------------- | --------------- | ------------------------------------------------------------------------------------------- | -------------- |
| prefixCls | string | 自定义类名前缀 | wux-selectable |
| type | string | 类型，可选值为 checkbox、radio、default | checkbox |
| value | string | 字段值 | - |
| defaultChecked | boolean | 默认是否选中，当 controlled 为 false 时才生效 | false |
| checked | boolean | 当前是否选中，当 controlled 为 true 时才生效 | false |
| controlled | boolean | 是否受控 说明文档 | false |
| disabled | boolean | 是否禁用 | false |
| color | string | 主题色，可选值为 light、stable、positive、calm、assertive、balanced、energized、royal、dark | balanced |
| wrapStyle | string,object | 自定义样式 | - |
| bind:change | function | change 事件触发的回调函数 | - |

$3

| 名称 | 描述 |
| -------- | --------------------------------- |
| - | 自定义内容 (type=default`时生效) |
| icon-on | 自定义已选中的内容 |
| icon-off | 自定义未选中的内容 |

$3

| 名称 | 描述 |
| --------------- | ------------ |
| wux-class | 根节点样式类 |
| wux-input-class | 选择框样式类 |