CHECKBOX_GROUP

Start from API_LEVEL 2.0 . Please refer to API_LEVEL.

Used to select a single result among multiple options. Each individual option needs to be created using STATE_BUTTON.

Create UI widget

import { createWidget, widget } from '@zos/ui'

const checkGroup = createWidget(widget.CHECKBOX_GROUP, checkboxGroupParam)
const stateButton = createWidget(widget.STATE_BUTTON, stateButtonParam)

Type

checkboxGroupParam: object

Properties	Description	Required	Type
x	The x-coordinate of components.	YES	number
y	The y-coordinate of components.	YES	number
w	The width of components.	YES	number
h	The height of components.	YES	number
select_src	The selected image of the components.	YES	string
unselect_src	The unselected image of the components.	YES	string
check_func	Callback when button state changes.	NO	CheckFunc

CheckFunc: function

(checkboxGroup: CheckboxGroup, index: number, checked: boolean) => void

Parameters	Description	Type
checkboxGroup	The example of radioGroup.	CheckboxGroup
index	Subview index for state changes	number
checked	Check or not	boolean

StateButton

Properties	Required	Type	Notes
x	YES	number	The x-coordinate of components. Coordinates relative to checkboxGroup.
y	YES	number	The y-coordinate of components. Coordinates relative to checkboxGroup.
w	YES	number	The width of components.
h	YES	number	The height of components.

caution

The widget must be initialized once with prop.INIT to render the view

Prop Properties

Properties	Supports get/set	Type	Notes
prop.INIT	set	object	Initialize the component and set the default checkbox
prop.CHECKED	set/get	object(Returns the bool type when get)	Set selected sub-component.Get the selected state of the sub-component.
prop.UNCHECKED	set	object	Set unchecked sub-component.

Code example

tip

Please refer to Design Resources for the image resources in the code example

import { createWidget, widget, prop } from '@zos/ui'

Page({
  build() {
    const checkbox_group = createWidget(widget.CHECKBOX_GROUP, {
      x: 0,
      y: 0,
      w: 480,
      h: 64,
      select_src: 'selected.png',
      unselect_src: 'unselected.png',
      check_func: (group, index, checked) => {
        console.log('index', index)
        console.log('checked', checked)
      }
    })

    const button1 = checkbox_group.createWidget(widget.STATE_BUTTON, {
      x: 40,
      y: 200,
      w: 64,
      h: 64
    })
    const button2 = checkbox_group.createWidget(widget.STATE_BUTTON, {
      x: 190,
      y: 200,
      w: 64,
      h: 64
    })
    const button3 = checkbox_group.createWidget(widget.STATE_BUTTON, {
      x: 340,
      y: 200,
      w: 64,
      h: 64
    })

    checkbox_group.setProperty(prop.INIT, button2)
    checkbox_group.setProperty(prop.CHECKED, button3)
  }
})