概述
Toggle
为切换按钮组件,一般用于两种状态之间的切换,例如下图中的蓝牙开关。
参数
Toggle
组件的参数定义如下
Toggle(options: { type: ToggleType, isOn?: boolean })
● type
type
属性用于设置Toggle
组件的类型,可通过ToggleType
枚举类型进行设置,可选的枚举值如下
ToggleType.Switch
: 开关
ToggleType.Checkbox
: 复选框
ToggleType.Button
: 按钮
● isOn
isOn
属性用于设置Toggle
组件的状态,例如
常用属性:
选中状态背景色
可使用selectedColor()
方法设置Toggle
组件在选中(或打开)状态下的背景色,例如
Swtich滑块颜色
可使用设置switchPointColor()
方法设置Switch类型的Toggle组件中的圆形滑块颜色,例如
常用事件
Toggle
组件常用的事件为change
事件,每当Toggle
组件的状态发生变化,就会触发change
事件。开发者可通过onChange()
方法为Toggle
组件绑定change
事件,该方法参数为一个回调函数,具体定义如下
onChange(callback: (isOn: boolean) => void)
当Toggle
组件的状态由关闭切换为打开时,isOn
为true
,从打开切换为关闭时,isOn
为false
。
Toggle({ type: ToggleType.Switch, isOn: this.isOn })
.width(60)
.height(30)
.onChange((isOn) => {
this.isOn = isOn;
})