Skip to main content
Version: v3+

RADIO_GROUP

Start from API_LEVEL 2.0. Please refer to API_LEVEL.

radio_group_sample

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

PropertiesDescriptionRequiredTypeAPI_LEVEL
xThe x-coordinate of the widgetYESnumber2.0
yThe y-coordinate of the widgetYESnumber2.0
wWidth of the widgetYESnumber2.0
hHeight of the widgetYESnumber2.0
select_srcImage displayed when widget is selectedYESstring2.0
unselect_srcImage displayed when widget is unselectedYESstring2.0
check_funcCallback when button state changesNOCheckFunc2.0
use_colorWhether to display widget using colorsNOboolean4.0

CheckFunc: function

(radioGroup: RadioGroup, index: number, checked: boolean) => void
ParametersDescriptionType
radioGroupThe radioGroup instanceRadioGroup
indexIndex of the optionnumber
checkedWhether selectedboolean

StateButton: object

PropertiesDescriptionRequiredTypeAPI_LEVEL
xThe x-coordinate relative to radioGroupYESnumber2.0
yThe y-coordinate relative to radioGroupYESnumber2.0
wWidth of the widgetYESnumber2.0
hHeight of the widgetYESnumber2.0
select_colorColor when selectedNOnumber4.0
unselect_colorColor when unselectedNOnumber4.0
fill_widthButton color display area widthNOnumber4.0
fill_heightButton color display area heightNOnumber4.0
caution

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

Prop Properties

PropertiesSupport get/setTypeNotes
prop.INITsetobjectInitialize the component and set the default selected item
prop.CHECKEDset/getobjectSet the selected child widget to selected state, or get the selected state of the child widget, the value type is boolean
prop.UNCHECKEDgetobjectSet 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 NamesetPropertygetPropertysettergetter
xYYYY
yYYYY
wYYYY
hYYYY
select_srcNNNN
unselect_srcNNNN
check_funcNNNN
use_colorNNNN

STATE_BUTTON

Property NamesetPropertygetPropertysettergetter
xYYYY
yYYYY
wYYYY
hYYYY
select_colorNNNN
unselect_colorNNNN
fill_widthNNNN
fill_heightNNNN

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)
}
})