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 4814fa94fbe90be60ab962261d3a9a9331c8db13..05e9bf4f3f6ebd547e24a56a61baa90a637785ce 100644 --- a/zh-cn/application-dev/reference/arkui-ts/Readme-CN.md +++ b/zh-cn/application-dev/reference/arkui-ts/Readme-CN.md @@ -50,6 +50,8 @@ - 基础组件 - [Blank](ts-basic-components-blank.md) - [Button](ts-basic-components-button.md) + - [Checkbox](ts-basic-components-checkbox.md) + - [CheckboxGroup](ts-basic-components-checkboxgroup.md) - [DataPanel](ts-basic-components-datapanel.md) - [DatePicker](ts-basic-components-datepicker.md) - [Divider](ts-basic-components-divider.md) diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/checkbox.gif b/zh-cn/application-dev/reference/arkui-ts/figures/checkbox.gif new file mode 100644 index 0000000000000000000000000000000000000000..6ae7061dcc7106fdd172e4008a4d82cb5568ab44 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/checkbox.gif differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/checkboxgroup.gif b/zh-cn/application-dev/reference/arkui-ts/figures/checkboxgroup.gif new file mode 100644 index 0000000000000000000000000000000000000000..5d4c6e059f96d3f021f100ffb7c9899630f982ee Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/checkboxgroup.gif differ diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-checkbox.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-checkbox.md new file mode 100644 index 0000000000000000000000000000000000000000..9f6fce6df8d37c59fb188599df1ad915917a0b06 --- /dev/null +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-checkbox.md @@ -0,0 +1,69 @@ +# Checkbox + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** +> 该组件从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 + + +提供多选框组件,通常用于某选项的打开或关闭。 + +## 权限列表 + +无 + +## 子组件 + +无 + +## 接口 + +Checkbox( name?: string, group?: string ) + +- 参数 + | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | + | --------| --------| ------ | -------- | -------- | + | name | string | 否 | - | 多选框名称。 | + | group | string | 否 | - | 多选框的群组名称。 | + + +## 属性 + + +| 名称 | 参数类型 | 默认值 | 描述 | +| ------------- | ------- | ------ | -------- | +| select | bool | false | 设置多选框是否选中。 | +| selectedColor | Color | - | 设置多选框选中状态颜色。 | + +## 事件 + +| 名称 | 功能描述 | +| ----------| -------- | +|onChange(callback: (value: boolean) => void) | 当选中状态发生变化时,触发该回调。
- value为true时,表示已选中。
- value为false时,表示未选中。 | + +## 示例 + +``` +@Entry‘ +@Component +struct CheckboxExample { + + build() { + Row() { + Checkbox({name: 'checkbox1', group: 'checkboxGroup'}) + .select(true) + .selectedColor(0xed6f21) + .onChange((value: boolean) => { + console.info('Checkbox1 change is'+ value) + }) + Checkbox({name: 'checkbox2', group: 'checkboxGroup'}) + .select(false) + .selectedColor(0x39a2db) + .onChange((value: boolean) => { + console.info('Checkbox2 change is'+ value) + }) + } + } +} +``` + + +![](figures/checkbox.gif) \ No newline at end of file diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-checkboxgroup.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-checkboxgroup.md new file mode 100644 index 0000000000000000000000000000000000000000..f372d73e39685d228562ec83478c189119f5a123 --- /dev/null +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-checkboxgroup.md @@ -0,0 +1,87 @@ +# CheckboxGroup + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** +> 该组件从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 + +多选框群组,用于控制多选框全选或者不全选状态。 + +## 权限列表 + +无 + +## 子组件 + +无 + +## 接口 + +CheckboxGroup( group?: string ) + +创建多选框群组,可以控制群组内的Checkbox全选或者不全选,相同group的Checkbox和CheckboxGroup为同一群组。 + +- 参数 + | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | + | -------- | -------- | -------- | -------- | -------- | + | group | string | 否 | - | 群组名称。| + + +## 属性 + +| 名称 | 参数类型 | 默认值 | 描述 | +| -------- | -------- | -------- | -------- | +| selectAll | bool | false | 设置是否全选。 | +| selectedColor | Color | - | 设置被选中或部分选中状态的颜色。 | + +## 事件 + +| 名称 | 功能描述 | +| -------- | -------- | +| onChange (callback: (names: Array<string>, status: SelectStatus) => void ) |CheckboxGroup的选中状态或群组内的Checkbox的选中状态发生变化时,触发回调。
- names:群组内所有被选中的多选框名称。
- status:选中状态。| + +- SelectStatus枚举说明 + | 名称 | 描述 | + | ----- | -------------------- | + | All | 群组多选择框全部选择。 | + | Part | 群组多选择框部分选择。 | + | None | 群组多选择框全部没有选择。 | + + +## 示例 + +``` +@Entry +@Component +struct CheckboxExample { + + build() { + Scroll() { + Column() { + CheckboxGroup({group : 'checkboxGroup'}) + .selectedColor(0xed6f21) + .onChange((itemName:CheckboxGroupResult) => { + console.info("TextPicker::dialogResult is" + JSON.stringify(itemName)) + }) + Checkbox({ name: 'checkbox1', group: 'checkboxGroup' }) + .select(true) + .selectedColor(0x39a2db) + .onChange((value: boolean) => { + console.info('Checkbox1 change is' + value) + }) + Checkbox({ name: 'checkbox2', group: 'checkboxGroup' }) + .select(false) + .selectedColor(0x39a2db) + .onChange((value: boolean) => { + console.info('Checkbox2 change is' + value) + }) + Checkbox({ name: 'checkbox3', group: 'checkboxGroup' }) + .select(true) + .selectedColor(0x39a2db) + .onChange((value: boolean) => { + console.info('Checkbox3 change is' + value) + }) + } + } + } +} +``` +![](figures/checkboxgroup.gif)