Checkbox 复选框

介绍

在一组备选项中进行多选。

引入

import { IBestCheckbox, IBestCheckboxGroup } from "@ibestservices/ibest-ui";

代码演示

基础用法

TIP

• 通过 group 属性绑定 IBestCheckboxGroup 与 IBestCheckbox 的关系, group 值需具有全局唯一性。
• IBestCheckbox 组件的 name 值在同一 group 中需具备唯一性。

点我查看代码

@Entry
@Component
struct DemoPage {
  @State isChecked: boolean = true
  build() {
    IBestCheckbox({
      value: this.isChecked,
      label: this.isChecked + "",
      onChange: (checked: boolean) => {
        this.isChecked = checked
      }
    })
  }
}

禁用状态

TIP

通过设置 disabled 属性可以禁用复选框。

点我查看代码

@Entry
@Component
struct DemoPage {
  build() {
    Column(){
      IBestCheckbox({
        value: false,
        disabled: true,
        label: "复选框"
      })
      IBestCheckbox({
        value: true,
        disabled: true,
        label: "复选框"
      })
    }
  }
}

自定义形状

TIP

将 shape 属性设置为 square，复选框的形状会变成方形。

点我查看代码

@Entry
@Component
struct DemoPage {
  @State isChecked: boolean = true
  build() {
    IBestCheckbox({
      value: this.isChecked,
      shape: 'square',
      label: "自定义形状",
      onChange: (checked: boolean) => {
        this.isChecked = checked
      }
    })
  }
}

自定义颜色

TIP

通过 checkedColor 属性设置选中状态的图标颜色。

点我查看代码

@Entry
@Component
struct DemoPage {
  @State isChecked: boolean = true
  build() {
    IBestCheckbox({
      value: this.isChecked,
      checkedColor: '#ee0a24',
      label: '自定义颜色',
      onChange: (checked: boolean) => {
        this.isChecked = checked
      }
    })
  }
}

自定义大小

TIP

通过 iconSize 属性可以自定义图标与文字的大小。

点我查看代码

@Entry
@Component
struct DemoPage {
  @State isChecked: boolean = true
  build() {
    IBestCheckbox({
      value: this.isChecked,
      iconSize: 30,
      label: '自定义大小',
      onChange: (checked: boolean) => {
        this.isChecked = checked
      }
    })
  }
}

左侧文本

TIP

将 labelPosition 属性设置为 'left'，可以将文本位置调整到复选框左侧。

点我查看代码

@Entry
@Component
struct DemoPage {
  @State isChecked: boolean = true
  build() {
    IBestCheckbox({
      value: this.isChecked,
      labelPosition: 'left',
      label: '左侧文本',
      onChange: (checked: boolean) => {
        this.isChecked = checked
      }
    })
  }
}

禁用文本点击

TIP

设置 labelDisabled 属性后，点击图标以外的内容不会触发复选框切换。

点我查看代码

@Entry
@Component
struct DemoPage {
  @State isChecked: boolean = true
  build() {
    IBestCheckbox({
      value: this.isChecked,
      label: '左侧文本',
      labelDisabled: true,
      onChange: (checked: boolean) => {
        this.isChecked = checked
      }
    })
  }
}

复选框组

点我查看代码

@Entry
@Component
struct DemoPage {
  @State group: string = "group"
  @State activeList: string[] = ["1", "2"]
  build() {
    IBestCheckboxGroup({ group: this.group, activeList: $activeList }){
      IBestCheckbox({
        group: this.group,
        label: '复选框1',
        name: '1'
      })
      IBestCheckbox({
        group: this.group,
        label: '复选框2',
        name: '2'
      })
    }
  }
}

水平排列

点我查看代码

@Entry
@Component
struct DemoPage {
  @State group: string = "group"
  @State activeList: string[] = ["1", "2"]
  build() {
    IBestCheckboxGroup({ group: this.group, activeList: $activeList, placeDirection: Axis.Horizontal }){
      IBestCheckbox({
        group: this.group,
        label: '复选框1',
        name: '1'
      })
      IBestCheckbox({
        group: this.group,
        label: '复选框2',
        name: '2'
      })
    }
  }
}

限制最大可选数

