RADIO_GROUP

Start from API_LEVEL 2.0. Please refer to API_LEVEL.

Used to select a single option among multiple options. Each individual option is a STATE_BUTTON widget that needs to be created separately.

Create UI Widget

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

const radioGroup = createWidget(widget.RADIO_GROUP, radioGroupParam)
const stateButton = createWidget(widget.STATE_BUTTON, stateButtonParam)

Types

radioGroupParam: object

Properties	Description	Required	Type	API_LEVEL
x	The x-coordinate of the widget	YES	number	2.0
y	The y-coordinate of the widget	YES	number	2.0
w	Width of the widget	YES	number	2.0
h	Height of the widget	YES	number	2.0
select_src	Image displayed when widget is selected	YES	string	2.0
unselect_src	Image displayed when widget is unselected	YES	string	2.0
check_func	Callback when button state changes	NO	CheckFunc	2.0
use_color	Whether to display widget using colors	NO	boolean	4.0

CheckFunc: function

(radioGroup: RadioGroup, index: number, checked: boolean) => void

Parameters	Description	Type
radioGroup	The radioGroup instance	RadioGroup
index	Index of the option	number
checked	Whether selected	boolean

StateButton: object

Properties	Description	Required	Type	API_LEVEL
x	The x-coordinate relative to radioGroup	YES	number	2.0
y	The y-coordinate relative to radioGroup	YES	number	2.0
w	Width of the widget	YES	number	2.0
h	Height of the widget	YES	number	2.0
select_color	Color when selected	NO	number	4.0
unselect_color	Color when unselected	NO	number	4.0
fill_width	Button color display area width	NO	number	4.0
fill_height	Button color display area height	NO	number	4.0

caution

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

Prop Properties

Properties	Support get/set	Type	Notes
prop.INIT	set	object	Initialize the component and set the default selected item
prop.CHECKED	set/get	object	Set the selected child widget to selected state, or get the selected state of the child widget, the value type is boolean
prop.UNCHECKED	get	object	Set the selected child widget to unselected state, or get the selected state of the child widget, the value type is boolean

Property Access Support List

RADIO_GROUP

Property Name	setProperty	getProperty	setter	getter
x	Y	Y	Y	Y
y	Y	Y	Y	Y
w	Y	Y	Y	Y
h	Y	Y	Y	Y
select_src	N	N	N	N
unselect_src	N	N	N	N
check_func	N	N	N	N
use_color	N	N	N	N

STATE_BUTTON

Property Name	setProperty	getProperty	setter	getter
x	Y	Y	Y	Y
y	Y	Y	Y	Y
w	Y	Y	Y	Y
h	Y	Y	Y	Y
select_color	N	N	N	N
unselect_color	N	N	N	N
fill_width	N	N	N	N
fill_height	N	N	N	N

Code Example

tip

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

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

Page({
  build() {
    const radioGroup = createWidget(widget.RADIO_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 = radioGroup.createWidget(widget.STATE_BUTTON, {
      x: 40,
      y: 200,
      w: 64,
      h: 64
    })
    const button2 = radioGroup.createWidget(widget.STATE_BUTTON, {
      x: 190,
      y: 200,
      w: 64,
      h: 64
    })
    const button3 = radioGroup.createWidget(widget.STATE_BUTTON, {
      x: 340,
      y: 200,
      w: 64,
      h: 64
    })

    radioGroup.setProperty(prop.INIT, button3)
  }
})