diff --git a/zh-cn/application-dev/reference/arkui-ts/Readme-CN.md b/zh-cn/application-dev/reference/arkui-ts/Readme-CN.md index 05e9bf4f3f6ebd547e24a56a61baa90a637785ce..43cfd7e73ff0e980c7ba9fd7b5344cb9476d7c27 100644 --- a/zh-cn/application-dev/reference/arkui-ts/Readme-CN.md +++ b/zh-cn/application-dev/reference/arkui-ts/Readme-CN.md @@ -59,6 +59,7 @@ - [ImageAnimator](ts-basic-components-imageanimator.md) - [Progress](ts-basic-components-progress.md) - [QRCode](ts-basic-components-qrcode.md) + - [Radio](ts-basic-components-radio.md) - [Rating](ts-basic-components-rating.md) - [Span](ts-basic-components-span.md) - [Slider](ts-basic-components-slider.md) diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/radio.gif b/zh-cn/application-dev/reference/arkui-ts/figures/radio.gif new file mode 100644 index 0000000000000000000000000000000000000000..23e0e828f6ea0a1953ef754fc8623523c99114de Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/radio.gif differ diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-radio.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-radio.md new file mode 100644 index 0000000000000000000000000000000000000000..a7a5f71f2122905ec95d5b8b0b8e0f80fa82bbb3 --- /dev/null +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-radio.md @@ -0,0 +1,84 @@ +# Radio + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** +> 该组件从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 + + +单选框,提供相应的用户交互选择项。 + + +## 权限列表 + +无 + + +## 子组件 + +无 + + +## 接口 + +Radio(options: {value: string, group: string}) + +- 参数 + | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | + | -------- | -------- | -------- | -------- | -------- | + | value | string | 是 | - | 当前单选框的值。| + | group | string | 是 | - | 当前单选框的所属群组名称,相同group的Radio只能有一个被选中。| + + +## 属性 + +| 名称 | 参数类型 | 默认值 | 描述 | +| -------- | -------- | -------- | -------- | +| checked | boolean | false | 设置单选框的选中状态。 | + + +## 事件 + +| 名称 | 功能描述 | +| -------- | -------- | +| onChange(callback: (value: boolean) => void) | 单选框选中状态改变时触发回调。
-value为true时,代表选中。
-value为false时,代表未选中。 | + + +## 示例 + +``` +@Entry +@Component +struct RadioExample { + build() { + Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) { + Column() { + Text('Radio1') + Radio({ value: 'Radio1', group: 'radioGroup' }).checked(true) + .height(50) + .width(50) + .onChange((value: boolean) => { + console.log('Radio1 status is ' + value) + }) + } + Column() { + Text('Radio2') + Radio({ value: 'Radio2', group: 'radioGroup' }).checked(false) + .height(50) + .width(50) + .onChange((value: boolean) => { + console.log('Radio2 status is ' + value) + }) + } + Column() { + Text('Radio3') + Radio({ value: 'Radio3', group: 'radioGroup' }).checked(false) + .height(50) + .width(50) + .onChange((value: boolean) => { + console.log('Radio3 status is ' + value) + }) + } + }.padding({ top: 30 }) + } +} +``` +![](figures/radio.gif)