TIP

通过 max 属性可以限制复选框组的最大可选数。

点我查看代码

@Entry
@Component
struct DemoPage {
  @State group: string = "group"
  @State activeList: string[] = ["1", "2"]
  build() {
    IBestCheckboxGroup({ group: this.group, activeList: $activeList, max: 2 }){
      IBestCheckbox({
        group: this.group,
        label: '复选框1',
        name: '1'
      })
      IBestCheckbox({
        group: this.group,
        label: '复选框2',
        name: '2'
      })
      IBestCheckbox({
        group: this.group,
        label: '复选框3',
        name: '3'
      })
    }
  }
}

全选与反选

TIP

通过 controller 上的 toggleAll 方法可以实现全选与反选。

点我查看代码

import { IBestCheckboxGroupController } from '@ibestservices/ibset-ui'
@Entry
@Component
struct CheckboxPage {
  @State group: string = "group"
  @State activeList: string[] = ["1"]
  private controller: IBestCheckboxGroupController = new IBestCheckboxGroupController()
  build(){
    Column(){
      IBestCheckboxGroup({ group: this.group, activeList: $activeList, controller: this.controller }){
        IBestCheckbox({
          group: this.group,
          label: '复选框1',
          name: '1'
        })
        IBestCheckbox({
          group: this.group,
          label: '复选框2',
          name: '2'
        })
        IBestCheckbox({
          group: this.group,
          label: '复选框3',
          name: '3'
        })
      }
      Row({space: 12}){
        IBestButton({
          text: '全选',
          type: 'primary',
          onClickBtn: ()=>{
            this.controller.toggleAll(true)
          }
        })
        IBestButton({
          text: '反选',
          type: 'warning',
          onClickBtn: ()=>{
            this.controller.toggleAll()
          }
        })
        IBestButton({
          text: '取消选中',
          onClickBtn: ()=>{
            this.controller.toggleAll(false)
          }
        })
      }.margin({top: 12})
    }
  }
}

不确定状态

TIP

通过 indeterminate 设置复选框是否为不确定状态。

点我查看代码

import { IBestCheckboxGroupController } from '@ibestservices/ibset-ui'
@Entry
@Component
struct CheckboxPage {
  @State group: string = "group"
  @State activeList: string[] = ["2"]
  @State isIndeterminate: boolean = true
  @State isIndeterminateCheckAll: boolean = false
  private controller: IBestCheckboxGroupController = new IBestCheckboxGroupController()
  build(){
    Column() {
      IBestCheckbox({
        value: this.isIndeterminateCheckAll,
        label: '全选',
        indeterminate: this.isIndeterminate,
        onChange: checked => {
          this.controller.toggleAll(checked)
        }
      })
      IBestCheckboxGroup({
        group: this.group,
        activeList: $activeList,
        controller: this.controller,
        onChange: checkedNames => {
          const length = checkedNames.length
          this.isIndeterminate = length < 2 && length > 0
          this.isIndeterminateCheckAll = length === 2
        }
      }){
        IBestCheckbox({
          group: this.group,
          label: '复选框1',
          name: '1'
        })
        IBestCheckbox({
          group: this.group,
          label: '复选框2',
          name: '2'
        })
      }
    }
  }
}

搭配单元格组件使用

点我查看代码

@Entry
@Component
struct CheckboxPage {
  @State group: string = "group"
  @State activeList: string[] = []
  @State cellCheckedMaxNum: number = 2
  @Builder CellCheckbox(name, group){
    IBestCheckbox({ name, group })
  }
  handleClickCell(name){
    const index = this.activeList.indexOf(name)
    if(index > -1){
      this.activeList.splice(index, 1)
    }else{
      this.activeList.push(name)
    }
  }
  build(){
    Column() {
      IBestCheckboxGroup({
        group: this.group,
        activeList: $activeList,
        max: this.cellCheckedMaxNum,
        space: 0
      }){
        IBestCell({
          clickable: true,
          title: '复选框1',
          disabled: this.activeList.length >= this.cellCheckedMaxNum && !this.activeList.includes('1'),
          rightIconBuilder: (): void => this.CellCheckbox('1', this.group),
          onClickCell: (): void => this.handleClickCell('1')
        })
        IBestCell({
          clickable: true,
          title: '复选框2',
          disabled: this.activeList.length >= this.cellCheckedMaxNum && !this.activeList.includes('2'),
          rightIconBuilder: (): void => this.CellCheckbox('2', this.group),
          onClickCell: (): void => this.handleClickCell('2')
        })
        IBestCell({
          clickable: true,
          title: '复选框3',
          disabled: this.activeList.length >= this.cellCheckedMaxNum && !this.activeList.includes('3'),
          hasBorder: false,
          rightIconBuilder: (): void => this.CellCheckbox('3', this.group),
          onClickCell: (): void => this.handleClickCell('3')
        })
      }
    }
  }
}

