@wines/selectable

Selectable 选框组

选框组。

使用指南

在 page.json 中引入组件

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

示例

<view class="page">
    <view class="page__hd">
        <view class="page__title">Selectable</view>
        <view class="page__desc">选框组</view>
    </view>
    <view class="page__bd">
        <view class="sub-title">Checkbox & Radio</view>
        <wux-selectable color="light" value="1" defaultChecked />
        <wux-selectable color="stable" value="2" defaultChecked />
        <wux-selectable color="positive" value="3" defaultChecked />
        <wux-selectable color="calm" value="4" />
        <wux-selectable color="balanced" value="5" />
        <wux-selectable color="energized" value="6" />
        <wux-selectable color="assertive" value="7" disabled />
        <wux-selectable color="royal" value="8" disabled />
        <wux-selectable color="dark" value="9" disabled />
        <wux-selectable
         type="radio"
         color="light"
         value="1"
         defaultChecked
        />
        <wux-selectable
         type="radio"
         color="stable"
         value="2"
         defaultChecked
        />
        <wux-selectable
         type="radio"
         color="positive"
         value="3"
         defaultChecked
        />
        <wux-selectable
         type="radio"
         color="calm"
         value="4"
         defaultChecked
        />
        <wux-selectable
         type="radio"
         color="balanced"
         value="5"
         defaultChecked
        />
        <wux-selectable
         type="radio"
         color="energized"
         value="6"
         defaultChecked
        />
        <wux-selectable
         type="radio"
         color="assertive"
         value="7"
         disabled
         defaultChecked
        />
        <wux-selectable
         type="radio"
         color="royal"
         value="8"
         disabled
         defaultChecked
        />
        <wux-selectable
         type="radio"
         color="dark"
         value="9"
         disabled
         defaultChecked
        />
        <view class="sub-title">Controlled</view>
        <wux-selectable
         color="light"
         value="1"
         checked="{{ checked }}"
         bind:change="onCheckboxChange"
        />
        <view class="sub-title">Slot</view>
        <wux-selectable color="light" value="1" type="default">
            <view class="icon-on" slot="icon-on" />
            <view class="icon-off" slot="icon-off" />
        </wux-selectable>
        <view class="sub-title">With cellGroup</view>
        <wux-cell-group>
            <block wx:for="{{ items }}" wx:key="index">
                <wux-cell title="{{ item.label }}">
                    <wux-selectable slot="header" wux-class="checkbox" value="{{ item.value }}" />
                </wux-cell>
            </block>
        </wux-cell-group>
        <view class="sub-title">With cellGroup</view>
        <wux-cell-group>
            <block wx:for="{{ items }}" wx:key="index">
                <wux-cell title="{{ item.label }}">
                    <wux-selectable
                     slot="footer"
                     wux-class="checkbox"
                     type="radio"
                     value="{{ item.value }}"
                     checked="{{ value === item.value }}"
                     controlled
                     bind:change="onChange"
                    />
                </wux-cell>
            </block>
        </wux-cell-group>
        <view class="sub-title">Other</view>
        <wux-selectable color="light" value="1">Agree agreement</wux-selectable>
    </view>
</view>

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

Selectable props

参数	类型	描述	默认值
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 事件触发的回调函数	-

Selectable slot

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

Selectable externalClasses

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