界面组件 UI Components

多选框 Checkbox

  1. 应用场景
  2. Vue.js Reference
  3. React Native Reference

多选框 (Checkbox) 用于让用户从一列选项中选择多个的情况，包括全选和不选。

适用情况

  • 用户在多个选择中进行勾选，可以全选或者全不选。
  • 多选框 (Checkbox) 单独出现时，可以表示带有开/关性质的项目，例如某个条款的同意与否。
  • 多选框旁用文字说明选项。
  • 文字说明应简洁明了。

不适用情况

  • 用户只能在多个选项中选择某一项。建议使用单选框。

<up-checkbox v-model="checkbox">已勾选</up-checkbox>
<up-checkbox v-model="checkbox2">未勾选</up-checkbox>
<up-checkbox v-model="checkbox3" disabled>已勾选</up-checkbox>
<up-checkbox v-model="checkbox4" disabled>未勾选</up-checkbox>

<script>
    export default {
        data() {
            return {
              checkbox: true,
              checkbox2: false,
              checkbox3: true,
              checkbox4: false,
            }
        }
    }
</script>

Object.assign(this.state, {
	cb0: true,
	cb1: false,
});

renderPage() {
	<Checkbox checked={this.state.cb0} title = '已勾选' onChange={() => this.setState({cb0: !this.state.cb0})} />
	<Checkbox checked={this.state.cb1} title = '未勾选' onChange={() => this.setState({cb1: !this.state.cb1})} />
}

应用场景

  • 可以用于表示有层级的打开/关闭状态，此情况下使用多选框而不是开关。

  • 表示选中/被选中状态，且具有开关性质时，即使只有一个选项也应该使用多选框（Checkbox），而不是单选框。

Vue.js Reference

属性 说明 类型 可选值 默认值
v-model 多选框状态，双向数据绑定 Any - false
checked-value 在选中时重写返回值 Any - true
unchecked-value 在未选中时重写返回值 Any - false
native-value v-model为数组时，选中返回的value值 Any - -
disabled 是否禁用 Boolean - false

React Native Reference

属性 说明 类型 可选值 默认值
title 文字标题 string - -
onChange 选中状态变化时的回调函数 func - -
disabled 是否禁用 bool - false