API

Checkbox @Props

参数	说明	类型	默认值
name	标识符，通常为一个唯一的字符串或数字，同一 `group` 的 `name` 不可重复	string \| number
group	标识符，通常为一个唯一的字符串，需具备`全局唯一性`或已入栈的页面`唯一性`	string
label	显示的文本	ResourceStr
value	默认是否选中非双向绑定，如果要获取最新的值请从 `onChange` 回调中获取	boolean	`false`
iconSize	图标大小	number \| string	`18`
shape	形状，可选值为 `square` `dot`	string	`round`
disabled	是否为禁用状态	boolean	`false`
labelDisabled	是否禁用文本内容点击	boolean	`false`
labelPosition	文本位置，可选值为 `left`	string	`right`
checkedColor	选中状态颜色	ResourceColor
indeterminate	是否为不确定状态	boolean	`false`
labelFontSize	文本字体大小	number \| string	`16`

Checkbox Events

事件名	说明	参数类型
onChange	选中状态改变的回调事件	`checked: boolean`

Checkbox 插槽

插槽名	说明	参数类型
defaultBuilder	`label` 的插槽，优先级大于 `label` 属性	`data: { checked: boolean, disabled: boolean }`
iconBuilder	自定义图标插槽，需要自己调整选中与未选中展示的 `UI` 内容	`data: { checked: boolean, disabled: boolean }`

CheckboxGroup @Props

参数	说明	类型	默认值
group	标识符，通常为一个唯一的字符串，需具备`全局唯一性`	string	`''`
max	最大可选数，`0` 为无限制	number	`0`
activeList	激活的标识列表, 支持双向绑定	string[]	`[]`
placeDirection	排列方向	Axis	`Axis.Vertical`
space	间距	string \| number	`12`
controller	组件实例	IBestCheckboxGroupController	`-`

IBestCheckboxGroupController 方法

方法名	说明	参数类型
toggleAll	全选与反选, true 为选中，false 为取消选中，不传参为取反	`isSelectAll?: boolean`

CheckboxGroup Events

事件名	说明	参数类型
onChange	选中状态改变的回调事件，回调参数是选中的 `checkbox` 组件的 `name` 值	`checkboxNames: string[]`

CheckboxGroup 插槽

插槽名	说明	参数类型
defaultBuilder	默认内容插槽	`-`

Checkbox 复选框 ​

介绍 ​

引入 ​

代码演示 ​

基础用法 ​

禁用状态 ​

自定义形状 ​

自定义颜色 ​

自定义大小 ​

左侧文本 ​

禁用文本点击 ​

复选框组 ​

水平排列 ​

限制最大可选数 ​

全选与反选 ​

不确定状态 ​

搭配单元格组件使用 ​

API ​

Checkbox @Props ​

Checkbox Events ​

Checkbox 插槽 ​

CheckboxGroup @Props ​

IBestCheckboxGroupController 方法 ​

CheckboxGroup Events ​

CheckboxGroup 插槽 ​

Checkbox 复选框

介绍

引入

代码演示

基础用法

禁用状态

自定义形状

自定义颜色

自定义大小

左侧文本

禁用文本点击

复选框组

水平排列

限制最大可选数

全选与反选

不确定状态

搭配单元格组件使用

API

Checkbox @Props

Checkbox Events

Checkbox 插槽

CheckboxGroup @Props

IBestCheckboxGroupController 方法

CheckboxGroup Events

CheckboxGroup 插槽