diff --git a/en/application-dev/quick-start/resource-categories-and-access.md b/en/application-dev/quick-start/resource-categories-and-access.md index f047ad787904690cb3efd7f8c9beaf580d348a7b..232d6c8a962762aff2bf8a457e5f168a33b13a29 100644 --- a/en/application-dev/quick-start/resource-categories-and-access.md +++ b/en/application-dev/quick-start/resource-categories-and-access.md @@ -265,7 +265,7 @@ Text($r('app.string.message_arrive', "five of the clock")) .fontColor($r('app.color.color_hello')) .fontSize($r('app.float.font_hello')) -// Reference plural resources. The first parameter of $r indicates the plural resource, the second parameter indicates the number of plural resources (for English, **one** indicates singular and is represented by **1**, and **other** indicates plural and is represented by an integer greater than or equal to 1; for Chinese, **other** indicates both singular and plural), and the third parameter is used to replace %d. +// Reference plural resources. The first parameter of $r indicates the plural resource, the second parameter indicates the number of plural resources (for English, one indicates singular and is represented by 1, and other indicates plural and is represented by an integer greater than or equal to 1; for Chinese, other indicates both singular and plural), and the third parameter is used to replace %d. // In this example, the resultant value is "5 apples". Text($r('app.plural.eat_apple', 5, 5)) .fontColor($r('app.color.color_world')) diff --git a/en/application-dev/reference/apis/js-apis-accessibility-config.md b/en/application-dev/reference/apis/js-apis-accessibility-config.md index 9a7eb35e202d8fc5a8e73c76f9caee04e5f7776e..00ffea5edcad7dcf8dd8cb603dd3dfe1b66d093d 100644 --- a/en/application-dev/reference/apis/js-apis-accessibility-config.md +++ b/en/application-dev/reference/apis/js-apis-accessibility-config.md @@ -31,8 +31,8 @@ import config from '@ohos.accessibility.config'; | shortkeyTarget | [Config](#config)\| Yes| Yes| Target application for the accessibility extension shortcut key. The value format is 'bundleName/abilityName'.| | captions | [Config](#config)\| Yes| Yes| Whether to enable captions.| | captionsStyle | [Config](#config)\<[accessibility.CaptionsStyle](js-apis-accessibility.md#captionsstyle8)>| Yes| Yes| Captions style.| -| audioMono| [Config](#config)\| Yes| Yes| Whether to enable mono audio. The value **True** means to enable mono audio, and **False** means the opposite.| -| audioBalance| [Config](#config)\| Yes| Yes| Audio balance for the left and right audio channels. The value ranges from -1.0 to 1.0.| +| audioMono10+| [Config](#config)\| Yes| Yes| Whether to enable mono audio. The value **True** means to enable mono audio, and **False** means the opposite.| +| audioBalance10+| [Config](#config)\| Yes| Yes| Audio balance for the left and right audio channels. The value ranges from -1.0 to 1.0.| ## enableAbility diff --git a/en/application-dev/reference/arkui-ts/figures/checkbox2.gif b/en/application-dev/reference/arkui-ts/figures/checkbox2.gif new file mode 100644 index 0000000000000000000000000000000000000000..9e9f08ff19d6d94644e951e6324c37a728e5d7af Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/checkbox2.gif differ diff --git a/en/application-dev/reference/arkui-ts/figures/checkboxGroup2.gif b/en/application-dev/reference/arkui-ts/figures/checkboxGroup2.gif new file mode 100644 index 0000000000000000000000000000000000000000..6a0be72b7d13e326852225ac44071e89985adab1 Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/checkboxGroup2.gif differ diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-checkbox.md b/en/application-dev/reference/arkui-ts/ts-basic-components-checkbox.md index 2ad1d1ce835fe6c0fcffa7379860711cb49d396d..8760713a108b8fcdf718acb414dee0bbd54c9c7b 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-checkbox.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-checkbox.md @@ -39,9 +39,9 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the In addition to the [universal events](ts-universal-events-click.md), the following attributes are supported. -| Name | Description | +| Name | Description | | -------------------------------------------- | ------------------------------------------------------------ | -| onChange(callback: (value: boolean) => void) | Triggered when the selected status of the check box changes.
- The value **true** means that the check box is selected.
- The value **false** means that the check box is not selected.
Since API version 9, this API is supported in ArkTS widgets. | +| onChange(callback: (value: boolean) => void) | Triggered when the selected status of the check box changes.
- The value **true** means that the check box is selected.
- The value **false** means that the check box is not selected.
Since API version 9, this API is supported in ArkTS widgets.| ## MarkStyle10+ @@ -53,6 +53,8 @@ In addition to the [universal events](ts-universal-events-click.md), the followi ## Example +### Example 1 + ```ts // xxx.ets @Entry @@ -80,3 +82,51 @@ struct CheckboxExample { ![](figures/checkbox.gif) + +### Example 2 + +```ts +// xxx.ets +@Entry +@Component +struct Index { + + build() { + Row() { + Column() { + Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) { + Checkbox({ name: 'checkbox1', group: 'checkboxGroup' }) + .selectedColor(0x39a2db) + .onChange((value: boolean) => { + console.info('Checkbox1 change is'+ value) + }) + .mark({ + strokeColor:Color.Black, + size: 50, + strokeWidth: 5 + }) + .unselectedColor(Color.Red) + .width(30) + .height(30) + Text('Checkbox1').fontSize(20) + } + Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) { + Checkbox({ name: 'checkbox2', group: 'checkboxGroup' }) + .selectedColor(0x39a2db) + .onChange((value: boolean) => { + console.info('Checkbox2 change is' + value) + }) + .width(30) + .height(30) + Text('Checkbox2').fontSize(20) + } + } + .width('100%') + } + .height('100%') + } +} +``` + + +![](figures/checkbox2.gif) diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-checkboxgroup.md b/en/application-dev/reference/arkui-ts/ts-basic-components-checkboxgroup.md index 37da4ad0bdf5b41ae99f617a6d06789fb075c922..5a8f52093e36bc198bb47b5fefdb60f0aac56cfd 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-checkboxgroup.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-checkboxgroup.md @@ -72,6 +72,8 @@ Since API version 9, this API is supported in ArkTS widgets. ## Example +### Example 1 + ```ts // xxx.ets @Entry @@ -124,4 +126,77 @@ struct CheckboxExample { } } ``` -![checkboxgroup](figures/checkboxgroup.gif) +![checkboxGroup](figures/checkboxGroup.gif) + +### Example 2 + +```ts +// xxx.ets +@Entry +@Component +struct Index { + + build() { + Row() { + Column() { + Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) { + CheckboxGroup({ group: 'checkboxGroup' }) + .selectedColor(Color.Orange) + .onChange((itemName: CheckboxGroupResult) => { + console.info("checkbox group content" + JSON.stringify(itemName)) + }) + .mark({ + strokeColor:Color.Black, + size: 40, + strokeWidth: 5 + }) + .unselectedColor(Color.Red) + .width(30) + .height(30) + Text('Select All').fontSize(20) + }.margin({right:15}) + Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) { + Checkbox({ name: 'checkbox1', group: 'checkboxGroup' }) + .selectedColor(0x39a2db) + .onChange((value: boolean) => { + console.info('Checkbox1 change is'+ value) + }) + .mark({ + strokeColor:Color.Black, + size: 50, + strokeWidth: 5 + }) + .unselectedColor(Color.Red) + .width(30) + .height(30) + Text('Checkbox1').fontSize(20) + } + Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) { + Checkbox({ name: 'checkbox2', group: 'checkboxGroup' }) + .selectedColor(0x39a2db) + .onChange((value: boolean) => { + console.info('Checkbox2 change is' + value) + }) + .width(30) + .height(30) + Text('Checkbox2').fontSize(20) + } + Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) { + Checkbox({ name: 'checkbox3', group: 'checkboxGroup' }) + .selectedColor(0x39a2db) + .onChange((value: boolean) => { + console.info('Checkbox3 change is' + value) + }) + .width(30) + .height(30) + Text('Checkbox3').fontSize(20) + } + } + .width('100%') + } + .height('100%') + } +} +``` + +![checkboxGroup](figures/checkboxGroup2.gif) diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-accessibility.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-accessibility.md index 6f7f0a960d436ee2606ef4c0d8e8ac315a2dcf36..da8f863359f832d07123f996d4a810cd8ac71b8e 100644 --- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-accessibility.md +++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-accessibility.md @@ -11,9 +11,9 @@ You can set accessibility attributes and events for components. | Name| Type| Description| | -------- | -------- | -------- | | accessibilityGroup | boolean | Accessibility group. If this attribute is set to **true**, the component and all its child components form an entire selectable component, and the accessibility service will no longer be available for the content of its child components.
Default value: **false**| -| accessibilityText | string | Accessibility text. If a component does not contain text information, it will not be read when the component is selected by the screen reader. In this case, the screen reader user cannot know which component is selected. To solve this problem, you can set this attribute for components without text information. When the component is selected by the screen reader, the specified accessibility text will be read, informing the user which component is selected.
**NOTE**
If a component with this attribute set contains text information, only the accessibility text will be read.
If a component with its **accessibilityGroup** attribute set to **true** does not have **accessibilityText** set and does not contain text information, text concatenation will be performed on its child components (depth first).| -| accessibilityDescription | string | Accessibility description. You can specify further explanation of the current component, for example, possible operation consequences, especially those that cannot be learned from component attributes and accessibility text. You can set a detailed description text for the attribute of the component to help users understand the operation to be performed. If a component contains both text information and the accessibility description, the text is read first and then the accessibility description, when the component is selected.| -| accessibilityLevel | string | Accessibility importance, which is used to decide whether a component can be identified by the accessibility service.
The options are as follows:
**"auto"**: The value is converted to **"yes"** or **"no"** based on the component.
**"yes"**: The current component is selectable for the accessibility service.
**"no"**: The current component is not selectable for the accessibility service.
**"no-hide-descendants"**: The current component and all its child components are not selectable for the accessibility service.
**Default value**: **"auto"**
**NOTE**
When the **accessibilityLevel** attribute of the following components is set to **"auto"**, they are selectable for the accessibility service: Checkbox, CheckboxGroup, Gauge, Marquee, MenuItem, MenuItemGroup, Menu, Navigation, DatePicker, Progress, Radio, Rating, ScrollBar, Select, Slider, Stepper, Text, TextClock, TextPicker, TextTimer, TimePicker, Toggle, Web. | +| accessibilityText | string | Accessibility text. If a component does not contain text information, it will not be read when the component is selected by the screen reader. In this case, the screen reader user cannot know which component is selected. To solve this problem, you can set this attribute for components without text information. When the component is selected by the screen reader, the specified accessibility text will be read, informing the user which component is selected.
Default value: **""**
**NOTE**
If a component with this attribute set contains text information, only the accessibility text will be read.
If a component with its **accessibilityGroup** attribute set to **true** does not have **accessibilityText** set and does not contain text information, text concatenation will be performed on its child components (depth first).| +| accessibilityDescription | string | Accessibility description. You can specify further explanation of the current component, for example, possible operation consequences, especially those that cannot be learned from component attributes and accessibility text. If a component contains both text information and the accessibility description, the text is read first and then the accessibility description, when the component is selected.
Default value: **""**| +| accessibilityLevel | string | Accessibility importance, which is used to decide whether a component can be identified by the accessibility service.
The options are as follows:
**"auto"**: The value is converted to **"yes"** or **"no"** based on the component.
**"yes"**: The current component is selectable for the accessibility service.
**"no"**: The current component is not selectable for the accessibility service.
**"no-hide-descendants"**: The current component and all its child components are not selectable for the accessibility service.
**Default value**: **"auto"**
**NOTE**
When the **accessibilityLevel** attribute of the following components is set to **"auto"**, they are selectable for the accessibility service: Checkbox, CheckboxGroup, Gauge, Marquee, MenuItem, MenuItemGroup, Menu, Navigation, DatePicker, Progress, Radio, Rating, ScrollBar, Select, Slider, Stepper, Text, TextClock, TextPicker, TextTimer, TimePicker, Toggle, Web.| ## Example diff --git a/en/application-dev/reference/arkui-ts/ts-universal-component-visible-area-change-event.md b/en/application-dev/reference/arkui-ts/ts-universal-component-visible-area-change-event.md index 1d34a1ae15448105d23e77989c031daf50ace78e..142cce8d875f6ff7ca2f5248e3450061376fe4f9 100644 --- a/en/application-dev/reference/arkui-ts/ts-universal-component-visible-area-change-event.md +++ b/en/application-dev/reference/arkui-ts/ts-universal-component-visible-area-change-event.md @@ -11,7 +11,7 @@ The visible area change event of a component refers to the change in the visual | Name | Description | | ---------------------------------------- | ---------------------------------------- | -| onVisibleAreaChange(ratios: Array\, event: (isVisible: boolean, currentRatio: number) => void) | Called when the visual area of the component changes.
- **ratios**: threshold array. Each threshold represents a ratio of the component's visible area (that is, the area of the component that is visible on screen) to the component's total area. This callback is invoked when the ratio of the component's visible area to its total area is greater than or less than the threshold. The value range of the threshold is [0.0, 1.0]. If the threshold set exceeds this range, the value **0.0** or **1.0** will be used.
- **isVisible**: indicates whether the ratio of the component's visible area to its total area is greater than the threshold. The value **true** means that the ratio is greater than the threshold, and **false** means that the ratio is less than the threshold.
- **currentRatio**: ratio of the component's visible area to its total area when this callback is invoked.| +| onVisibleAreaChange(ratios: Array\, event: (isVisible: boolean, currentRatio: number) => void) | Called when the visual area of the component changes.
- **ratios**: threshold array. Each threshold represents a ratio of the component's visible area (that is, the area of the component that is visible on screen) to the component's total area. This callback is invoked when the ratio of the component's visible area to its total area is greater than or less than the threshold. The value range of the threshold is [0.0, 1.0]. If the threshold set exceeds this range, the value **0.0** or **1.0** will be used.
- **isVisible**: whether the ratio of the component's visible area to its total area is greater than the threshold. The value **true** means that the ratio is greater than the threshold, and **false** means that the ratio is less than the threshold.
- **currentRatio**: ratio of the component's visible area to its total area when this callback is invoked.
**NOTE**
This API applies only to the scenario where the component layout area exceeds or is not within the current screen display area. It does not apply to the scenario where the area becomes invisible due to component stacking or the visible area exceeds the allowed range as a result of calling transformation APIs such as **offset** or **translate**.| ## Example @@ -98,7 +98,7 @@ struct ScrollExample { .scrollable(ScrollDirection.Vertical) .scrollBar(BarState.On) .scrollBarColor(Color.Gray) - .scrollBarWidth(30) + .scrollBarWidth(10) .onScroll((xOffset: number, yOffset: number) => { console.info(xOffset + ' ' + yOffset) })