diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/075424f4-e9d4-4b96-93a9-22d80f31e316 .png b/zh-cn/application-dev/reference/arkui-ts/figures/075424f4-e9d4-4b96-93a9-22d80f31e316 .png new file mode 100644 index 0000000000000000000000000000000000000000..217dcfbca0de33adef4ffa0d90fd167192845c3c Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/075424f4-e9d4-4b96-93a9-22d80f31e316 .png 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 index 5d4c6e059f96d3f021f100ffb7c9899630f982ee..27b1a29a14e3bfca893f853d1e185c7493afb366 100644 Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/checkboxgroup.gif and b/zh-cn/application-dev/reference/arkui-ts/figures/checkboxgroup.gif differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219982705.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219982705.gif index 89da584f60db920d0801f9e40138a56fd4242fd3..e5566aaf94677c85c889362eedefc2ce484ed9d5 100644 Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219982705.gif and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219982705.gif differ 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 index 2e4ce7801249b39e17703c36676f4214c1b528bf..ed99d0137cd965b927013eda6897a0ee0040d528 100644 --- 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 @@ -27,19 +27,19 @@ CheckboxGroup( group?: string ) ## 属性 -| 名称 | 参数类型 | 默认值 | 描述 | +| 名称 | 参数类型 | 默认值 | 描述 | | -------- | -------- | -------- | -------- | -| selectAll | boolean | false | 设置是否全选。 | -| selectedColor | Color | - | 设置被选中或部分选中状态的颜色。 | +| selectAll | boolean | false | 设置是否全选。 | +| selectedColor | Color | - | 设置被选中或部分选中状态的颜色。 | ## 事件 -| 名称 | 功能描述 | +| 名称 | 功能描述 | | -------- | -------- | -| onChange (callback: (names: Array<string>, status: SelectStatus) => void ) |CheckboxGroup的选中状态或群组内的Checkbox的选中状态发生变化时，触发回调。
- names：群组内所有被选中的多选框名称。
- status：选中状态。| +| onChange (callback: (names: Array<string>, status: SelectStatus) => void ) |CheckboxGroup的选中状态或群组内的Checkbox的选中状态发生变化时，触发回调。
- names：群组内所有被选中的多选框名称。
- status：选中状态。| - SelectStatus枚举说明 - | 名称 | 描述 | + | 名称 | 描述 | | ----- | -------------------- | | All | 群组多选择框全部选择。 | | Part | 群组多选择框部分选择。 | @@ -57,29 +57,41 @@ 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) - }) + Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }){ + CheckboxGroup({group : 'checkboxGroup'}) + .selectedColor(0xed6f21) + .onChange((itemName:CheckboxGroupResult) => { + console.info("TextPicker::dialogResult is" + JSON.stringify(itemName)) + }) + Text('select all').fontSize(20) + } + Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }){ + Checkbox({ name: 'checkbox1', group: 'checkboxGroup' }) + .select(true) + .selectedColor(0x39a2db) + .onChange((value: boolean) => { + console.info('Checkbox1 change is' + value) + }) + Text('Checkbox1').fontSize(20) + } + Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }){ + Checkbox({ name: 'checkbox2', group: 'checkboxGroup' }) + .select(false) + .selectedColor(0x39a2db) + .onChange((value: boolean) => { + console.info('Checkbox2 change is' + value) + }) + Text('Checkbox2').fontSize(20) + } + Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }){ + Checkbox({ name: 'checkbox3', group: 'checkboxGroup' }) + .select(true) + .selectedColor(0x39a2db) + .onChange((value: boolean) => { + console.info('Checkbox3 change is' + value) + }) + Text('Checkbox3').fontSize(20) + } } } } diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-border.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-border.md index bbe7e27f6b39ce2a02795f40bc403c7b2a027eb3..f7fc976acce8ab56f4db900b814d1287ca3b5c36 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-border.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-border.md @@ -31,16 +31,30 @@ | -------- | -------- | -------- | -------- | -------- | | width | [Length](../../ui/ts-types.md#长度类型) | 0 | 否 | 边框宽度。 | | color | [ResourceColor](../../ui/ts-types.md) | 'Black' | 否 | 边框颜色。 | - | radius | [Length](../../ui/ts-types.md#长度类型) | 0 | 否 | 边框角度。 | + | radius | [Length](../../ui/ts-types.md#长度类型)\| EdgeRadiuses9+ | 0 | 否 | 边框角度。 | | style | BorderStyle | BorderStyle.Solid | 否 | 边框样式。 | +- EdgeRadiuses9+对象说明 + + 引用该对象时，至少传入一个参数。 + + | 名称 | 参数类型 | 必填 | 默认值 | 描述 | + | ----------- | -------- | ---- | ------ | ---------------- | + | topLeft | length | 否 | 0 | 左上角圆角半径。 | + | topRight | length | 否 | 0 | 右上角圆角半径。 | + | bottomLeft | length | 否 | 0 | 左下角圆角半径。 | + | bottomRight | length | 否 | 0 | 右下角圆角半径。 | + + + - BorderStyle枚举说明 - | 名称 | 描述 | + + | 名称 | 描述 | | -------- | -------- | - | Dotted | 显示为一系列圆点，圆点半径为borderWidth的一半。 | - | Dashed | 显示为一系列短的方形虚线。 | - | Solid | 显示为一条实线。 | + | Dotted | 显示为一系列圆点，圆点半径为borderWidth的一半。 | + | Dashed | 显示为一系列短的方形虚线。 | + | Solid | 显示为一条实线。 | ## 示例 @@ -56,6 +70,10 @@ struct BorderExample { Text('dashed') .borderStyle(BorderStyle.Dashed).borderWidth(5).borderColor(0xAFEEEE).borderRadius(10) .width(120).height(120).textAlign(TextAlign.Center).fontSize(16) + Text('dashed') + .borderStyle(BorderStyle.Dashed).borderWidth(5).borderColor(0xAFEEEE) + .borderRadius({ topLeft: 10, topRight: 20, bottomLeft: 30, bottomRight: 60 }) + .width(120).height(120).textAlign(TextAlign.Center).fontSize(16) // 点线 Text('dotted') .border({ width: 5, color: 0x317AF7, radius: 10, style: BorderStyle.Dotted }) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-focus.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-focus.md index 4709e6c5b4807df9551cd60bab96c20354e68bf8..936e442bc01103c1ffbaed62253cec38ccdd4508 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-focus.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-focus.md @@ -21,9 +21,10 @@ > **说明：** > 支持焦点控制的组件：Button、Text、Image、List、Grid。 - ## 示例 +焦点事件当前仅支持在真机上显示运行效果。 + ```ts // xxx.ets @Entry @@ -68,3 +69,5 @@ struct FocusableExample { } } ``` + +![focus](figures/focus.png) \ No newline at end of file