Selectable 选框组

选框组。

使用指南

在 page.json 中引入组件

  1. {
  2. "navigationBarTitleText": "Selectable",
  3. "usingComponents": {
  4. "wux-selectable": "../../dist/selectable/index",
  5. "wux-cell-group": "../../dist/cell-group/index",
  6. "wux-cell": "../../dist/cell/index"
  7. }
  8. }

示例

  1. <view class="page">
  2. <view class="page__hd">
  3. <view class="page__title">Selectable</view>
  4. <view class="page__desc">选框组</view>
  5. </view>
  6. <view class="page__bd">
  7. <view class="sub-title">Checkbox & Radio</view>
  8. <wux-selectable color="light" value="1" defaultChecked />
  9. <wux-selectable color="stable" value="2" defaultChecked />
  10. <wux-selectable color="positive" value="3" defaultChecked />
  11. <wux-selectable color="calm" value="4" />
  12. <wux-selectable color="balanced" value="5" />
  13. <wux-selectable color="energized" value="6" />
  14. <wux-selectable color="assertive" value="7" disabled />
  15. <wux-selectable color="royal" value="8" disabled />
  16. <wux-selectable color="dark" value="9" disabled />
  17. <wux-selectable type="radio" color="light" value="1" defaultChecked />
  18. <wux-selectable type="radio" color="stable" value="2" defaultChecked />
  19. <wux-selectable type="radio" color="positive" value="3" defaultChecked />
  20. <wux-selectable type="radio" color="calm" value="4" defaultChecked />
  21. <wux-selectable type="radio" color="balanced" value="5" defaultChecked />
  22. <wux-selectable type="radio" color="energized" value="6" defaultChecked />
  23. <wux-selectable type="radio" color="assertive" value="7" disabled defaultChecked />
  24. <wux-selectable type="radio" color="royal" value="8" disabled defaultChecked />
  25. <wux-selectable type="radio" color="dark" value="9" disabled defaultChecked />
  26. <view class="sub-title">Controlled</view>
  27. <wux-selectable color="light" value="1" checked="{{ checked }}" bind:change="onCheckboxChange" />
  28. <view class="sub-title">Slot</view>
  29. <wux-selectable color="light" value="1" type="default">
  30. <view class="icon-on" slot="icon-on"></view>
  31. <view class="icon-off" slot="icon-off"></view>
  32. </wux-selectable>
  33. <view class="sub-title">With cellGroup</view>
  34. <wux-cell-group>
  35. <block wx:for="{{ items }}" wx:key="">
  36. <wux-cell title="{{ item.label }}">
  37. <wux-selectable slot="header" wux-class="checkbox" value="{{ item.value }}" />
  38. </wux-cell>
  39. </block>
  40. </wux-cell-group>
  41. <view class="sub-title">With cellGroup</view>
  42. <wux-cell-group>
  43. <block wx:for="{{ items }}" wx:key="">
  44. <wux-cell title="{{ item.label }}">
  45. <wux-selectable slot="footer" wux-class="checkbox" type="radio" value="{{ item.value }}" checked="{{ value === item.value }}" controlled bind:change="onChange" />
  46. </wux-cell>
  47. </block>
  48. </wux-cell-group>
  49. <view class="sub-title">Other</view>
  50. <wux-selectable color="light" value="1">Agree agreement</wux-selectable>
  51. </view>
  52. </view>
  1. Page({
  2. data: {
  3. items: [{
  4. value: '1',
  5. label: 'Wux'
  6. }, {
  7. value: '2',
  8. label: 'Weapp'
  9. }],
  10. value: '1',
  11. checked: false,
  12. },
  13. onCheckboxChange(e) {
  14. console.log(e)
  15. this.setData({
  16. checked: e.detail.checked,
  17. })
  18. },
  19. onChange(e) {
  20. console.log(e)
  21. this.setData({
  22. value: e.detail.value,
  23. })
  24. },
  25. })

视频演示

Selectable

API

Selectable props

参数 类型 描述 默认值
prefixCls string 自定义类名前缀 wux-selectable
type string 类型,可选值为 checkbox、radio checkbox
value string 字段值 -
defaultChecked boolean 默认是否选中,当 controlledfalse 时才生效 false
checked boolean 当前是否选中,当 controlledtrue 时才生效 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

名称 描述
- 自定义内容
icon-on 自定义已选中的内容
icon-off 自定义未选中的内容

Selectable externalClasses

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