diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-toggle.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-toggle.md index e149bf636194673b004e154c7dc23119537f070e..bcd1ec61ebc79864bd2ddde3bc30887c15a0a07e 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-toggle.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-toggle.md @@ -22,30 +22,30 @@ Toggle(options: { type: ToggleType, isOn?: boolean }) | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | | -------- | -------- | -------- | -------- | -------- | | type | ToggleType | 是 | - | 创建相应的开关状态组件。 | - | isOn | boolean | 否 | false | 设置开关状态组件初始化状态。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
> 在创建组件时不设置isOn,组件复用时可保持选中状态;如设置isOn初始值,则需要在通过事件方法记录选中状态已达到组件复用时保持选中状态。 | + | isOn | boolean | 否 | false | 设置开关状态组件初始化状态。 | - ToggleType枚举说明 - | 名称 | 描述 | + | 名称 | 描述 | | -------- | -------- | - | Checkbox | 提供单选框样式,子组件设置文本不生效,如需文本设置,可将Text和当前组件放入布局组件中。 | - | Button | 提供状态按钮样式,如果有文本设置,则相应的文本内容会显示在按钮内部。 | - | Switch | 提供开关样式,子组件设置文本不生效,如需文本设置,可将Text和当前组件放入布局组件中。 | + | Checkbox | 提供单选框样式,子组件设置文本不生效,如需文本设置,可将Text和当前组件放入布局组件中。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
> [通用属性](ts-universal-attributes-size.md)padding有默认值:{
top: 14 vp,
right: 6 vp,
bottom: 14 vp,
left: 6 vp
}, | + | Button | 提供状态按钮样式,如果有文本设置,则相应的文本内容会显示在按钮内部。 | + | Switch | 提供开关样式,子组件设置文本不生效,如需文本设置,可将Text和当前组件放入布局组件中。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
> [通用属性](ts-universal-attributes-size.md)padding有默认值:{
top: 12 vp,
right: 12 vp,
bottom: 12 vp,
left: 12 vp
} | ## 属性 -| 名称 | 参数 | 默认值 | 参数描述 | +| 名称 | 参数 | 默认值 | 参数描述 | | -------- | -------- | -------- | -------- | -| selectedColor | Color | - | 设置组件打开状态的背景颜色。 | -| switchPointColor | Color | - | 设置Switch类型的圆形滑块颜色。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
> 仅对type为ToggleType.Switch生效。 | +| selectedColor | Color | - | 设置组件打开状态的背景颜色。 | +| switchPointColor | Color | - | 设置Switch类型的圆形滑块颜色。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
> 仅对type为ToggleType.Switch生效。 | ## 事件 -| 名称 | 功能描述 | +| 名称 | 功能描述 | | -------- | -------- | -| onChange(callback: (isOn: boolean) => void) | 开关状态切换时触发该事件。 | +| onChange(callback: (isOn: boolean) => void) | 开关状态切换时触发该事件。 | ## 示例 @@ -58,14 +58,14 @@ struct ToggleExample { Column({ space: 10 }) { Text('type: Switch').fontSize(12).fontColor(0xcccccc).width('90%') Flex({ justifyContent: FlexAlign.SpaceEvenly, alignItems: ItemAlign.Center }) { - Toggle({ type: ToggleType.Switch, isOn: false }) + Toggle({ type: ToggleType.Switch, isOn: false })//开关是否打开,false:关闭 .selectedColor(0xed6f21) .switchPointColor(0xe5ffffff) .onChange((isOn: boolean) => { console.info('Component status:' + isOn) }) - Toggle({ type: ToggleType.Switch, isOn: true }) + Toggle({ type: ToggleType.Switch, isOn: true })//开关是否打开,true:打开 .selectedColor(0x39a2db) .switchPointColor(0xe5ffffff) .onChange((isOn: boolean) => {