Honeycomb Design

# 多选框 CheckBox

一组备选项中进行多选

# 基础用法

多选框
基础用法

单独使用可以表示两种状态之间的切换，写在标签中的内容为 checkbox 按钮后的介绍。

<title>基础用法</title>
<describe>单独使用可以表示两种状态之间的切换，写在标签中的内容为 checkbox 按钮后的介绍。</describe>
<template>
    <hc-checkbox v-model="checked">多选框</hc-checkbox>
</template>
<script>
export default {
  data: function() {
    return {
      checked: true
    }
  }
}
</script>

# 禁用状态

多选框1 多选框2
禁用状态

多选框不可用状态。

<title>禁用状态</title>
<describe>多选框不可用状态。</describe>
<template>
    <hc-checkbox v-model="checked1" disabled label="1">多选框1</hc-checkbox>
    <hc-checkbox v-model="checked2" disabled label="1">多选框2</hc-checkbox>
</template>
<script>
export default {
  data: function() {
    return {
      checked1: false,
      checked2: true
    }
  }
}
</script>

# 多选框组

多选框1 多选框2 多选框3 多选框4 多选框5
多选框组

适用于多个勾选框绑定到同一个数组的情景，通过是否勾选来表示这一组选项中选中的项。

<title>多选框组</title>
<describe>适用于多个勾选框绑定到同一个数组的情景，通过是否勾选来表示这一组选项中选中的项。</describe>
<template>
    <hc-checkbox-group v-model="checkGroup">
      <hc-checkbox label="1">多选框1</hc-checkbox>
      <hc-checkbox label="2">多选框2</hc-checkbox>
      <hc-checkbox label="3">多选框3</hc-checkbox>
      <hc-checkbox label="4" disabled>多选框4</hc-checkbox>
      <hc-checkbox label="5" disabled>多选框5</hc-checkbox>
    </hc-checkbox-group>
</template>
<script>
export default {
  data: function() {
    return {
      checkGroup: '1,5'
    }
  }
}
</script>

# indeterminate 状态

全选
多选框1 多选框2 多选框3
indeterminate 状态

indeterminate 属性用以表示 checkbox 的不确定状态，一般用于实现全选的效果。

<title>indeterminate 状态</title>
<describe>indeterminate 属性用以表示 checkbox 的不确定状态，一般用于实现全选的效果。</describe>
<template>
    <div class="hc-checkbox-indeterminate">
      <hc-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">全选</hc-checkbox>
    </div>
    <hc-checkbox-group v-model="checkGroup"  @change="handleCheckGroupChange">
      <hc-checkbox label="1">多选框1</hc-checkbox>
      <hc-checkbox label="2">多选框2</hc-checkbox>
      <hc-checkbox label="3">多选框3</hc-checkbox>
    </hc-checkbox-group>
</template>
<script>

export default {
  name: 'demo-checkbox-base',
  data: function () {
    return {
      checkAll: true,
      isIndeterminate: true,
      checkGroup: '1'
    }
  },
  methods: {
    handleCheckAllChange: function(event) {
      var CheckGroup = [1, 2, 3]
      this.checkGroup = event.value ? CheckGroup.join(',') : ''
      this.isIndeterminate = false
    },
    handleCheckGroupChange: function(value) {
      var CheckGroup = [1, 2, 3]
      var checkedCount = value.value === "" ? 0 : value.value.split(',').length
      this.checkAll = checkedCount === CheckGroup.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < CheckGroup.length
    }
  }
}
</script>
<style lang="less">
  .hc-checkbox-indeterminate {
    display: inline-block;
    vertical-align: middle;
  }
</style>

# 排列模式

多选框1 多选框2 多选框3
--------------------------------------------
多选框1 多选框2 多选框3
多选框组

多选框组横向或纵向排列。

<title>多选框组</title>
<describe>多选框组横向或纵向排列。</describe>
<template>
    <div>
      <div>
        <hc-checkbox-group v-model="checkGroup" direction="row">
          <hc-checkbox label="1">多选框1</hc-checkbox>
          <hc-checkbox label="2">多选框2</hc-checkbox>
          <hc-checkbox label="3">多选框3</hc-checkbox>
        </hc-checkbox-group>
      </div>
      <div>--------------------------------------------</div>
      <div>
        <hc-checkbox-group v-model="checkGroup" direction="column">
          <hc-checkbox label="1">多选框1</hc-checkbox>
          <hc-checkbox label="2">多选框2</hc-checkbox>
          <hc-checkbox label="3">多选框3</hc-checkbox>
        </hc-checkbox-group>
      </div>
    </div>
</template>
<script>
export default {
  data: function() {
    return {
      checkGroup: '1',
      directionRow: 'row',
      directionColumn: 'column'
    }
  }
}
</script>

# 插槽

备选项1 备选项2 备选项3
插槽

适用于在checkbox文本后还想添加自定义样式，可以通过具名 slot 来实现自定义的内容。

<title>插槽</title>
<describe>适用于在checkbox文本后还想添加自定义样式，可以通过具名 slot 来实现自定义的内容。</describe>
<template>
    <div>
      <hc-checkbox-group v-model="checkGroup" direction="column">
        <hc-checkbox label="1">
          <span>备选项1</span>
          <template v-slot:content>
              <hc-icon type="file-word" style="color: rgb(73,145,242)"></hc-icon>
          </template>
        </hc-checkbox>
        <hc-checkbox label="2">
          <span>备选项2</span>
          <template v-slot:content>
              <hc-icon type="file-ppt" style="color: rgb(241,109,27)"></hc-icon>
          </template>
        </hc-checkbox>
        <hc-checkbox label="3">
          <span>备选项3</span>
          <template v-slot:content>
              <hc-icon type="file-xls" style="color: rgb(31,187,125)"></hc-icon>
          </template>
        </hc-checkbox>
      </hc-checkbox-group>
    </div>
</template>
<script>
export default {
  data: function() {
    return {
      checkGroup: '1',
      directionRow: 'row',
      directionColumn: 'column'
    }
  }
}
</script>

# Checkbox 属性

属性 说明 类型 可选值 默认值
name 原生 name 属性 string -- --
value 当前值，支持v-model方式使用 string / number / boolean -- --
label 选中状态的值（只有在checkbox-group或者绑定对象类型为array时有效） string / number / boolean -- --
disabled 是否禁用 boolean -- false
indeterminate 设置 indeterminate 状态，只负责样式控制 boolean -- false

# Checkbox事件

事件 说明 回调参数
change 用户勾选时触发 {value: 值}

# CheckboxGroup属性

属性 说明 类型 可选值 默认值
value 当前值，支持v-model方式使用 string -- --
direction 排列模式，row为横向排列，column为纵向排列 string row，column row
viewable 是否查看状态 boolean -- false

# CheckboxGroup 事件

事件 说明 回调参数
change 用户选择值确认时触发 {value: 值}

← 开关 Switch →