@wines/selectable NPM

`@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 事件触发的回调函数	-