diff --git a/en/application-dev/reference/apis/js-apis-curve.md b/en/application-dev/reference/apis/js-apis-curve.md index f06e40489cbe25cd8fc75171d3736e0f868cbd69..57429452128ed66558b340473c88aacddfb88b59 100644 --- a/en/application-dev/reference/apis/js-apis-curve.md +++ b/en/application-dev/reference/apis/js-apis-curve.md @@ -209,9 +209,10 @@ Curves.responsiveSpringMotion() // Create a responsive spring animation curve wi interpolate(fraction: number): number - Implements calculation. +Since API version 9, this API is supported in ArkTS widgets. + **System capability**: SystemCapability.ArkUI.ArkUI.Full **Parameters** diff --git a/en/application-dev/reference/arkui-ts/ts-animatorproperty.md b/en/application-dev/reference/arkui-ts/ts-animatorproperty.md index 36d37c6d5fe1e091128d60ee0ff9f337bd13c818..f22e531ac3a0f8423c9e8de5af520a92d2828d5f 100644 --- a/en/application-dev/reference/arkui-ts/ts-animatorproperty.md +++ b/en/application-dev/reference/arkui-ts/ts-animatorproperty.md @@ -6,20 +6,21 @@ You can create a property animator to animate certain universal attributes of a > > This event is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. - animation(value: {duration?: number, tempo?: number, curve?: string | Curve | ICurve, delay?:number, iterations: number, playMode?: PlayMode, onFinish?: () => void}) +Since API version 9, this API is supported in ArkTS widgets. + **Parameters** | Name | Type | Mandatory | Description | | ---------- | ------------------------------------------| ---- | ------------------------------------------------------------ | -| duration | number | No | Animation duration, in ms.
Default value: **1000**| +| duration | number | No | Animation duration, in ms.
Default value: **1000**
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
The maximum animation duration on an ArkTS widget is 1000 ms. If the set value exceeds the limit, the value **1000** will be used. | | tempo | number | No | Animation playback speed. A greater value indicates a higher animation playback speed.
The value **0** indicates that no animation is applied.
Default value: **1**| -| curve | string \| [Curve](ts-appendix-enums.md#curve) \| ICurve9+ | No | Animation curve.
Default value: **Curve.Linear** | +| curve | string \| [Curve](ts-appendix-enums.md#curve) \| ICurve9+ | No | Animation curve.
Default value: **Curve.Linear**
Since API version 9, this API is supported in ArkTS widgets. | | delay | number | No | Delay of animation playback, in ms. The value **0** indicates that the playback is not delayed.
Default value: **0** | | iterations | number | No | Number of times that the animation is played. The value **-1** indicates that the animation is played for an unlimited number of times.
Default value: **1**| -| playMode | [PlayMode](ts-appendix-enums.md#playmode) | No | Animation playback mode. By default, the animation is played from the beginning after the playback is complete.
Default value: **PlayMode.Normal**| -| onFinish | () => void | No | Callback invoked when the animation playback is complete. | +| playMode | [PlayMode](ts-appendix-enums.md#playmode) | No | Animation playback mode. By default, the animation is played from the beginning after the playback is complete.
Default value: **PlayMode.Normal**
Since API version 9, this API is supported in ArkTS widgets.| +| onFinish | () => void | No | Callback invoked when the animation playback is complete.
Since API version 9, this API is supported in ArkTS widgets.| ## Example diff --git a/en/application-dev/reference/arkui-ts/ts-appendix-enums.md b/en/application-dev/reference/arkui-ts/ts-appendix-enums.md index ecc026e3fd2d4613e5b3fb0e48533e29d6f1a941..967d9a0f35c6e5ee71a4ebe8a09ceaed21305c53 100644 --- a/en/application-dev/reference/arkui-ts/ts-appendix-enums.md +++ b/en/application-dev/reference/arkui-ts/ts-appendix-enums.md @@ -2,6 +2,8 @@ ## Color +Since API version 9, this API is supported in ArkTS widgets. + | Color | Value | Illustration | | ------------------------ | -------- | ------------------------------------------------------------ | | Black | 0x000000 | ![en-us_image_0000001219864153](figures/en-us_image_0000001219864153.png) | @@ -19,6 +21,8 @@ ## ImageFit +Since API version 9, this API is supported in ArkTS widgets. + | Name | Description | | --------- | ------------------------------------------------------------ | | Contain | The image is scaled with its aspect ratio retained for the content to be completely displayed within the display boundaries. | @@ -30,6 +34,8 @@ ## BorderStyle +Since API version 9, this API is supported in ArkTS widgets. + | Name | Description | | ------ | ----------------------------------------------- | | Dotted | Dotted border. The radius of a dot is half of **borderWidth**.| @@ -38,6 +44,8 @@ ## LineJoinStyle +Since API version 9, this API is supported in ArkTS widgets. + | Name | Description | | ----- | -------------------- | | Bevel | Bevel is used to connect paths.| @@ -46,6 +54,8 @@ ## TouchType +Since API version 9, this API is supported in ArkTS widgets. + | Name | Description | | ------ | ------------------------------ | | Down | A finger is pressed. | @@ -55,6 +65,8 @@ ## MouseButton +Since API version 9, this API is supported in ArkTS widgets. + | Name | Description | | ------- | ---------------- | | Left | Left button on the mouse. | @@ -66,6 +78,8 @@ ## MouseAction +Since API version 9, this API is supported in ArkTS widgets. + | Name | Description | | ------- | -------------- | | Press | The mouse button is pressed.| @@ -75,6 +89,8 @@ ## Curve +Since API version 9, this API is supported in ArkTS widgets. + | Name | Description | | ------------------- | ------------------------------------------------------------ | | Linear | The animation speed keeps unchanged. | @@ -93,6 +109,8 @@ ## AnimationStatus +Since API version 9, this API is supported in ArkTS widgets. + | Name | Description | | ------- | ------------------ | | Initial | The animation is in the initial state. | @@ -102,6 +120,8 @@ ## FillMode +Since API version 9, this API is supported in ArkTS widgets. + | Name | Description | | --------- | ------------------------------------------------------------ | | None | Before execution, the animation does not apply any styles to the target component. After execution, the animation restores the target component to its default state.| @@ -111,6 +131,8 @@ ## PlayMode +Since API version 9, this API is supported in ArkTS widgets. + | Name | Description | | ---------------- | ------------------------------------------------------------ | | Normal | The animation is played forwards. | @@ -120,6 +142,8 @@ ## KeyType +Since API version 9, this API is supported in ArkTS widgets. + | Name| Description | | ---- | ---------- | | Down | The key is pressed.| @@ -127,6 +151,8 @@ ## KeySource +Since API version 9, this API is supported in ArkTS widgets. + | Name | Description | | -------- | -------------------- | | Unknown | Unknown input device. | @@ -136,16 +162,18 @@ | Name | Description | | -------- | ---------------------- | -| Top | Top edge in the vertical direction. | -| Center(deprecated) | Center position in the vertical direction.
This API is deprecated since API version 9. | -| Bottom | Bottom edge in the vertical direction. | +| Top | Top edge in the vertical direction.
Since API version 9, this API is supported in ArkTS widgets.| +| Center(deprecated) | Center position in the vertical direction.
This API is deprecated since API version 9.| +| Bottom | Bottom edge in the vertical direction.
Since API version 9, this API is supported in ArkTS widgets.| | Baseline(deprecated) | Text baseline position in the cross axis direction.
This API is deprecated since API version 9.| -| Start | Start position in the horizontal direction. | -| Middle(deprecated) | Center position in the horizontal direction.
This API is deprecated since API version 9. | -| End | End position in the horizontal direction. | +| Start | Start position in the horizontal direction.
Since API version 9, this API is supported in ArkTS widgets.| +| Middle(deprecated) | Center position in the horizontal direction.
This API is deprecated since API version 9.| +| End | End position in the horizontal direction.
Since API version 9, this API is supported in ArkTS widgets.| ## Week +Since API version 9, this API is supported in ArkTS widgets. + | Name | Description | | -------- | ---------------------- | | Mon | Monday. | @@ -158,6 +186,8 @@ ## Direction +Since API version 9, this API is supported in ArkTS widgets. + | Name| Description | | ---- | ---------------------- | | Ltr | Components are arranged from left to right. | @@ -166,6 +196,8 @@ ## BarState +Since API version 9, this API is supported in ArkTS widgets. + | Name| Description | | ---- | -------------------------------- | | Off | Not displayed. | @@ -174,6 +206,8 @@ ## EdgeEffect +Since API version 9, this API is supported in ArkTS widgets. + | Name | Description | | ------ | ------------------------------------------------------------ | | Spring | Spring effect. When at one of the edges, the component can move beyond the bounds through touches, and produces a bounce effect when the user releases their finger.| @@ -182,6 +216,8 @@ ## Alignment +Since API version 9, this API is supported in ArkTS widgets. + | Name | Description | | ----------- | ---------------- | | TopStart | Top start. | @@ -196,6 +232,8 @@ ## TransitionType +Since API version 9, this API is supported in ArkTS widgets. + | Name | Description | | ------ | -------------------------------------------------- | | All | The transition takes effect in all scenarios.| @@ -204,6 +242,8 @@ ## RelateType +Since API version 9, this API is supported in ArkTS widgets. + | Name | Description | | ------ | ------------------------------- | | FILL | The current child component is scaled to fill the parent component. | @@ -211,6 +251,8 @@ ## Visibility +Since API version 9, this API is supported in ArkTS widgets. + | Name | Description | | ------- | -------------------------------- | | Hidden | The component is hidden, and a placeholder is used for it in the layout. | @@ -219,6 +261,8 @@ ## LineCapStyle +Since API version 9, this API is supported in ArkTS widgets. + | Name | Description | | ------ | -------------------- | | Butt | The ends of the line are squared off, and the line does not extend beyond its two endpoints.| @@ -227,6 +271,8 @@ ## Axis +Since API version 9, this API is supported in ArkTS widgets. + | Name | Description | | ---------- | ------------ | | Vertical | Vertical direction.| @@ -234,6 +280,8 @@ ## HorizontalAlign +Since API version 9, this API is supported in ArkTS widgets. + | Name | Description | | ------ | ------------------------ | | Start | Aligned with the start edge in the same direction as the language in use.| @@ -242,6 +290,8 @@ ## FlexAlign +Since API version 9, this API is supported in ArkTS widgets. + | Name | Description | | ------------ | ------------------------------------------------------------ | | Start | The child components are aligned with the start edge of the main axis. The first component is aligned with the main-start, and subsequent components are aligned with the previous one.| @@ -253,6 +303,8 @@ ## ItemAlign +Since API version 9, this API is supported in ArkTS widgets. + | Name | Description | | -------- | ------------------------------------------------------------ | | Auto | The default configuration in the flex container is used. | @@ -264,6 +316,8 @@ ## FlexDirection +Since API version 9, this API is supported in ArkTS widgets. + | Name | Description | | ------------- | ------------------------------ | | Row | The child components are arranged in the same direction as the main axis runs along the rows.| @@ -273,6 +327,8 @@ ## FlexWrap +Since API version 9, this API is supported in ArkTS widgets. + | Name | Description | | ----------- | ------------------------------------------------- | | NoWrap | The child components in the flex container are arranged in a single line, and they cannot overflow. | @@ -281,6 +337,8 @@ ## VerticalAlign +Since API version 9, this API is supported in ArkTS widgets. + | Name | Description | | ------ | ------------------------ | | Top | Top aligned. | @@ -289,6 +347,8 @@ ## ImageRepeat +Since API version 9, this API is supported in ArkTS widgets. + | Name | Description | | -------- | -------------------------- | | X | The image is repeatedly drawn only along the horizontal axis.| @@ -298,6 +358,8 @@ ## ImageSize +Since API version 9, this API is supported in ArkTS widgets. + | Type | Description | | ------- | ------------------------------------------------------------ | | Cover | Default value. The image is scaled with its aspect ratio retained for both sides to be greater than or equal to the display boundaries.| @@ -306,6 +368,8 @@ ## GradientDirection +Since API version 9, this API is supported in ArkTS widgets. + | Name | Description | | ----------- | ---------- | | Left | The gradient direction is from right to left.| @@ -320,6 +384,8 @@ ## SharedTransitionEffectType +Since API version 9, this API is supported in ArkTS widgets. + | Name | Description | | ----------- | ---------- | | Static | The element position remains unchanged on the target page, and transition opacity can be configured. Currently, this effect is only valid in redirecting to the target page.| @@ -327,6 +393,8 @@ ## FontStyle +Since API version 9, this API is supported in ArkTS widgets. + | Name | Description | | ------ | ---------------- | | Normal | Standard font style.| @@ -334,6 +402,8 @@ ## FontWeight +Since API version 9, this API is supported in ArkTS widgets. + | Name | Description | | ------- | -------------- | | Lighter | The font weight is lighter. | @@ -345,6 +415,8 @@ ## TextAlign +Since API version 9, this API is supported in ArkTS widgets. + | Name | Description | | ------ | -------------- | | Start | Aligned with the start.| @@ -353,6 +425,8 @@ ## TextOverflow +Since API version 9, this API is supported in ArkTS widgets. + | Name | Description | | -------- | -------------------------------------- | | Clip | Extra-long text is clipped. | @@ -361,6 +435,8 @@ ## TextDecorationType +Since API version 9, this API is supported in ArkTS widgets. + | Name | Description | | ----------- | ------------------ | | Underline | Line under the text. | @@ -370,6 +446,8 @@ ## TextCase +Since API version 9, this API is supported in ArkTS widgets. + | Name | Description | | --------- | -------------------- | | Normal | The original case of the text is retained.| @@ -378,6 +456,8 @@ ## ResponseType8+ +Since API version 9, this API is supported in ArkTS widgets. + | Name | Description | | ---------- | -------------------------- | | LongPress | The menu is displayed when the component is long-pressed. | @@ -385,6 +465,8 @@ ## HoverEffect8+ +Since API version 9, this API is supported in ArkTS widgets. + | Name | Description | | --------- | ---------------------------- | | Auto | Default hover effect.| @@ -394,6 +476,8 @@ ## Placement8+ +Since API version 9, this API is supported in ArkTS widgets. + | Name | Description | | ------------- | ------------------------------------------------------------ | | Left | The popup is on the left of the component, vertically aligned with the component on the left. | @@ -411,6 +495,8 @@ ## CopyOptions9+ +Since API version 9, this API is supported in ArkTS widgets. + | Name | Description | | ----------- | -------------------- | | None | Copy is not allowed. | @@ -419,6 +505,8 @@ ## HitTestMode9+ +Since API version 9, this API is supported in ArkTS widgets. + | Name | Description | | ----------- | -------------------- | | Default | Both the node and its child node respond to the hit test of a touch event, but its sibling node is blocked from the hit test. | diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-blank.md b/en/application-dev/reference/arkui-ts/ts-basic-components-blank.md index c624d6b2c04cf07d34927f0e7c02ed9668136bbb..7a046d68f40f64d8dbb085c3c51d6451c3550290 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-blank.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-blank.md @@ -16,6 +16,8 @@ Not supported Blank(min?: number | string) +Since API version 9, this API is supported in ArkTS widgets. + **Parameters** | Name| Type| Mandatory| Description| @@ -28,7 +30,7 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the | Name| Type| Description| | -------- | -------- | -------- | -| color | [ResourceColor](ts-types.md#resourcecolor) | Color to fill the empty spaces.| +| color | [ResourceColor](ts-types.md#resourcecolor) | Color to fill the empty spaces.
Since API version 9, this API is supported in ArkTS widgets.| ## Example @@ -88,6 +90,6 @@ struct BlankExample { } } ``` -If the width of the parent container is not set, set **min** to specify the minimum width of the **\** component. +If the width of the parent container is not set, set **min** to specify the minimum width of the **\** component. ![blankmin](figures/blankmin.png) diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-button.md b/en/application-dev/reference/arkui-ts/ts-basic-components-button.md index c135dc560cff44bde103d3f7808705124938520d..75d67936b62bf0ac72456673ef1474e4840cb9fd 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-button.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-button.md @@ -16,6 +16,8 @@ This component can contain only one child component. **API 1:** Button(options?: {type?: ButtonType, stateEffect?: boolean}) +Since API version 9, this API is supported in ArkTS widgets. + **Parameters** | Name | Type | Mandatory | Description | @@ -28,6 +30,8 @@ This component can contain only one child component. Creates a button component based on text content. In this case, the component cannot contain child components. +Since API version 9, this API is supported in ArkTS widgets. + **Parameters** | Name | Type | Mandatory | Description | @@ -40,10 +44,13 @@ This component can contain only one child component. | Name | Type | Description | | ----------- | ----------- | --------------------------------- | -| type | ButtonType | Button type.
Default value: **ButtonType.Capsule** | -| stateEffect | boolean | Whether to enable the pressed effect on the click of the button. The value **false** means to disable the pressed effect.
Default value: **true**| +| type | ButtonType | Button type.
Default value: **ButtonType.Capsule**
Since API version 9, this API is supported in ArkTS widgets.| +| stateEffect | boolean | Whether to enable the pressed effect on the click of the button. The value **false** means to disable the pressed effect.
Default value: **true**
Since API version 9, this API is supported in ArkTS widgets.| ## ButtonType enums + +Since API version 9, this API is supported in ArkTS widgets. + | Name | Description | | ------- | ------------------ | | Capsule | Capsule-type button (the round corner is half of the height by default).| 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 95fa03d4b2f7f94a02c450e37fca071a8db47d11..7bb73dc7db50b38fee5e68bd44a254291d27a8fc 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 @@ -14,6 +14,8 @@ Not supported Checkbox(options?: {name?: string, group?: string }) +Since API version 9, this API is supported in ArkTS widgets. + **Parameters** | Name | Type| Mandatory | Description| @@ -28,16 +30,16 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the | Name | Type| Description| | ------------- | ------- | -------- | -| select | boolean | Whether the check box is selected.
Default value: **false**| -| selectedColor | [ResourceColor](ts-types.md#resourcecolor) | Color of the check box when it is selected.| +| select | boolean | Whether the check box is selected.
Default value: **false**
Since API version 9, this API is supported in ArkTS widgets.| +| selectedColor | [ResourceColor](ts-types.md#resourcecolor) | Color of the check box when it is selected.
Since API version 9, this API is supported in ArkTS widgets.| ## Events In addition to the [universal events](ts-universal-events-click.md), the following attributes are supported. -| Name | Description| -| ----------| -------- | -|onChange(callback: (value: boolean) => void) | Triggered when the selected status of the check box changes due to a manual operation.
- The value **true** means that the check box is selected.
- The value **false** means that the check box is not selected. | +| Name | Description | +| -------------------------------------------- | ------------------------------------------------------------ | +| onChange(callback: (value: boolean) => void) | Triggered when the selected status of the check box changes due to a manual operation.
- 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.| ## Example 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 64b116778047e73a49f79c4b4d859cab089fb6b4..0ff6c9dcf8bdf3c8e0cf55aaf3f68c439bdec48f 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 @@ -16,9 +16,9 @@ CheckboxGroup(options?: { group?: string }) Creates a check box group so that you can select or deselect all check boxes in the group at the same time. Check boxes and the check box group that share the group name belong to the same group. -**Parameters** - +Since API version 9, this API is supported in ArkTS widgets. +**Parameters** | Name| Type| Mandatory| Description| | -------- | -------- | -------- | -------- | @@ -30,8 +30,8 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the | Name| Type| Description| | -------- | -------- | -------- | -| selectAll | boolean | Whether to select all.
Default value: **false**
If **select** is explicitly set for check boxes in the group, the check box settings are prioritized.| -| selectedColor | [ResourceColor](ts-types.md#resourcecolor) | Color of the selected check box.| +| selectAll | boolean | Whether to select all.
Default value: **false**
If **select** is explicitly set for check boxes in the group, the check box settings are prioritized.
Since API version 9, this API is supported in ArkTS widgets.| +| selectedColor | [ResourceColor](ts-types.md#resourcecolor) | Color of the selected check box.
Since API version 9, this API is supported in ArkTS widgets.| ## Events @@ -39,9 +39,12 @@ In addition to the [universal events](ts-universal-events-click.md), the followi | Name| Description| | -------- | -------- | -| onChange (callback: (event: [CheckboxGroupResult](#checkboxgroupresult)) => void ) |Triggered when the selected status of the check box group or any check box wherein changes due to a manual operation.| +| onChange (callback: (event: [CheckboxGroupResult](#checkboxgroupresult)) => void ) |Triggered when the selected status of the check box group or any check box wherein changes due to a manual operation.
Since API version 9, this API is supported in ArkTS widgets.| ## CheckboxGroupResult + +Since API version 9, this API is supported in ArkTS widgets. + | Name | Type | Description | | ------ | ------ | ------- | | name | Array<string> | Names of all the selected check boxes in the group.| @@ -49,6 +52,8 @@ In addition to the [universal events](ts-universal-events-click.md), the followi ## SelectStatus +Since API version 9, this API is supported in ArkTS widgets. + | Name | Description| | ----- | -------------------- | | All | All check boxes in the group are selected.| diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-datapanel.md b/en/application-dev/reference/arkui-ts/ts-basic-components-datapanel.md index a661b6abc36a1820fbcd634178d5cf2654911336..08d913698286ee0cb2cbfbc66386cd4a52a45bc9 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-datapanel.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-datapanel.md @@ -18,6 +18,8 @@ Not supported DataPanel(options:{values: number[], max?: number, type?: DataPanelType}) +Since API version 9, this API is supported in ArkTS widgets. + **Parameters** | Name | Type | Mandatory | Description| @@ -26,8 +28,10 @@ DataPanel(options:{values: number[], max?: number, type?: DataPanelType}) | max | number | No | - When set to a value greater than 0, this parameter indicates the maximum value in the **values** list.
- When set to a value equal to or smaller than 0, this parameter indicates the sum of values in the **values** list. The values are displayed in proportion.
Default value: **100**| | type8+ | [DataPanelType](#datapaneltype) | No| Type of the data panel (dynamic modification is not supported).
Default value: **DataPanelType.Circle**| - ## DataPanelType + +Since API version 9, this API is supported in ArkTS widgets. + | Name| Description| | -------| ------------ | | Line | Line data panel.| diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-divider.md b/en/application-dev/reference/arkui-ts/ts-basic-components-divider.md index e49501637b426dddbc21258651ba5ae556544d3d..cee85008404560b115d9dc021ed98e59da47d36a 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-divider.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-divider.md @@ -16,16 +16,18 @@ Not supported Divider() +Since API version 9, this API is supported in ArkTS widgets. + ## Attributes In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported. | Name | Type | Description | | ----------- | ---------- | ------------------ | -| vertical | boolean | Whether a vertical divider is used. **false**: A horizontal divider is used.
**true**: A vertical divider is used.
Default value: **false**| -| color | [ResourceColor](ts-types.md#resourcecolor) | Color of the divider.| -| strokeWidth | number \| string | Width of the divider.
Default value: **1**| -| lineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | Cap style of the divider.
Default value: **LineCapStyle.Butt**| +| vertical | boolean | Whether a vertical divider is used. **false**: A horizontal divider is used.
**true**: A vertical divider is used.
Default value: **false**
Since API version 9, this API is supported in ArkTS widgets.| +| color | [ResourceColor](ts-types.md#resourcecolor) | Color of the divider.
Since API version 9, this API is supported in ArkTS widgets.| +| strokeWidth | number \| string | Width of the divider.
Default value: **1**
Since API version 9, this API is supported in ArkTS widgets.| +| lineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | Cap style of the divider.
Default value: **LineCapStyle.Butt**
Since API version 9, this API is supported in ArkTS widgets.| ## Events diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-gauge.md b/en/application-dev/reference/arkui-ts/ts-basic-components-gauge.md index 5b4387a8c137fd14e9866238aef6785300f93918..2fe773177813164169dc35eddeba176a95fa4f89 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-gauge.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-gauge.md @@ -17,6 +17,8 @@ Not supported Gauge(options:{value: number, min?: number, max?: number}) +Since API version 9, this API is supported in ArkTS widgets. + **Parameters** | Name| Type| Mandatory| Description| @@ -31,16 +33,18 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the | Name| Type| Description| | -------- | -------- | -------- | -| value | number | Value of the chart. It can be dynamically changed.
Default value: **0**| -| startAngle | number | Start angle of the chart. The value **0** indicates 0 degrees, and a positive value indicates the clockwise direction.
Default value: **0**| -| endAngle | number | End angle of the chart. The value **0** indicates 0 degrees, and a positive value indicates the clockwise direction.
Default value: **360**| -| colors | Array<[ColorStop](#colorstop)> | Colors of the chart. Colors can be set for individual segments.| -| strokeWidth | Length | Stroke width of the chart.| +| value | number | Value of the chart. It can be dynamically changed.
Default value: **0**
Since API version 9, this API is supported in ArkTS widgets.| +| startAngle | number | Start angle of the chart. The value **0** indicates 0 degrees, and a positive value indicates the clockwise direction.
Default value: **0**
Since API version 9, this API is supported in ArkTS widgets.| +| endAngle | number | End angle of the chart. The value **0** indicates 0 degrees, and a positive value indicates the clockwise direction.
Default value: **360**
Since API version 9, this API is supported in ArkTS widgets.| +| colors | Array<[ColorStop](#colorstop)> | Colors of the chart. Colors can be set for individual segments.
Since API version 9, this API is supported in ArkTS widgets.| +| strokeWidth | Length | Stroke width of the chart.
Since API version 9, this API is supported in ArkTS widgets.| ## ColorStop Describes a gradient stop. +Since API version 9, this API is supported in ArkTS widgets. + | Name | Type | Description | | --------- | -------------------- | ------------------------------------------------------------ | | ColorStop | [[ResourceColor](ts-types.md#resourcecolor), number] | Type of the gradient stop. The first parameter indicates the color value. If it is set to a non-color value, the black color is used. The second parameter indicates the color weight. If it is set to a negative number or a non-numeric value, the color weight is 0, which means that the color is not displayed.| diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-image.md b/en/application-dev/reference/arkui-ts/ts-basic-components-image.md index 972a3ede54ffbc5040761299e3aea32572596470..a2162ebc684e42bd3f9cd9341fe18fd07505cb56 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-image.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-image.md @@ -23,11 +23,13 @@ Image(src: string | PixelMap | Resource) Obtains an image from the specified source for subsequent rendering and display. +Since API version 9, this API is supported in ArkTS widgets. + **Parameters** | Name| Type | Mandatory| Description | | ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | -| src | string \| [PixelMap](../apis/js-apis-image.md#pixelmap7) \| [Resource](ts-types.md#resource) | Yes | Image source. Both local and online images are supported.
When using an image referenced using a relative path, for example, **Image("common/test.jpg")**, the **\** component cannot be called across bundles or modules. Therefore, you are advised to use **\$r** to reference image resources that need to be used globally.
- The following image formats are supported: PNG, JPG, BMP, SVG, GIF.
\- Base64 strings are supported. The value format is data:image/[png\|jpeg\|bmp\|webp];base64,[base64 data], where [base64 data] is a Base64 string.
\- Strings with the **datashare://path** prefix are supported, which are used to access the image path provided by a data ability. Before loading images, the application must [request the required permissions](../../file-management/medialibrary-overview.md#requesting-permissions).
\- Strings with the **file:///data/storage** prefix are supported, which are used to read image resources in the **files** folder in the installation directory of the application. Ensure that the files in the directory package path have the read permission.| +| src | string\| [PixelMap](../apis/js-apis-image.md#pixelmap7) \| [Resource](ts-types.md#resource) | Yes | Image source. Both local and online images are supported.
When using an image referenced using a relative path, for example, **Image("common/test.jpg")**, the **\** component cannot be called across bundles or modules. Therefore, you are advised to use **\$r** to reference image resources that need to be used globally.
- The following image formats are supported: PNG, JPG, BMP, SVG, GIF.
\- Base64 strings are supported. The value format is data:image/[png\|jpeg\|bmp\|webp];base64,[base64 data], where [base64 data] is a Base64 string.
\- Strings with the **datashare://** path prefix are supported, which are used to access the image path provided by a Data ability. Before loading images, the application must [request the required permissions](../../file-management/medialibrary-overview.md#requesting-permissions).
\- Strings with the **file:///data/storage** prefix are supported, which are used to read image resources in the **files** folder in the installation directory of the application. Ensure that the application has the read permission to the files in the specified path.
- ArkTS widgets do not support the **http://**, **datashare://**, or **file://data/storage** path prefixes.
- ArkTS widgets do not support the [PixelMap](../apis/js-apis-image.md#pixelmap7) type.| ## Attributes @@ -35,19 +37,19 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the | Name | Type | Description | | --------------------- | ------------------------------------------------------- | ------------------------------------------------------------ | -| alt | string \| [Resource](ts-types.md#resource)| Placeholder image displayed during loading. Local images are supported. | -| objectFit | [ImageFit](ts-appendix-enums.md#imagefit) | Image scale mode.
Default value: **ImageFit.Cover** | -| objectRepeat | [ImageRepeat](ts-appendix-enums.md#imagerepeat) | Whether the image is repeated.
Default value: **ImageRepeat.NoRepeat**
**NOTE**
This attribute is not applicable to SVG images.| -| interpolation | [ImageInterpolation](#imageinterpolation) | Interpolation effect of the image. This attribute is intended to alleviate aliasing that occurs when a low-definition image is zoomed in.
Default value: **ImageInterpolation.None**
**NOTE**
This attribute is not applicable to SVG images.
This attribute is not applicable to **PixelMap** objects.| -| renderMode | [ImageRenderMode](#imagerendermode) | Rendering mode of the image.
Default value: **ImageRenderMode.Original**
**NOTE**
This attribute is not applicable to SVG images.| -| sourceSize | {
width: number,
height: number
} | Size of the decoded image. The original image is decoded into a **pixelMap** of the specified size, in px.
**NOTE**
This attribute is not applicable to **PixelMap** objects or SVG images.| -| matchTextDirection | boolean | Whether to display the image in the system language direction. When this parameter is set to true, the image is horizontally flipped in the right-to-left (RTL) language context.
Default value: **false** | -| fitOriginalSize | boolean | Whether to fit the component to the original size of the image source when the component size is not set.
Default value: **false** | -| fillColor | [ResourceColor](ts-types.md#resourcecolor) | Fill color. This attribute only applies to an SVG image. Once set, the fill color will replace that of the SVG image.| -| autoResize | boolean | Whether to resize the image source used for drawing based on the size of the display area during image decoding. This resizing can help reduce the memory usage.
Default value: **true**| -| syncLoad8+ | boolean | Whether to load the image synchronously. By default, the image is loaded asynchronously. During synchronous loading, the UI thread is blocked and the placeholder diagram is not displayed.
Default value: **false**| -| copyOption9+ | [CopyOptions](ts-appendix-enums.md#copyoptions9) | Whether the image can be copied. (SVG images cannot be copied.)
When **copyOption** is set to a value other than **CopyOptions.None**, the image can be copied in various manners, such as long pressing, right-clicking, or pressing Ctrl+C.
Default value: **CopyOptions.None**| -| colorFilter9+ | [ColorFilter](ts-types.md#colorfilter9) | Color filter of the image.| +| alt | string \| [Resource](ts-types.md#resource)| Placeholder image displayed during loading. Local images are supported.
Since API version 9, this API is supported in ArkTS widgets.| +| objectFit | [ImageFit](ts-appendix-enums.md#imagefit) | Image scale mode.
Default value: **ImageFit.Cover**
Since API version 9, this API is supported in ArkTS widgets.| +| objectRepeat | [ImageRepeat](ts-appendix-enums.md#imagerepeat) | Whether the image is repeated.
Default value: **ImageRepeat.NoRepeat**
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
This attribute is not applicable to SVG images.| +| interpolation | [ImageInterpolation](#imageinterpolation) | Interpolation effect of the image. This attribute is intended to alleviate aliasing that occurs when a low-definition image is zoomed in.
Default value: **ImageInterpolation.None**
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
This attribute is not applicable to SVG images.
This attribute is not applicable to **PixelMap** objects.| +| renderMode | [ImageRenderMode](#imagerendermode) | Rendering mode of the image.
Default value: **ImageRenderMode.Original**
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
This attribute is not applicable to SVG images.| +| sourceSize | {
width: number,
height: number
} | Size of the decoded image. The original image is decoded into a **pixelMap** of the specified size, in px.
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
This attribute is not applicable to **PixelMap** objects or SVG images.| +| matchTextDirection | boolean | Whether to display the image in the system language direction. When this parameter is set to true, the image is horizontally flipped in the right-to-left (RTL) language context.
Default value: **false**
Since API version 9, this API is supported in ArkTS widgets.| +| fitOriginalSize | boolean | Whether to fit the component to the original size of the image source when the component size is not set.
Default value: **false**
Since API version 9, this API is supported in ArkTS widgets.| +| fillColor | [ResourceColor](ts-types.md#resourcecolor) | Fill color. This attribute only applies to an SVG image. Once set, the fill color will replace that of the SVG image.
Since API version 9, this API is supported in ArkTS widgets.| +| autoResize | boolean | Whether to resize the image source used for drawing based on the size of the display area during image decoding. This resizing can help reduce the memory usage.
Default value: **true**
Since API version 9, this API is supported in ArkTS widgets.| +| syncLoad8+ | boolean | Whether to load the image synchronously. By default, the image is loaded asynchronously. During synchronous loading, the UI thread is blocked and the placeholder diagram is not displayed.
Default value: **false**
Since API version 9, this API is supported in ArkTS widgets.| +| copyOption9+ | [CopyOptions](ts-appendix-enums.md#copyoptions9) | Whether the image can be copied. (SVG images cannot be copied.)
When **copyOption** is set to a value other than **CopyOptions.None**, the image can be copied in various manners, such as long pressing, right-clicking, or pressing Ctrl+C.
Default value: **CopyOptions.None**
This API is supported in ArkTS widgets.| +| colorFilter9+ | [ColorFilter](ts-types.md#colorfilter9) | Color filter of the image.
This API is supported in ArkTS widgets.| > **NOTE** > @@ -56,6 +58,8 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the ### ImageInterpolation +Since API version 9, this API is supported in ArkTS widgets. + | Name | Description | | ------ | ------------------------- | | None | Interpolation image data is not used. | @@ -65,6 +69,8 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the ### ImageRenderMode +Since API version 9, this API is supported in ArkTS widgets. + | Name | Description | | -------- | --------------------- | | Original | The image is rendered based on the original image, including the color. | @@ -76,9 +82,9 @@ In addition to the [universal events](ts-universal-events-click.md), the followi | Name | Description | | ------------------------------------------------------------ | ------------------------------------------------------------ | -| onComplete(callback: (event?: { width: number, height: number, componentWidth: number,
componentHeight: number, loadingStatus: number }) => void) | Triggered when an image is successfully loaded. The size of the loaded image is returned.
- **width**: width of the image, in pixels.
- **height**: height of the image, in pixels.
- **componentWidth**: width of the container component, in pixels.
- **componentHeight**: height of the container component, in pixels.
- **loadingStatus**: image loading status.
| -| onError(callback: (event?: { componentWidth: number, componentHeight: number , message9+: string }) => void) | Triggered when an exception occurs during image loading.
- **componentWidth**: width of the container component, in pixels.
- **componentHeight**: height of the container component, in pixels.| -| onFinish(event: () => void) | Triggered when the animation playback in the loaded SVG image is complete. If the animation is an infinite loop, this callback is not triggered.| +| onComplete(callback: (event?: { width: number, height: number, componentWidth: number,
componentHeight: number, loadingStatus: number }) => void) | Triggered when an image is successfully loaded. The size of the loaded image is returned.
- **width**: width of the image, in pixels.
- **height**: height of the image, in pixels.
- **componentWidth**: width of the container component, in pixels.
- **componentHeight**: height of the container component, in pixels.
- **loadingStatus**: image loading status.
Since API version 9, this API is supported in ArkTS widgets.| +| onError(callback: (event?: { componentWidth: number, componentHeight: number , message9+: string }) => void) | Triggered when an exception occurs during image loading.
- **componentWidth**: width of the container component, in pixels.
- **componentHeight**: height of the container component, in pixels.
Since API version 9, this API is supported in ArkTS widgets.| +| onFinish(event: () => void) | Triggered when the animation playback in the loaded SVG image is complete. If the animation is an infinite loop, this callback is not triggered.
Since API version 9, this API is supported in ArkTS widgets.| ## Example @@ -156,7 +162,7 @@ struct ImageExample1 { ### Loading Online Images -The default network timeout period is 5 minutes for loading online images. When using an online image, you are advised to use **alt** to configure the placeholder image displayed during loading. If more flexible network configuration is required, use the [HTTP](../../connectivity/http-request.md) module in the SDK to send a network request, and then decode the returned data into a `PixelMap` in the **\** component. For details about image development, see [Image Development](../../media/image.md). The code snippet is as follows: +The default network timeout period is 5 minutes for loading online images. When using an online image, you are advised to use **alt** to configure the placeholder image displayed during loading. If more flexible network configuration is required, use the [HTTP](../../connectivity/http-request.md) module in the SDK to send a network request, and then decode the returned data into a **PixelMap** in the **\** component. For details about image development, see [Image Development](../../media/image.md). The code snippet is as follows: ```tsx // @ts-nocheck @@ -355,20 +361,16 @@ struct ImageExample3 { ### Rendering Sandbox Images ```ts -import fileio from '@ohos.fileio' -import fs from '@ohos.file.fs' -import context from '@ohos.application.context' +import fileio from '@ohos.fileio'; +import fs from '@ohos.file.fs'; +import context from '@ohos.app.ability.common'; @Entry @Component struct LoadImageExample { @State resourcesPath: string = '' @State sandboxPath: string = '' - context: context.AbilityContext - - aboutToAppear() { - this.context = getContext(this) as context.AbilityContext - } + context: context.UIAbility = getContext(this) as context.UIAbilityContext build() { Column() { diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-loadingprogress.md b/en/application-dev/reference/arkui-ts/ts-basic-components-loadingprogress.md index 6a39e1c9f17f7a7150728509cdc5fdc32658189a..4381ad3257af51b69cb968af826f2359e3f30398 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-loadingprogress.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-loadingprogress.md @@ -18,11 +18,13 @@ LoadingProgress() Creates a **\** component. +Since API version 9, this API is supported in ArkTS widgets. + ## Attributes | Name| Type| Description| | -------- | -------- | -------- | -| color | [ResourceColor](ts-types.md#resourcecolor) | Foreground color of the **\** component.| +| color | [ResourceColor](ts-types.md#resourcecolor) | Foreground color of the **\** component.
Since API version 9, this API is supported in ArkTS widgets.| ## Example diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-marquee.md b/en/application-dev/reference/arkui-ts/ts-basic-components-marquee.md index 9d905a65b1736315055c4b4582a5fa7cf5e8d00e..a6c0b032ca3d1234898704a15d87358800f737e7 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-marquee.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-marquee.md @@ -17,29 +17,31 @@ Not supported Marquee(value: { start: boolean, step?: number, loop?: number, fromStart?: boolean, src: string }) +Since API version 9, this API is supported in ArkTS widgets. + **Parameters** | Name| Type| Mandatory| Description| | -------- | -------- | -------- | -------- | | start | boolean | Yes| Whether to start scrolling.| | step | number | No| Scrolling step.
Default value: **6**, in vp| -| loop | number | No| Number of times the marquee will scroll. If the value is less than or equal to **0**, the marquee will scroll continuously.
Default value: **-1**| +| loop | number | No| Number of times the marquee will scroll. If the value is less than or equal to **0**, the marquee will scroll continuously.
Default value: **-1**
**NOTE**
Regardless of the value, the marquee scrolls only once on an ArkTS widget.| | fromStart | boolean | No| Whether the text scrolls from the start.
Default value: **true**| | src | string | Yes| Text to scroll.| ## Attributes -| Name | Type| Description | -| ---------- | -------- | ------------------------------------ | -| allowScale | boolean | Whether to allow text to scale.
Default value: **false**| +| Name | Type| Description | +| ---------- | -------- | ------------------------------------------------------------ | +| allowScale | boolean | Whether to allow text to scale.
Default value: **false**
Since API version 9, this API is supported in ArkTS widgets.| ## Events | Name| Description| | -------- | -------- | -| onStart(event: () => void) | Triggered when the marquee starts scrolling.| -| onBounce(event: () => void) | Triggered when the marquee has reached the end. This event will be triggered for multiple times if the **loop** attribute is not set to **1**.| -| onFinish(event: () => void) | Triggered when the marquee has finished the number of scrolling times set by the **loop** attribute.| +| onStart(event: () => void) | Triggered when the marquee starts scrolling.
Since API version 9, this API is supported in ArkTS widgets.| +| onBounce(event: () => void) | Triggered when the marquee has reached the end. This event will be triggered for multiple times if the **loop** attribute is not set to **1**.
Since API version 9, this API is supported in ArkTS widgets.| +| onFinish(event: () => void) | Triggered when the marquee has finished the number of scrolling times set by the **loop** attribute.
Since API version 9, this API is supported in ArkTS widgets.| ## Example diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-progress.md b/en/application-dev/reference/arkui-ts/ts-basic-components-progress.md index 98d9d6e2b1a2d0839071d2f72689d2cae6cb15ea..695d7f0cdff2c7381818f975e9eb31bf18a1d881 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-progress.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-progress.md @@ -18,17 +18,21 @@ Progress(options: {value: number, total?: number, type?: ProgressType}) Creates a progress indicator. +Since API version 9, this API is supported in ArkTS widgets. + **Parameters** | Name| Type| Mandatory| Description| | -------- | -------- | -------- | -------- | -| value | number | Yes| Current progress. If the value is less than 0, the value **0** is used. If the value is greater than that of **total**, the value of **total** is used.| -| total | number | No| Total progress.
Default value: **100**| -| type8+ | [ProgressType](#progresstype) | No| Style the progress indicator.
Default value: **ProgressType.Linear**| +| value | number | Yes| Current progress. If the value is less than 0, the value **0** is used. If the value is greater than that of **total**, the value of **total** is used.
Since API version 9, this API is supported in ArkTS widgets.| +| total | number | No| Total progress.
Default value: **100**
Since API version 9, this API is supported in ArkTS widgets.| +| type8+ | [ProgressType](#progresstype) | No| Style the progress indicator.
Default value: **ProgressType.Linear**
Since API version 9, this API is supported in ArkTS widgets.| | styledeprecated | [ProgressStyle](#progressstyle) | No| Type of the progress indicator.
This parameter is deprecated since API version 8. You are advised to use **type** instead.
Default value: **ProgressStyle.Linear**| ## ProgressType +Since API version 9, this API is supported in ArkTS widgets. + | Name| Description| | -------- | -------- | | Linear | Linear type. Since API version 9, the progress indicator adaptively switches to vertical layout if the height is greater than the width.| @@ -39,6 +43,8 @@ Creates a progress indicator. ## ProgressStyle +Since API version 9, this API is supported in ArkTS widgets. + | Name | Description | | --------- | ------------------------------------------------------------ | | Linear | Linear type.| @@ -51,10 +57,10 @@ Creates a progress indicator. | Name| Type| Description| | -------- | -------- | -------- | -| value | number | Current progress. If the value is less than 0, the value **0** is used. If the value is greater than that of **total**, the value of **total** is used. Invalid values do not take effect.| -| color | [ResourceColor](ts-types.md#resourcecolor) | Background color of the progress indicator.| -| backgroundColor | [ResourceColor](ts-types.md#resourcecolor) | Background color of the progress indicator.| -| style8+ | {
strokeWidth?: [Length](ts-types.md#length),
scaleCount?: number,
scaleWidth?: [Length](ts-types.md#length)
} | Component style.
- **strokeWidth**: stroke width of the progress indicator. It cannot be set in percentage. Since API version 9, if the stroke width of the ring progress bar is greater than or equal to the radius, the width is changed to half of the radius.
Default value: **4.0Vp**
- **scaleCount**: number of divisions on the determinate ring-type process indicator.
Default value: **120**
- **scaleWidth**: scale width of the ring progress bar. It cannot be set in percentage. If it is greater than the value of **strokeWidth**, the default scale width is used.
Default value: **2.0Vp**| +| value | number | Current progress. If the value is less than 0, the value **0** is used. If the value is greater than that of **total**, the value of **total** is used. Invalid values do not take effect.
Since API version 9, this API is supported in ArkTS widgets.| +| color | [ResourceColor](ts-types.md#resourcecolor) | Background color of the progress indicator.
Since API version 9, this API is supported in ArkTS widgets.| +| backgroundColor | [ResourceColor](ts-types.md#resourcecolor) | Background color of the progress indicator.
Since API version 9, this API is supported in ArkTS widgets.| +| style8+ | {
strokeWidth?: [Length](ts-types.md#length),
scaleCount?: number,
scaleWidth?: [Length](ts-types.md#length)
} | Component style.
- **strokeWidth**: stroke width of the progress indicator. It cannot be set in percentage. Since API version 9, if the stroke width of the ring progress bar is greater than or equal to the radius, the width is changed to half of the radius.
Default value: **4.0Vp**
- **scaleCount**: number of divisions on the determinate ring-type process indicator.
Default value: **120**
- **scaleWidth**: scale width of the ring progress bar. It cannot be set in percentage. If it is greater than the value of **strokeWidth**, the default scale width is used.
Default value: **2.0Vp**
Since API version 9, this API is supported in ArkTS widgets.| ## Example diff --git a/en/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md b/en/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md index f0fa614ed3781273928998927cf1bccd4c965efc..c79c37a1f2f89c290c2ea5b4d933ee02f61c3af5 100644 --- a/en/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md +++ b/en/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md @@ -1923,7 +1923,7 @@ setTransform(transform?: Matrix2D): void Resets the current transformation to the identity matrix, and then creates a new transformation matrix based on the specified **Matrix2D** object. This API is a void API. -Since API version 9, this API can be used for ArkTS widgets. +Since API version 9, this API is supported in ArkTS widgets. ### translate diff --git a/en/application-dev/reference/arkui-ts/ts-components-canvas-canvas.md b/en/application-dev/reference/arkui-ts/ts-components-canvas-canvas.md index 82628d7048635b4d907c1b933130abc44a40f938..769ac6cfbc8cef5eb1d07376e29f79fea3794915 100644 --- a/en/application-dev/reference/arkui-ts/ts-components-canvas-canvas.md +++ b/en/application-dev/reference/arkui-ts/ts-components-canvas-canvas.md @@ -14,6 +14,8 @@ Not supported Canvas(context?: CanvasRenderingContext2D) +Since API version 9, this API is supported in ArkTS widgets. + **Parameters** | Name | Type | Mandatory | Default Value | Description | @@ -30,7 +32,7 @@ In addition to the [universal events](ts-universal-events-click.md), the followi | Name | Parameter | Description | | ----------------------------- | ---- | -------------------- | -| onReady(event: () => void) | - | Triggered when a canvas is ready. When this event is triggered, the width and height of the canvas can be obtained, and you can use the canvas APIs to draw images.| +| onReady(event: () => void) | - | Triggered when a canvas is ready. When this event is triggered, the width and height of the canvas can be obtained, and you can use the canvas APIs to draw images.
Since API version 9, this API is supported in ArkTS widgets.| **Example** diff --git a/en/application-dev/reference/arkui-ts/ts-components-canvas-canvasgradient.md b/en/application-dev/reference/arkui-ts/ts-components-canvas-canvasgradient.md index 7c8b95655a9470ea7fd1951132f7b2c7974a45da..3dfd9e208ee1de61b82e2509041469caeef030a9 100644 --- a/en/application-dev/reference/arkui-ts/ts-components-canvas-canvasgradient.md +++ b/en/application-dev/reference/arkui-ts/ts-components-canvas-canvasgradient.md @@ -14,6 +14,8 @@ addColorStop(offset: number, color: string): void Adds a color stop for the **CanvasGradient** object based on the specified offset and gradient color. +Since API version 9, this API is supported in ArkTS widgets. + **Parameters** diff --git a/en/application-dev/reference/arkui-ts/ts-components-canvas-imagebitmap.md b/en/application-dev/reference/arkui-ts/ts-components-canvas-imagebitmap.md index 2de092ebab7c87d6e21d5fede32ec6c7e7a0f9b5..d6bc06bd61f2de584dc111bdc51a46ea44a94778 100644 --- a/en/application-dev/reference/arkui-ts/ts-components-canvas-imagebitmap.md +++ b/en/application-dev/reference/arkui-ts/ts-components-canvas-imagebitmap.md @@ -2,9 +2,21 @@ An **ImageBitmap** object stores pixel data rendered on a canvas. -> **NOTE** -> -> The APIs of this module are supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. +> **NOTE** +> +> The APIs of this module are supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. + +## APIs + +ImageBitmap(src: string) + +Since API version 9, this API is supported in ArkTS widgets. + +**Parameters** + +| Name| Type| Mandatory| Default Value| Description | +| ------ | -------- | ---- | ------ | ------------------------------------------------------------ | +| src | string | Yes | - | Image source.
**NOTE**
ArkTS widgets do not support the **http://**, **datashare://**, or **file://data/storage** path prefixes.| @@ -12,8 +24,8 @@ An **ImageBitmap** object stores pixel data rendered on a canvas. | Name| Type| Description| | -------- | -------- | -------- | -| width | number | Pixel width of the **ImageBitmap** object.| -| height | number | Pixel height of the **ImageBitmap** object.| +| width | number | Pixel width of the **ImageBitmap** object.
Since API version 9, this API is supported in ArkTS widgets.| +| height | number | Pixel height of the **ImageBitmap** object.
Since API version 9, this API is supported in ArkTS widgets.| **Example** @@ -54,3 +66,5 @@ An **ImageBitmap** object stores pixel data rendered on a canvas. close() Releases all graphics resources associated with this **ImageBitmap** object. This API is a void API. + +Since API version 9, this API is supported in ArkTS widgets. diff --git a/en/application-dev/reference/arkui-ts/ts-components-canvas-imagedata.md b/en/application-dev/reference/arkui-ts/ts-components-canvas-imagedata.md index a0e91d8853652b63091559dc7cea73df658a2920..7e03641e1383e7df649a64c9a579808840953650 100644 --- a/en/application-dev/reference/arkui-ts/ts-components-canvas-imagedata.md +++ b/en/application-dev/reference/arkui-ts/ts-components-canvas-imagedata.md @@ -12,9 +12,9 @@ An **ImageData** object stores pixel data rendered on a canvas. | Name| Type| Description| | -------- | -------- | -------- | -| width | number | Actual width of the rectangle on the canvas, in pixels.| -| height | number | Actual height of the rectangle on the canvas, in pixels.| -| data | Uint8ClampedArray | A one-dimensional array of color values. The values range from 0 to 255.| +| width | number | Actual width of the rectangle on the canvas, in pixels.
Since API version 9, this API is supported in ArkTS widgets.| +| height | number | Actual height of the rectangle on the canvas, in pixels.
Since API version 9, this API is supported in ArkTS widgets.| +| data | Uint8ClampedArray | A one-dimensional array of color values. The values range from 0 to 255.
Since API version 9, this API is supported in ArkTS widgets.| > **NOTE** > diff --git a/en/application-dev/reference/arkui-ts/ts-components-canvas-path2d.md b/en/application-dev/reference/arkui-ts/ts-components-canvas-path2d.md index 9e783167f160f8cdb627d33abaad0ac4212be081..479da35d6e8b18977663305129ebce91e786ae23 100644 --- a/en/application-dev/reference/arkui-ts/ts-components-canvas-path2d.md +++ b/en/application-dev/reference/arkui-ts/ts-components-canvas-path2d.md @@ -14,6 +14,8 @@ addPath(path: path2D, transform?:Matrix2D): void Adds a path to this path. +Since API version 9, this API is supported in ArkTS widgets. + **Parameters** | Name| Type| Mandatory| Default Value| Description| @@ -61,6 +63,8 @@ closePath(): void Moves the current point of the path back to the start point of the path, and draws a straight line between the current point and the start point. If the shape has already been closed or has only one point, this method does nothing. +Since API version 9, this API is supported in ArkTS widgets. + **Example** ```ts @@ -101,6 +105,8 @@ moveTo(x: number, y: number): void Moves the current coordinate point of the path to the target point, without drawing a line during the movement. +Since API version 9, this API is supported in ArkTS widgets. + **Parameters** | Name| Type| Mandatory| Default Value| Description| @@ -148,6 +154,8 @@ lineTo(x: number, y: number): void Draws a straight line from the current point to the target point. +Since API version 9, this API is supported in ArkTS widgets. + **Parameters** | Name| Type| Mandatory| Default Value| Description| @@ -196,6 +204,8 @@ bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, Draws a cubic bezier curve on the canvas. +Since API version 9, this API is supported in ArkTS widgets. + **Parameters** | Name| Type| Mandatory| Default Value| Description| @@ -245,6 +255,8 @@ quadraticCurveTo(cpx: number, cpy: number, x: number ,y: number): void Draws a quadratic curve on the canvas. +Since API version 9, this API is supported in ArkTS widgets. + **Parameters** | Name| Type| Mandatory| Default Value| Description| @@ -292,6 +304,8 @@ arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, Draws an arc on the canvas. +Since API version 9, this API is supported in ArkTS widgets. + **Parameters** | Name| Type| Mandatory| Default Value| Description| @@ -340,6 +354,8 @@ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void Draws an arc based on the radius and points on the arc. +Since API version 9, this API is supported in ArkTS widgets. + **Parameters** | Name| Type| Mandatory| Default Value| Description| @@ -387,6 +403,8 @@ ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number Draws an ellipse in the specified rectangular region on the canvas. +Since API version 9, this API is supported in ArkTS widgets. + **Parameters** | Name| Type| Mandatory| Default Value| Description| @@ -437,6 +455,8 @@ rect(x: number, y: number, w: number, h: number): void Creates a rectangle on the canvas. +Since API version 9, this API is supported in ArkTS widgets. + **Parameters** | Name| Type| Mandatory| Default Value| Description| diff --git a/en/application-dev/reference/arkui-ts/ts-container-badge.md b/en/application-dev/reference/arkui-ts/ts-container-badge.md index 98f9a6f785e635125a6c8837526e9c6b1ac9084d..83529bd0aee34fc253b3d8f46da5fe2cce6b98cc 100644 --- a/en/application-dev/reference/arkui-ts/ts-container-badge.md +++ b/en/application-dev/reference/arkui-ts/ts-container-badge.md @@ -18,7 +18,10 @@ This component supports only one child component. Creates a badge. +Since API version 9, this API is supported in ArkTS widgets. + **Parameters** + | Name| Type| Mandatory| Default Value| Description| | -------- | -------- | -------- | -------- | -------- | | count | number | Yes| - | Number of notifications.| @@ -30,6 +33,8 @@ Creates a badge. Creates a badge based on the given string. +Since API version 9, this API is supported in ArkTS widgets. + **Parameters** | Name| Type| Mandatory| Default Value| Description| @@ -40,6 +45,8 @@ Creates a badge based on the given string. ## BadgePosition +Since API version 9, this API is supported in ArkTS widgets. + | Name| Description| | -------- | -------- | | RightTop | The badge is displayed in the upper right corner of the parent component.| @@ -48,6 +55,8 @@ Creates a badge based on the given string. ## BadgeStyle +Since API version 9, this API is supported in ArkTS widgets. + | Name | Type | Mandatory| Default Value | Description | | ---------- | ------------------------------------------ | ---- | ----------- | ------------------------------------------- | | color | [ResourceColor](ts-types.md#resourcecolor) | No | Color.White | Font color. | diff --git a/en/application-dev/reference/arkui-ts/ts-container-column.md b/en/application-dev/reference/arkui-ts/ts-container-column.md index 913ba5cd08576515707930d267cfa72f860f3d7a..d5776796955d7a114fa2da56d69733a541307f7e 100644 --- a/en/application-dev/reference/arkui-ts/ts-container-column.md +++ b/en/application-dev/reference/arkui-ts/ts-container-column.md @@ -16,11 +16,13 @@ Supported Column(value?: {space?: string | number}) +Since API version 9, this API is supported in ArkTS widgets. + **Parameters** | Name| Type| Mandatory| Description| | -------- | -------- | -------- | -------- | -| space | string \| number | No| Vertical spacing between two adjacent child components.
Since API version 9, this parameter does not take effect when it is set to a negative number.
Default value: **0**| +| space | string \| number | No| Vertical spacing between two adjacent child components.
Since API version 9, this parameter does not take effect when it is set to a negative number.
Default value: **0** | ## Attributes @@ -28,8 +30,8 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the | Name| Type| Description| | -------- | -------- | -------- | -| alignItems | [HorizontalAlign](ts-appendix-enums.md#horizontalalign) | Alignment mode of the child components in the horizontal direction.
Default value: **HorizontalAlign.Center**| -| justifyContent8+ | [FlexAlign](ts-container-flex.md) | Alignment mode of the child components in the vertical direction.
Default value: **FlexAlign.Start**| +| alignItems | [HorizontalAlign](ts-appendix-enums.md#horizontalalign) | Alignment mode of the child components in the horizontal direction.
Default value: **HorizontalAlign.Center**
Since API version 9, this API is supported in ArkTS widgets.| +| justifyContent8+ | [FlexAlign](ts-appendix-enums.md#flexalign) | Alignment mode of the child components in the vertical direction.
Default value: **FlexAlign.Start**
Since API version 9, this API is supported in ArkTS widgets.| ## Example diff --git a/en/application-dev/reference/arkui-ts/ts-container-counter.md b/en/application-dev/reference/arkui-ts/ts-container-counter.md index fe9baa47e05b60a067545c3d6759373b524ee416..69869ef7610fb7359c194afc45da866d5c96df08 100644 --- a/en/application-dev/reference/arkui-ts/ts-container-counter.md +++ b/en/application-dev/reference/arkui-ts/ts-container-counter.md @@ -16,6 +16,8 @@ Supported Counter() +Since API version 9, this API is supported in ArkTS widgets. + ## Events @@ -23,8 +25,8 @@ The universal events and gestures are not supported. Only the following events a | Name| Description| | -------- | -------- | -| onInc(event: () => void) | Invoked when the number of monitored objects is increased.| -| onDec(event: () => void) | Invoked when the number of monitored objects is decreased.| +| onInc(event: () => void) | Invoked when the number of monitored objects is increased.
Since API version 9, this API is supported in ArkTS widgets.| +| onDec(event: () => void) | Invoked when the number of monitored objects is decreased.
Since API version 9, this API is supported in ArkTS widgets.| ## Example diff --git a/en/application-dev/reference/arkui-ts/ts-container-flex.md b/en/application-dev/reference/arkui-ts/ts-container-flex.md index e29fd91fd85ab9142191700d2b73042fe7f77440..6a5908578950850fbedda096b33f03c858097cd0 100644 --- a/en/application-dev/reference/arkui-ts/ts-container-flex.md +++ b/en/application-dev/reference/arkui-ts/ts-container-flex.md @@ -3,7 +3,7 @@ The **\** component allows for flexible layout of child components. > **NOTE** -> +> > - This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. > - The **\** component adapts the layout of flex items during rendering. This may affect the performance. Therefore, you are advised to use **[\](ts-container-column.md)** or **[\](ts-container-row.md)** instead under scenarios where consistently high performance is required. @@ -19,11 +19,13 @@ Flex(value?: { direction?: FlexDirection, wrap?: FlexWrap, justifyContent?: Fle Creates a standard **\** component. +Since API version 9, this API is supported in ArkTS widgets. + **Parameters** | Name | Type | Mandatory | Default Value | Description | | -------------- | ---------------------------------------- | ---- | ----------------- | ---------------------------------------- | -| direction | [FlexDirection](ts-appendix-enums.md#flexdirection) | No | FlexDirection.Row | Direction in which child components are arranged in the **\** component, that is, the direction of the main axis. | +| direction | [FlexDirection](ts-appendix-enums.md#flexdirection) | No | FlexDirection.Row | Direction in which child components are arranged in the **\** component, that is, the direction of the main axis. | | wrap | [FlexWrap](ts-appendix-enums.md#flexwrap) | No | FlexWrap.NoWrap | Whether the **\** component has a single line or multiple lines. | | justifyContent | [FlexAlign](ts-appendix-enums.md#flexalign) | No | FlexAlign.Start | Alignment mode of the child components in the **\** component along the main axis. | | alignItems | [ItemAlign](ts-appendix-enums.md#itemalign) | No | ItemAlign.Start | Alignment mode of the child components in the **\** component along the cross axis. | diff --git a/en/application-dev/reference/arkui-ts/ts-container-gridcol.md b/en/application-dev/reference/arkui-ts/ts-container-gridcol.md index 33870e0f047cd048aad3f5e1e049da82cbe1202c..cff58a0505258230f3bb60a45ffba2a2c2553c7a 100644 --- a/en/application-dev/reference/arkui-ts/ts-container-gridcol.md +++ b/en/application-dev/reference/arkui-ts/ts-container-gridcol.md @@ -13,6 +13,8 @@ This component can contain only one child component. GridCol(option?:{span?: number | GridColColumnOption, offset?: number | GridColColumnOption, order?: number | GridColColumnOption}) +Since API version 9, this API is supported in ArkTS widgets. + **Parameters** | Name| Type | Mandatory| Description | @@ -25,12 +27,14 @@ GridCol(option?:{span?: number | GridColColumnOption, offset?: number | GridColC | Name| Type | Mandatory| Description | | ------ | ----------------------------- | ---- | ------------------------------------------------------------ | -| span | number \| GridColColumnOption | No | Number of occupied columns. If it is set to **0**, the element is not involved in layout calculation, that is, the element is not rendered.
Default value: **1**| -| offset | number \| GridColColumnOption | No | Number of offset columns relative to the previous child component of the grid
Default value: **0** | -| order | number \| GridColColumnOption | No | Sequence number of the element. Child components of the grid are sorted in ascending order based on their sequence numbers.
Default value: **0**| +| span | number \| GridColColumnOption | No | Number of occupied columns. If it is set to **0**, the element is not involved in layout calculation, that is, the element is not rendered.
Default value: **1**
Since API version 9, this API is supported in ArkTS widgets.| +| offset | number \| GridColColumnOption | No | Number of offset columns relative to the previous child component of the grid
Default value: **0**
Since API version 9, this API is supported in ArkTS widgets.| +| order | number \| GridColColumnOption | No | Sequence number of the element. Child components of the grid are sorted in ascending order based on their sequence numbers.
Default value: **0**
Since API version 9, this API is supported in ArkTS widgets.| ## GridColColumnOption +Since API version 9, this API is supported in ArkTS widgets. + | Name | Type | Mandatory | Description | | ----- | ------ | ---- | ---------------------------------------- | | xs | number | No | Device of the minimum size. | @@ -38,7 +42,7 @@ GridCol(option?:{span?: number | GridColColumnOption, offset?: number | GridColC | md | number | No | Medium-sized device. | | lg | number | No | Large-sized device. | | xl | number | No | Extra-large-sized device. | -| xxl | number | No | Ultra-large-sized device. | +| xxl | number | No | Ultra-large-sized device. | The values of `span`, `offset`, and `order` attributes are inherited in the sequence of `xs`, `sm`, `md`, `lg`, `xl`, and `xxl`. If no value is set for a breakpoint, the value is obtained from the previous breakpoint. diff --git a/en/application-dev/reference/arkui-ts/ts-container-gridrow.md b/en/application-dev/reference/arkui-ts/ts-container-gridrow.md index 266360307d199b1bfcbc713829b861efe66044c1..371195f436b5a1e0d312bfcddcd07d1aec5a2759 100644 --- a/en/application-dev/reference/arkui-ts/ts-container-gridrow.md +++ b/en/application-dev/reference/arkui-ts/ts-container-gridrow.md @@ -15,7 +15,10 @@ This component can contain the **\** child component. ## APIs GridRow(option?: {columns?: number | GridRowColumnOption, gutter?: Length | GutterOption, breakpoints?: BreakPoints, direction?: GridRowDirection}) +Since API version 9, this API is supported in ArkTS widgets. + **Parameters** + | Name|Type|Mandatory|Description| |-----|-----|----|----| |gutter|Length \| GutterOption| No |Gutter of the grid layout. **x** indicates the horizontal direction.| @@ -25,6 +28,8 @@ GridRow(option?: {columns?: number | GridRowColumnOption, gutter?: Length | Gutt ## GutterOption +Since API version 9, this API is supported in ArkTS widgets. + | Name | Type | Mandatory | Description | | ----- | ------ | ---- | ---------------------------------------- | | x | Length \| GridRowSizeOption | No | Gutter in the horizontal direction. | @@ -34,6 +39,8 @@ GridRow(option?: {columns?: number | GridRowColumnOption, gutter?: Length | Gutt Describes the numbers of grid columns for different device width types. +Since API version 9, this API is supported in ArkTS widgets. + | Name | Type | Mandatory | Description | | ----- | ------ | ---- | ---------------------------------------- | | xs | number | No | Device of the minimum size. | @@ -47,6 +54,8 @@ Describes the numbers of grid columns for different device width types. Describes the gutter sizes for different device width types. +Since API version 9, this API is supported in ArkTS widgets. + | Name | Type | Mandatory | Description | | ----- | ------ | ---- | ---------------------------------------- | | xs | Length | No | Device of the minimum size. | @@ -58,6 +67,8 @@ Describes the gutter sizes for different device width types. ## BreakPoints +Since API version 9, this API is supported in ArkTS widgets. + | Name | Type | Mandatory | Description | | ----- | ------ | ---- | ---------------------------------------- | | value | Array<string> | No | Array of monotonically increasing breakpoints.
Default value: **["320vp", "520vp", "840vp"]** | @@ -72,12 +83,18 @@ Describes the gutter sizes for different device width types. ``` ## BreakpointsReference + +Since API version 9, this API is supported in ArkTS widgets. + | Name| Description| | -------- | -------- | | WindowSize | The window is used as a reference.| | ComponentSize | The container is used as a reference.| ## GridRowDirection + +Since API version 9, this API is supported in ArkTS widgets. + | Name| Description| | -------- | -------- | | Row | Grid elements are arranged in the row direction.| @@ -118,6 +135,8 @@ The [universal attributes](ts-universal-attributes-size.md) are supported. onBreakpointChange(callback: (breakpoints: string) => void) +Since API version 9, this API is supported in ArkTS widgets. + **Parameters** | Name | Type | Mandatory | Description | diff --git a/en/application-dev/reference/arkui-ts/ts-container-list.md b/en/application-dev/reference/arkui-ts/ts-container-list.md index abcb8054fbf5bd266934a5d606b6beb8b87612d7..955373a505757cde3a8e9e6ef684464191362d35 100644 --- a/en/application-dev/reference/arkui-ts/ts-container-list.md +++ b/en/application-dev/reference/arkui-ts/ts-container-list.md @@ -17,6 +17,8 @@ This component supports the **[\](ts-container-listitem.md)** and **[\ List(value?:{space?: number | string, initialIndex?: number, scroller?: Scroller}) +Since API version 9, this API is supported in ArkTS widgets. + **Parameters** | Name| Type| Mandatory| Description| @@ -31,20 +33,22 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the | Name| Type| Description| | -------- | -------- | -------- | -| listDirection | [Axis](ts-appendix-enums.md#axis) | Direction in which the list items are arranged.
Default value: **Axis.Vertical**| -| divider | {
strokeWidth: [Length](ts-types.md#length),
color?:[ResourceColor](ts-types.md),
startMargin?: Length,
endMargin?: Length
} \| null | Style of the divider for the list items. By default, there is no divider.
- **strokeWidth**: stroke width of the divider.
- **color**: color of the divider.
- **startMargin**: distance between the divider and the start edge of the list.
- **endMargin**: distance between the divider and the end edge of the list.| -| scrollBar | [BarState](ts-appendix-enums.md#barstate) | Scrollbar status.
Default value: **BarState.Off**| -| cachedCount | number | Number of list items or list item groups to be preloaded. A list item group is calculated as a whole, and all list items of the group are preloaded at the same time. For details, see [Minimizing White Blocks During Swiping](../../ui/ui-ts-performance-improvement-recommendation.md#minimizing-white-blocks-during-swiping).
Default value: **1**| +| listDirection | [Axis](ts-appendix-enums.md#axis) | Direction in which the list items are arranged.
Default value: **Axis.Vertical**
Since API version 9, this API is supported in ArkTS widgets.| +| divider | {
strokeWidth: [Length](ts-types.md#length),
color?:[ResourceColor](ts-types.md#resourcecolor),
startMargin?: Length,
endMargin?: Length
} \| null | Style of the divider for the list items. By default, there is no divider.
- **strokeWidth**: stroke width of the divider.
- **color**: color of the divider.
- **startMargin**: distance between the divider and the start edge of the list.
- **endMargin**: distance between the divider and the end edge of the list.
Since API version 9, this API is supported in ArkTS widgets.| +| scrollBar | [BarState](ts-appendix-enums.md#barstate) | Scrollbar status.
Default value: **BarState.Off**
Since API version 9, this API is supported in ArkTS widgets.| +| cachedCount | number | Number of list items or list item groups to be preloaded. A list item group is calculated as a whole, and all list items of the group are preloaded at the same time. For details, see [Minimizing White Blocks During Swiping](../../ui/ui-ts-performance-improvement-recommendation.md#minimizing-white-blocks-during-swiping).
Default value: **1**
Since API version 9, this API is supported in ArkTS widgets.| | editMode | boolean | Whether to enter editing mode.
Default value: **false** | -| edgeEffect | [EdgeEffect](ts-appendix-enums.md#edgeeffect) | Scroll effect.
Default value: **EdgeEffect.Spring**| -| chainAnimation | boolean | Whether to display chained animations on this list when it slides or its top or bottom is dragged. The list items are separated with even space, and one item animation starts after the previous animation during basic sliding interactions. The chained animation effect is similar with spring physics.
Default value: **false**
- **false**: No chained animations are displayed.
- **true**: Chained animations are displayed.| -| multiSelectable8+ | boolean | Whether to enable mouse frame selection.
Default value: **false**
- **false**: The mouse frame selection is disabled.
- **true**: The mouse frame selection is enabled.| -| lanes9+ | number \| [LengthConstrain](ts-types.md#lengthconstrain) | In the following description, **listDirection** is set to **Axis.Vertical**:
Number of columns in which the list items are arranged along the cross axis.
Default value: **1**
The rules are as follows:
- If the value is set to a number, the column width is determined based on the specified number and the cross-axis width of the **\** component.
- If the value is set to {minLength, maxLength}, the number of columns is adjusted adaptively based on the width of the **\** component, ensuring that the width respects the {minLength, maxLength} constraints during adaptation. The **minLength** constraint is prioritized. For example, if **lanes** is set to **{minLength: 40vp, maxLength: 60vp}** and the width of the **\** component is 70 vp, the list items are arranged in one column with their alignment compliant with the **alignListItem** settings. If the width of the **\** component is changed to 80 vp, which is twice the value of **minLength**, the list items are arranged in two columns.| -| alignListItem9+ | ListItemAlign | Alignment mode of list items along the cross axis when: Cross-axis width of the **\** component > Cross-axis width of list items x Value of **lanes**.
Default value: **ListItemAlign.Start**| -| sticky9+ | StickyStyle | Whether to pin the header to the top or the footer to the bottom in the **\** component. This attribute is used together with the **[\](ts-container-listitemgroup.md)** component.
Default value: **StickyStyle.None**
**NOTE**
The **sticky** attribute can be set to **StickyStyle.Header** or \| **StickyStyle.Footer** to support both the pin-to-top and pin-to-bottom features.| +| edgeEffect | [EdgeEffect](ts-appendix-enums.md#edgeeffect) | Scroll effect.
Default value: **EdgeEffect.Spring**
Since API version 9, this API is supported in ArkTS widgets.| +| chainAnimation | boolean | Whether to display chained animations on this list when it slides or its top or bottom is dragged. The list items are separated with even space, and one item animation starts after the previous animation during basic sliding interactions. The chained animation effect is similar with spring physics.
Default value: **false**
- **false**: No chained animations are displayed.
- **true**: Chained animations are displayed.
Since API version 9, this API is supported in ArkTS widgets.| +| multiSelectable8+ | boolean | Whether to enable mouse frame selection.
Default value: **false**
- **false**: The mouse frame selection is disabled.
- **true**: The mouse frame selection is enabled.
Since API version 9, this API is supported in ArkTS widgets.| +| lanes9+ | number \| [LengthConstrain](ts-types.md#lengthconstrain) | In the following description, **listDirection** is set to **Axis.Vertical**:
Number of columns in which the list items are arranged along the cross axis.
Default value: **1**
The rules are as follows:
- If the value is set to a number, the column width is determined based on the specified number and the cross-axis width of the **\** component.
- If the value is set to {minLength, maxLength}, the number of columns is adjusted adaptively based on the width of the **\** component, ensuring that the width respects the {minLength, maxLength} constraints during adaptation. The **minLength** constraint is prioritized. For example, if **lanes** is set to **{minLength: 40vp, maxLength: 60vp}** and the width of the **\** component is 70 vp, the list items are arranged in one column with their alignment compliant with the **alignListItem** settings. If the width of the **\** component is changed to 80 vp, which is twice the value of **minLength**, the list items are arranged in two columns.
This API is supported in ArkTS widgets.| +| alignListItem9+ | ListItemAlign | Alignment mode of list items along the cross axis when: Cross-axis width of the **\** component > Cross-axis width of list items x Value of **lanes**.
Default value: **ListItemAlign.Start**
This API is supported in ArkTS widgets.| +| sticky9+ | StickyStyle | Whether to pin the header to the top or the footer to the bottom in the **\** component. This attribute is used together with the **[\](ts-container-listitemgroup.md)** component.
Default value: **StickyStyle.None**
This API is supported in ArkTS widgets.
**NOTE**
The **sticky** attribute can be set to **StickyStyle.Header** or \| **StickyStyle.Footer** to support both the pin-to-top and pin-to-bottom features.| ## ListItemAlign9+ +This API is supported in ArkTS widgets. + | Name | Description | | ------ | -------------------------------------- | | Start | The list items are packed toward the start edge of the **\** component along the cross axis.| @@ -53,6 +57,8 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the ## StickyStyle9+ +This API is supported in ArkTS widgets. + | Name | Description | | ------ | -------------------------------------- | | None | In the **\** component, the header is not pinned to the top, and the footer is not pinned to the bottom.| @@ -66,13 +72,13 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the | Name| Description| | -------- | -------- | | onItemDelete(event: (index: number) => boolean) | Triggered when a list item is deleted.
- **index**: index of the deleted list item. | -| onScroll(event: (scrollOffset: number, scrollState: ScrollState) => void) | Triggered when the list scrolls.
- **scrollOffset**: scroll offset.
- **[scrollState](#scrollstate)**: current scroll state.| -| onScrollIndex(event: (start: number, end: number) => void) | Triggered when scrolling starts.
When calculating the index value, the **\** accounts for one index value as a whole, and the index values of the list items within are not calculated.
- **start**: index of the scroll start position.
- **end**: index of the scroll end position.| -| onReachStart(event: () => void) | Triggered when the list reaches the start position.| -| onReachEnd(event: () => void) | Triggered when the list reaches the end position.| -| onScrollFrameBegin9+(event: (offset: number, state: ScrollState) => { offsetRemain }) | Triggered when the list starts to scroll. The input parameters indicate the amount by which the list will scroll. The event handler then works out the amount by which the list needs to scroll based on the real-world situation and returns the result.
\- **offset**: amount to scroll by.
\- **state**: current sliding status.
- **offsetRemain**: required amount to scroll by in the horizontal direction.| -| onScrollStart9+(event: () => void) | Triggered when the list starts scrolling initiated by the user's finger dragging the **\** component or its scrollbar. This event will not be triggered if the scrolling is initiated by using [Scroller](ts-container-scroll.md#scroller).| -| onScrollStop(event: () => void) | Triggered when the list stops scrolling after the user's finger leaves the screen. This event will not be triggered if the scrolling is initiated by using [Scroller](ts-container-scroll.md#scroller).| +| onScroll(event: (scrollOffset: number, scrollState: ScrollState) => void) | Triggered when the list scrolls.
- **scrollOffset**: scroll offset.
- **[scrollState](#scrollstate)**: current scroll state.
Since API version 9, this API is supported in ArkTS widgets.| +| onScrollIndex(event: (start: number, end: number) => void) | Triggered when scrolling starts.
When calculating the index value, the **\** accounts for one index value as a whole, and the index values of the list items within are not calculated.
- **start**: index of the scroll start position.
- **end**: index of the scroll end position.
Since API version 9, this API is supported in ArkTS widgets.| +| onReachStart(event: () => void) | Triggered when the list reaches the start position.
Since API version 9, this API is supported in ArkTS widgets.| +| onReachEnd(event: () => void) | Triggered when the list reaches the end position.
Since API version 9, this API is supported in ArkTS widgets.| +| onScrollFrameBegin9+(event: (offset: number, state: ScrollState) => { offsetRemain }) | Triggered when the list starts to scroll. The input parameters indicate the amount by which the list will scroll. The event handler then works out the amount by which the list needs to scroll based on the real-world situation and returns the result.
\- **offset**: amount to scroll by.
\- **state**: current sliding status.
- **offsetRemain**: actual amount by which the list scrolls.
This API is supported in ArkTS widgets.| +| onScrollStart9+(event: () => void) | Triggered when the list starts scrolling initiated by the user's finger dragging the **\** component or its scrollbar. This event is also triggered when the animation contained in the scrolling triggered by [Scroller](ts-container-scroll.md#scroller) starts.| +| onScrollStop(event: () => void) | Triggered when the list stops scrolling after the user's finger leaves the screen. This event is also triggered when the animation contained in the scrolling triggered by [Scroller](ts-container-scroll.md#scroller) stops.
Since API version 9, this API is supported in ArkTS widgets.| | onItemMove(event: (from: number, to: number) => boolean) | Triggered when a list item moves.
- **from**: index of the item before moving.
- **to**: index of the item after moving.| | onItemDragStart(event: (event: ItemDragInfo, itemIndex: number) => ((() => any) \| void) | Triggered when a list element starts to be dragged.
- **event**: See [ItemDragInfo](ts-container-grid.md#itemdraginfo).
- **itemIndex**: index of the dragged list element.| | onItemDragEnter(event: (event: ItemDragInfo) => void) | Triggered when the dragged item enters the drop target of the list.
- **event**: See [ItemDragInfo](ts-container-grid.md#itemdraginfo).| @@ -82,6 +88,8 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the ## ScrollState +Since API version 9, this API is supported in ArkTS widgets. + | Name | Description | | ------ | ------------------------- | | Idle | Not scrolling. | diff --git a/en/application-dev/reference/arkui-ts/ts-container-listitem.md b/en/application-dev/reference/arkui-ts/ts-container-listitem.md index 78470aeaf2f73f9ad43bc3638a6122a095c488e2..b6bae6b6d852e764e125e389666d079b6bd653a1 100644 --- a/en/application-dev/reference/arkui-ts/ts-container-listitem.md +++ b/en/application-dev/reference/arkui-ts/ts-container-listitem.md @@ -16,6 +16,8 @@ This component can contain a single child component. ListItem(value?: string) +Since API version 9, this API is supported in ArkTS widgets. + ## Attributes In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported. @@ -24,7 +26,7 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the | -------- | -------- | -------- | | sticky(deprecated) | [Sticky](#stickydeprecated) | Sticky effect of the list item.
Default value: **Sticky.None**
This API is deprecated since API version 9. You are advised to use **sticky** of the [\](ts-container-list.md#attributes) component.| | editable | boolean \| [EditMode](#editmode) | Whether to enter editing mode, where the list item can be deleted or moved.
Default value: **false** | -| selectable8+ | boolean | Whether the current list item is selectable by mouse drag.
**NOTE**
This attribute takes effect only when mouse frame selection is enabled for the parent **\** container.
Default value: **true**| +| selectable8+ | boolean | Whether the current list item is selectable by mouse drag.
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
This attribute takes effect only when mouse frame selection is enabled for the parent **\** container.
Default value: **true**| | swipeAction9+ | {
start?: CustomBuilder,
end?:CustomBuilder,
edgeEffect?: [SwipeEdgeEffect](#swipeedgeeffect9),
} | Component displayed when the list item is swiped out from the screen edge.
- **start**: component on the left of the list item when the item is swiped to the right (in vertical list layout) or component above the list item when the item is swiped down (in horizontal list layout).
- **end**: component on the right of the list item when the item is swiped to the left (in vertical list layout) or component below the list item when the item is swiped up (in horizontal list layout).
- **edgeEffect**: scroll effect.
| ## Sticky(deprecated) @@ -53,7 +55,7 @@ This API is deprecated since API version 9. You are advised to use [stickyStyle] | Name| Description| | -------- | -------- | -| onSelect(event: (isSelected: boolean) => void)8+ | Triggered when the selected state of the **\** changes.
**isSelected**: Returns **true** if the **\** is selected by mouse drag; returns **false** otherwise.| +| onSelect(event: (isSelected: boolean) => void)8+ | Triggered when the selected state of the **\** changes.
**isSelected**: Returns **true** if the **\** is selected by mouse drag; returns **false** otherwise.
Since API version 9, this API is supported in ArkTS widgets.| ## Example diff --git a/en/application-dev/reference/arkui-ts/ts-drawing-components-circle.md b/en/application-dev/reference/arkui-ts/ts-drawing-components-circle.md index 1c17cda5d9d55a722cbf3351b3a72586d224c346..c69ca31dbccaa9f3246500d1b5baa92cc50718bc 100644 --- a/en/application-dev/reference/arkui-ts/ts-drawing-components-circle.md +++ b/en/application-dev/reference/arkui-ts/ts-drawing-components-circle.md @@ -16,6 +16,8 @@ Not supported Circle(options?: {width?: string | number, height?: string | number}) +Since API version 9, this API is supported in ArkTS widgets. + **Parameters** | Name| Type| Mandatory| Description| @@ -29,17 +31,17 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the | Name| Type| Description| | -------- | -------- | -------- | -| fill | [ResourceColor](ts-types.md) | Color of the fill area.
Default value: **Color.Black**| -| fillOpacity | number \| string \| [Resource](ts-types.md#resource)| Opacity of the fill area.
Default value: **1**| -| stroke | [ResourceColor](ts-types.md) | Stroke color. If this attribute is not set, the component does not have any stroke.| -| strokeDashArray | Array<Length> | Stroke dashes.
Default value: **[]** | -| strokeDashOffset | number \| string | Offset of the start point for drawing the stroke.
Default value: **0**| -| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | Cap style of the stroke.
Default value: **LineCapStyle.Butt**| -| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | Join style of the stroke.
Default value: **LineJoinStyle.Miter**| -| strokeMiterLimit | number \| string | Limit on the ratio of the miter length to the value of **strokeWidth** used to draw a miter join.
Default value: **4**
**NOTE**
This attribute does not take effect for the **\** component, because it does not have a miter join.| -| strokeOpacity | number \| string \| [Resource](ts-types.md#resource)| Stroke opacity.
Default value: **1**
**NOTE**
The value range is [0.0, 1.0]. If the set value is less than 0.0, **0.0** will be used. If the set value is greater than 1.0, **1.0** will be used.| -| strokeWidth | Length | Stroke width.
Default value: **1**| -| antiAlias | boolean | Whether anti-aliasing is enabled.
Default value: **true**| +| fill | [ResourceColor](ts-types.md) | Color of the fill area.
Default value: **Color.Black**
Since API version 9, this API is supported in ArkTS widgets.| +| fillOpacity | number \| string \| [Resource](ts-types.md#resource)| Opacity of the fill area.
Default value: **1**
Since API version 9, this API is supported in ArkTS widgets.| +| stroke | [ResourceColor](ts-types.md) | Stroke color. If this attribute is not set, the component does not have any stroke.
Since API version 9, this API is supported in ArkTS widgets.| +| strokeDashArray | Array<Length> | Stroke dashes.
Default value: **[]**
Since API version 9, this API is supported in ArkTS widgets.| +| strokeDashOffset | number \| string | Offset of the start point for drawing the stroke.
Default value: **0**
Since API version 9, this API is supported in ArkTS widgets.| +| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | Cap style of the stroke.
Default value: **LineCapStyle.Butt**
Since API version 9, this API is supported in ArkTS widgets.| +| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | Join style of the stroke.
Default value: **LineJoinStyle.Miter**
Since API version 9, this API is supported in ArkTS widgets.| +| strokeMiterLimit | number \| string | Limit on the ratio of the miter length to the value of **strokeWidth** used to draw a miter join.
Default value: **4**
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
This attribute does not take effect for the **\** component, because it does not have a miter join.| +| strokeOpacity | number \| string \| [Resource](ts-types.md#resource)| Stroke opacity.
Default value: **1**
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
The value range is [0.0, 1.0]. If the set value is less than 0.0, **0.0** will be used. If the set value is greater than 1.0, **1.0** will be used.| +| strokeWidth | Length | Stroke width.
Default value: **1**
Since API version 9, this API is supported in ArkTS widgets.| +| antiAlias | boolean | Whether anti-aliasing is enabled.
Default value: **true**
Since API version 9, this API is supported in ArkTS widgets.| ## Example diff --git a/en/application-dev/reference/arkui-ts/ts-drawing-components-ellipse.md b/en/application-dev/reference/arkui-ts/ts-drawing-components-ellipse.md index 019f2f008a634f1aee6f1a90d1028b3c69cbd30f..c8249cf5a97811d42832fd262c1eee1d3bc2e985 100644 --- a/en/application-dev/reference/arkui-ts/ts-drawing-components-ellipse.md +++ b/en/application-dev/reference/arkui-ts/ts-drawing-components-ellipse.md @@ -16,6 +16,8 @@ Not supported Ellipse(options?: {width?: string | number, height?: string | number}) +Since API version 9, this API is supported in ArkTS widgets. + **Parameters** | Name| Type| Mandatory| Description| @@ -29,17 +31,17 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the | Name| Type| Default Value| Description| | -------- | -------- | -------- | -------- | -| fill | [ResourceColor](ts-types.md) | Color.Black | Color of the fill area.| -| fillOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | Opacity of the fill area.| -| stroke | [ResourceColor](ts-types.md) | - |Stroke color. If this attribute is not set, the component does not have any stroke.| -| strokeDashArray | Array<Length> | [] | Stroke dashes.| -| strokeDashOffset | number \| string | 0 | Offset of the start point for drawing the stroke.| -| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | Cap style of the stroke.| -| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | Join style of the stroke.| -| strokeMiterLimit | number \| string | 4 | Limit on the ratio of the miter length to the value of **strokeWidth** used to draw a miter join.
**NOTE**
This attribute does not take effect for the **\** component, because it does not have a miter join.| -| strokeOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | Stroke opacity.
**NOTE**
The value range is [0.0, 1.0]. If the set value is less than 0.0, **0.0** will be used. If the set value is greater than 1.0, **1.0** will be used.| -| strokeWidth | Length | 1 | Stroke width.| -| antiAlias | boolean | true | Whether anti-aliasing is enabled.| +| fill | [ResourceColor](ts-types.md) | Color.Black | Color of the fill area.
Since API version 9, this API is supported in ArkTS widgets.| +| fillOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | Opacity of the fill area.
Since API version 9, this API is supported in ArkTS widgets.| +| stroke | [ResourceColor](ts-types.md) | - |Stroke color. If this attribute is not set, the component does not have any stroke.
Since API version 9, this API is supported in ArkTS widgets.| +| strokeDashArray | Array<Length> | [] | Stroke dashes.
Since API version 9, this API is supported in ArkTS widgets.| +| strokeDashOffset | number \| string | 0 | Offset of the start point for drawing the stroke.
Since API version 9, this API is supported in ArkTS widgets.| +| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | Cap style of the stroke.
Since API version 9, this API is supported in ArkTS widgets.| +| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | Join style of the stroke.
Since API version 9, this API is supported in ArkTS widgets.| +| strokeMiterLimit | number \| string | 4 | Limit on the ratio of the miter length to the value of **strokeWidth** used to draw a miter join.
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
This attribute does not take effect for the **\** component, because it does not have a miter join.| +| strokeOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | Stroke opacity.
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
The value range is [0.0, 1.0]. If the set value is less than 0.0, **0.0** will be used. If the set value is greater than 1.0, **1.0** will be used.| +| strokeWidth | Length | 1 | Stroke width.
Since API version 9, this API is supported in ArkTS widgets.| +| antiAlias | boolean | true | Whether anti-aliasing is enabled.
Since API version 9, this API is supported in ArkTS widgets.| ## Example diff --git a/en/application-dev/reference/arkui-ts/ts-drawing-components-line.md b/en/application-dev/reference/arkui-ts/ts-drawing-components-line.md index 724c976b06687a818a0456d9fdd4b845a4ea85ab..a8097c5e449d613a378643fef8902abe41be6bba 100644 --- a/en/application-dev/reference/arkui-ts/ts-drawing-components-line.md +++ b/en/application-dev/reference/arkui-ts/ts-drawing-components-line.md @@ -15,6 +15,8 @@ Not supported Line(value?: {width?: string | number, height?: string | number}) +Since API version 9, this API is supported in ArkTS widgets. + **Parameters** | Name| Type| Mandatory| Default Value| Description| @@ -29,19 +31,19 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the | Name| Type| Default Value| Description| | -------- | -------- | -------- | -------- | -| startPoint | Array<Length> | [0, 0] | Coordinates (relative coordinates) of the start point of the line, in vp.| -| endPoint | Array<Length> | [0, 0] | Coordinates (relative coordinates) of the end point of the line, in vp.| -| fill | [ResourceColor](ts-types.md#resourcecolor) | Color.Black | Color of the fill area.
**NOTE**
This attribute does not take effect because the **\** component cannot be used to draw a closed shape.| -| fillOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | Opacity of the fill area.
**NOTE**
This attribute does not take effect because the **\** component cannot be used to draw a closed shape.| -| stroke | [ResourceColor](ts-types.md#resourcecolor) | Color.Black | Stroke color.| -| strokeDashArray | Array<Length> | [] | Stroke dashes.| -| strokeDashOffset | number \| string | 0 | Offset of the start point for drawing the stroke.| -| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | Cap style of the stroke.| -| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | Join style of the stroke.| -| strokeMiterLimit | number \| string | 4 | Limit value when the sharp angle is drawn as a miter.
**NOTE**
This attribute does not take effect because the **\** component cannot be used to draw a shape with a sharp angle.| -| strokeOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | Stroke opacity.
**NOTE**
The value range is [0.0, 1.0]. If the set value is less than 0.0, **0.0** will be used. If the set value is greater than 1.0, **1.0** will be used.| -| strokeWidth | Length | 1 | Stroke width.| -| antiAlias | boolean | true | Whether anti-aliasing is enabled.| +| startPoint | Array<Length> | [0, 0] | Coordinates (relative coordinates) of the start point of the line, in vp.
Since API version 9, this API is supported in ArkTS widgets.| +| endPoint | Array<Length> | [0, 0] | Coordinates (relative coordinates) of the end point of the line, in vp.
Since API version 9, this API is supported in ArkTS widgets.| +| fill | [ResourceColor](ts-types.md#resourcecolor) | Color.Black | Color of the fill area.
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
This attribute does not take effect because the **\** component cannot be used to draw a closed shape.| +| fillOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | Opacity of the fill area.
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
This attribute does not take effect because the **\** component cannot be used to draw a closed shape.| +| stroke | [ResourceColor](ts-types.md) | - | Stroke color. If this attribute is not set, the component does not have any stroke.
Since API version 9, this API is supported in ArkTS widgets.| +| strokeDashArray | Array<Length> | [] | Stroke dashes.
Since API version 9, this API is supported in ArkTS widgets.| +| strokeDashOffset | number \| string | 0 | Offset of the start point for drawing the stroke.
Since API version 9, this API is supported in ArkTS widgets.| +| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | Cap style of the stroke.
Since API version 9, this API is supported in ArkTS widgets.| +| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | Join style of the stroke.
Since API version 9, this API is supported in ArkTS widgets.| +| strokeMiterLimit | number \| string | 4 | Limit value when the sharp angle is drawn as a miter.
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
This attribute does not take effect because the **\** component cannot be used to draw a shape with a sharp angle.| +| strokeOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | Stroke opacity.
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
The value range is [0.0, 1.0]. If the set value is less than 0.0, **0.0** will be used. If the set value is greater than 1.0, **1.0** will be used.| +| strokeWidth | Length | 1 | Stroke width.
Since API version 9, this API is supported in ArkTS widgets.| +| antiAlias | boolean | true | Whether anti-aliasing is enabled.
Since API version 9, this API is supported in ArkTS widgets.| ## Example @@ -58,6 +60,7 @@ struct LineExample { Line() .startPoint([0, 0]) .endPoint([50, 100]) + .stroke(Color.Black) .backgroundColor('#F5F5F5') Line() .width(200) @@ -72,6 +75,7 @@ struct LineExample { Line({ width: 50, height: 50 }) .startPoint([0, 0]) .endPoint([100, 100]) + .stroke(Color.Black) .strokeWidth(3) .strokeDashArray([10, 3]) .backgroundColor('#F5F5F5') @@ -79,6 +83,7 @@ struct LineExample { Line({ width: 50, height: 50 }) .startPoint([0, 0]) .endPoint([100, 100]) + .stroke(Color.Black) .strokeWidth(3) .strokeDashArray([10, 3]) .strokeDashOffset(5) @@ -105,6 +110,7 @@ struct LineExample1 { .height(200) .startPoint([50, 50]) .endPoint([50, 200]) + .stroke(Color.Black) .strokeWidth(20) .strokeLineCap(LineCapStyle.Butt) .backgroundColor('#F5F5F5').margin(10) @@ -114,6 +120,7 @@ struct LineExample1 { .height(200) .startPoint([50, 50]) .endPoint([50, 200]) + .stroke(Color.Black) .strokeWidth(20) .strokeLineCap(LineCapStyle.Round) .backgroundColor('#F5F5F5') @@ -123,6 +130,7 @@ struct LineExample1 { .height(200) .startPoint([50, 50]) .endPoint([50, 200]) + .stroke(Color.Black) .strokeWidth(20) .strokeLineCap(LineCapStyle.Square) .backgroundColor('#F5F5F5') @@ -145,29 +153,34 @@ struct LineExample { Line() .startPoint([50, 30]) .endPoint([300, 30]) + .stroke(Color.Black) .strokeWidth(10) // Set the interval for strokeDashArray to 50. Line() .startPoint([50, 20]) .endPoint([300, 20]) + .stroke(Color.Black) .strokeWidth(10) .strokeDashArray([50]) // Set the interval for strokeDashArray to 50, 10. Line() .startPoint([50, 20]) .endPoint([300, 20]) + .stroke(Color.Black) .strokeWidth(10) .strokeDashArray([50, 10]) // Set the interval for strokeDashArray to 50, 10, 20. Line() .startPoint([50, 20]) .endPoint([300, 20]) + .stroke(Color.Black) .strokeWidth(10) .strokeDashArray([50, 10, 20]) // Set the interval for strokeDashArray to 50, 10, 20, 30. Line() .startPoint([50, 20]) .endPoint([300, 20]) + .stroke(Color.Black) .strokeWidth(10) .strokeDashArray([50, 10, 20, 30]) diff --git a/en/application-dev/reference/arkui-ts/ts-drawing-components-path.md b/en/application-dev/reference/arkui-ts/ts-drawing-components-path.md index f0645c5079ef86d29d848e059c5187bf76f5d8d3..313e416b8be00dff249f60ff55af2337a81c889c 100644 --- a/en/application-dev/reference/arkui-ts/ts-drawing-components-path.md +++ b/en/application-dev/reference/arkui-ts/ts-drawing-components-path.md @@ -15,6 +15,8 @@ Not supported Path(value?: { width?: number | string; height?: number | string; commands?: string }) +Since API version 9, this API is supported in ArkTS widgets. + **Parameters** | Name | Type | Mandatory| Description | @@ -29,18 +31,18 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the | Name | Type | Default Value | Description | | -------- | ----------------------------------- | ---- | ---------------------------------------- | -| commands | string | '' | Command for drawing the path. The unit is px. For details about how to convert pixel units, see [Pixel Units](ts-pixel-units.md).| -| fill | [ResourceColor](ts-types.md) | Color.Black | Color of the fill area.| -| fillOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | Opacity of the fill area.| -| stroke | [ResourceColor](ts-types.md) | - | Stroke color.| -| strokeDashArray | Array<Length> | [] | Stroke dashes.| -| strokeDashOffset | number \| string | 0 | Offset of the start point for drawing the stroke.| -| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | Cap style of the stroke.| -| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | Join style of the stroke.| -| strokeMiterLimit | number \| string | 4 | Limit on the ratio of the miter length to the value of **strokeWidth** used to draw a miter join. The miter length indicates the distance from the outer tip to the inner corner of the miter.
**NOTE**
This attribute must be set to a value greater than or equal to 1 and takes effect when **strokeLineJoin** is set to **LineJoinStyle.Miter**.| -| strokeOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | Opacity of the stroke.
**NOTE**
The value range is [0.0, 1.0]. If the set value is less than 0.0, **0.0** will be used. If the set value is greater than 1.0, **1.0** will be used.| -| strokeWidth | Length | 1 | Width of the stroke.| -| antiAlias | boolean | true | Whether anti-aliasing is enabled.| +| commands | string | '' | Command for drawing the path. The unit is px. For details about how to convert pixel units, see [Pixel Units](ts-pixel-units.md).
Since API version 9, this API is supported in ArkTS widgets.| +| fill | [ResourceColor](ts-types.md) | Color.Black | Color of the fill area.
Since API version 9, this API is supported in ArkTS widgets.| +| fillOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | Opacity of the fill area.
Since API version 9, this API is supported in ArkTS widgets.| +| stroke | [ResourceColor](ts-types.md) | - |Stroke color. If this attribute is not set, the component does not have any stroke.
Since API version 9, this API is supported in ArkTS widgets.| +| strokeDashArray | Array<Length> | [] | Stroke dashes.
Since API version 9, this API is supported in ArkTS widgets.| +| strokeDashOffset | number \| string | 0 | Offset of the start point for drawing the stroke.
Since API version 9, this API is supported in ArkTS widgets.| +| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | Cap style of the stroke.
Since API version 9, this API is supported in ArkTS widgets.| +| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | Join style of the stroke.
Since API version 9, this API is supported in ArkTS widgets.| +| strokeMiterLimit | number \| string | 4 | Limit on the ratio of the miter length to the value of **strokeWidth** used to draw a miter join. The miter length indicates the distance from the outer tip to the inner corner of the miter.
**NOTE**
This attribute must be set to a value greater than or equal to 1 and takes effect when **strokeLineJoin** is set to **LineJoinStyle.Miter**.
Since API version 9, this API is supported in ArkTS widgets.| +| strokeOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | Opacity of the stroke.
**NOTE**
The value range is [0.0, 1.0]. If the set value is less than 0.0, **0.0** will be used. If the set value is greater than 1.0, **1.0** will be used.
Since API version 9, this API is supported in ArkTS widgets.| +| strokeWidth | Length | 1 | Width of the stroke.
Since API version 9, this API is supported in ArkTS widgets.| +| antiAlias | boolean | true | Whether anti-aliasing is enabled.
Since API version 9, this API is supported in ArkTS widgets.| The supported commands are as follows: diff --git a/en/application-dev/reference/arkui-ts/ts-drawing-components-polygon.md b/en/application-dev/reference/arkui-ts/ts-drawing-components-polygon.md index c8c45849bc38492435bee3aa441af82913bb519d..d126f92b224838ffb413cd58b0ad1f287300d184 100644 --- a/en/application-dev/reference/arkui-ts/ts-drawing-components-polygon.md +++ b/en/application-dev/reference/arkui-ts/ts-drawing-components-polygon.md @@ -16,6 +16,8 @@ Not supported Polygon(value?: {width?: string | number, height?: string | number}) +Since API version 9, this API is supported in ArkTS widgets. + **Parameters** | Name| Type| Mandatory| Default Value| Description| @@ -30,23 +32,25 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the | Name| Type| Default Value| Description| | -------- | -------- | -------- | -------- | -| points | Array<Point> | [] | Vertex coordinates of the polygon.| -| fill | [ResourceColor](ts-types.md) | Color.Black | Color of the fill area.| -| fillOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | Opacity of the fill area.| -| stroke | [ResourceColor](ts-types.md) | - | Stroke color. If this attribute is not set, the component does not have any stroke.| -| strokeDashArray | Array<Length> | [] | Stroke dashes.| -| strokeDashOffset | number \| string | 0 | Offset of the start point for drawing the stroke.| -| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | Cap style of the stroke.| -| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | Join style of the stroke.| -| strokeMiterLimit | number \| string | 4 | Limit on the ratio of the miter length to the value of **strokeWidth** used to draw a miter join. The miter length indicates the distance from the outer tip to the inner corner of the miter.
**NOTE**
This attribute must be set to a value greater than or equal to 1 and takes effect when **strokeLineJoin** is set to **LineJoinStyle.Miter**.| -| strokeOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | Stroke opacity.
**NOTE**
The value range is [0.0, 1.0]. If the set value is less than 0.0, **0.0** will be used. If the set value is greater than 1.0, **1.0** will be used.| -| strokeWidth | Length | 1 | Stroke width.| -| antiAlias | boolean | true | Whether anti-aliasing is enabled.| +| points | Array<Point> | [] | Vertex coordinates of the polygon.
Since API version 9, this API is supported in ArkTS widgets.| +| fill | [ResourceColor](ts-types.md) | Color.Black | Color of the fill area.
Since API version 9, this API is supported in ArkTS widgets.| +| fillOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | Opacity of the fill area.
Since API version 9, this API is supported in ArkTS widgets.| +| stroke | [ResourceColor](ts-types.md) | - | Stroke color. If this attribute is not set, the component does not have any stroke.
Since API version 9, this API is supported in ArkTS widgets.| +| strokeDashArray | Array<Length> | [] | Stroke dashes.
Since API version 9, this API is supported in ArkTS widgets.| +| strokeDashOffset | number \| string | 0 | Offset of the start point for drawing the stroke.
Since API version 9, this API is supported in ArkTS widgets.| +| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | Cap style of the stroke.
Since API version 9, this API is supported in ArkTS widgets.| +| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | Join style of the stroke.
Since API version 9, this API is supported in ArkTS widgets.| +| strokeMiterLimit | number \| string | 4 | Limit on the ratio of the miter length to the value of **strokeWidth** used to draw a miter join. The miter length indicates the distance from the outer tip to the inner corner of the miter.
**NOTE**
This attribute must be set to a value greater than or equal to 1 and takes effect when **strokeLineJoin** is set to **LineJoinStyle.Miter**.
Since API version 9, this API is supported in ArkTS widgets.| +| strokeOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | Stroke opacity.
**NOTE**
The value range is [0.0, 1.0]. If the set value is less than 0.0, **0.0** will be used. If the set value is greater than 1.0, **1.0** will be used.
Since API version 9, this API is supported in ArkTS widgets.| +| strokeWidth | Length | 1 | Stroke width.
Since API version 9, this API is supported in ArkTS widgets.| +| antiAlias | boolean | true | Whether anti-aliasing is enabled.
Since API version 9, this API is supported in ArkTS widgets.| ## Point Describes the coordinates of a point. +Since API version 9, this API is supported in ArkTS widgets. + | Name | Type | Description | | --------- | -------------------- | ------------------------------------------------------------ | | Point | [number, number] | Coordinates of a point. The first parameter is the x-coordinate, and the second parameter is the y-coordinate (relative coordinate).| diff --git a/en/application-dev/reference/arkui-ts/ts-drawing-components-polyline.md b/en/application-dev/reference/arkui-ts/ts-drawing-components-polyline.md index 739ca2b19aa78128b2154db9df778bb65dfe9ba9..4e5d746283be0023fe1951fa12a81d8cfdec398a 100644 --- a/en/application-dev/reference/arkui-ts/ts-drawing-components-polyline.md +++ b/en/application-dev/reference/arkui-ts/ts-drawing-components-polyline.md @@ -16,6 +16,8 @@ Not supported Polyline(value?: {width?: string | number, height?: string | number}) +Since API version 9, this API is supported in ArkTS widgets. + **Parameters** | Name| Type| Mandatory| Default Value| Description| @@ -30,23 +32,25 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the | Name| Type| Default Value| Description| | -------- | -------- | -------- | -------- | -| points | Array<Point> | [] | List of coordinates that the polyline passes through.| -| fill | [ResourceColor](ts-types.md) | Color.Black | Color of the fill area.| -| fillOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | Opacity of the fill area.| -| stroke | [ResourceColor](ts-types.md) | - | Stroke color.| -| strokeDashArray | Array<Length> | [] | Stroke dashes.| -| strokeDashOffset | number \| string | 0 | Offset of the start point for drawing the stroke.| -| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | Cap style of the stroke.| -| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | Join style of the stroke.| -| strokeMiterLimit | number \| string | 4 | Limit on the ratio of the miter length to the value of **strokeWidth** used to draw a miter join. The miter length indicates the distance from the outer tip to the inner corner of the miter.
**NOTE**
This attribute must be set to a value greater than or equal to 1 and takes effect when **strokeLineJoin** is set to **LineJoinStyle.Miter**.| -| strokeOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | Stroke opacity.
**NOTE**
The value range is [0.0, 1.0]. If the set value is less than 0.0, **0.0** will be used. If the set value is greater than 1.0, **1.0** will be used.| -| strokeWidth | Length | 1 | Stroke width.| -| antiAlias | boolean | true | Whether anti-aliasing is enabled.| +| points | Array<Point> | [] | List of coordinates that the polyline passes through.
Since API version 9, this API is supported in ArkTS widgets.| +| fill | [ResourceColor](ts-types.md) | Color.Black | Color of the fill area.
Since API version 9, this API is supported in ArkTS widgets.| +| fillOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | Opacity of the fill area.
Since API version 9, this API is supported in ArkTS widgets.| +| stroke | [ResourceColor](ts-types.md) | - | Stroke color. If this attribute is not set, the component does not have any stroke.
Since API version 9, this API is supported in ArkTS widgets.| +| strokeDashArray | Array<Length> | [] | Stroke dashes.
Since API version 9, this API is supported in ArkTS widgets.| +| strokeDashOffset | number \| string | 0 | Offset of the start point for drawing the stroke.
Since API version 9, this API is supported in ArkTS widgets.| +| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | Cap style of the stroke.
Since API version 9, this API is supported in ArkTS widgets.| +| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | Join style of the stroke.
Since API version 9, this API is supported in ArkTS widgets.| +| strokeMiterLimit | number \| string | 4 | Limit on the ratio of the miter length to the value of **strokeWidth** used to draw a miter join. The miter length indicates the distance from the outer tip to the inner corner of the miter.
**NOTE**
This attribute must be set to a value greater than or equal to 1 and takes effect when **strokeLineJoin** is set to **LineJoinStyle.Miter**.
Since API version 9, this API is supported in ArkTS widgets.| +| strokeOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | Stroke opacity.
**NOTE**
The value range is [0.0, 1.0]. If the set value is less than 0.0, **0.0** will be used. If the set value is greater than 1.0, **1.0** will be used.
Since API version 9, this API is supported in ArkTS widgets.| +| strokeWidth | Length | 1 | Stroke width.
Since API version 9, this API is supported in ArkTS widgets.| +| antiAlias | boolean | true | Whether anti-aliasing is enabled.
Since API version 9, this API is supported in ArkTS widgets.| ## Point Describes the coordinates of a point. +Since API version 9, this API is supported in ArkTS widgets. + | Name | Type | Description | | --------- | -------------------- | ------------------------------------------------------------ | | Point | [number, number] | Coordinates of a point. The first parameter is the x-coordinate, and the second parameter is the y-coordinate (relative coordinate).| diff --git a/en/application-dev/reference/arkui-ts/ts-drawing-components-rect.md b/en/application-dev/reference/arkui-ts/ts-drawing-components-rect.md index f428dedaf7cc74454f4189fdf10112e485316dbd..f6ce5646c2893449a91080a30eeb635949d42f50 100644 --- a/en/application-dev/reference/arkui-ts/ts-drawing-components-rect.md +++ b/en/application-dev/reference/arkui-ts/ts-drawing-components-rect.md @@ -17,6 +17,8 @@ Not supported Rect(value?: {width?: string | number,height?: string | number,radius?: string | number | Array<string | number>} | {width?: string | number,height?: string | number,radiusWidth?: string | number,radiusHeight?: string | number}) +Since API version 9, this API is supported in ArkTS widgets. + **Parameters** | Name| Type| Mandatory| Default Value| Description| @@ -34,20 +36,20 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the | Name| Type| Default Value| Description| | -------- | -------- | -------- | -------- | -| radiusWidth | string \| number | 0 | Width of the rounded corner. The width and height are the same when only the width is set.| -| radiusHeight | string \| number | 0 | Height of the rounded corner. The width and height are the same only when the height is set.| -| radius | string \| number \| Array<string \| number> | 0 | Radius of the rounded corner. You can set separate radiuses for four rounded corners.| -| fill | [ResourceColor](ts-types.md) | Color.Black | Color of the fill area.| -| fillOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | Opacity of the fill area.| -| stroke | [ResourceColor](ts-types.md) | - | Stroke color. If this attribute is not set, the component does not have any stroke.| -| strokeDashArray | Array<Length> | [] | Stroke dashes.| -| strokeDashOffset | number \| string | 0 | Offset of the start point for drawing the stroke.| -| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | Cap style of the stroke.| -| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | Join style of the stroke.| -| strokeMiterLimit | number \| string | 4 | Limit on the ratio of the miter length to the value of **strokeWidth** used to draw a miter join. The miter length indicates the distance from the outer tip to the inner corner of the miter.
**NOTE**
This attribute must be set to a value greater than or equal to 1 and takes effect when **strokeLineJoin** is set to **LineJoinStyle.Miter**.| -| strokeOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | Stroke opacity.
**NOTE**
The value range is [0.0, 1.0]. If the set value is less than 0.0, **0.0** will be used. If the set value is greater than 1.0, **1.0** will be used.| -| strokeWidth | Length | 1 | Stroke width.| -| antiAlias | boolean | true | Whether anti-aliasing is enabled.| +| radiusWidth | string \| number | 0 | Width of the rounded corner. The width and height are the same when only the width is set.
Since API version 9, this API is supported in ArkTS widgets.| +| radiusHeight | string \| number | 0 | Height of the rounded corner. The width and height are the same only when the height is set.
Since API version 9, this API is supported in ArkTS widgets.| +| radius | string \| number \| Array<string \| number> | 0 | Radius of the rounded corner. You can set separate radiuses for four rounded corners.
Since API version 9, this API is supported in ArkTS widgets.| +| fill | [ResourceColor](ts-types.md) | Color.Black | Color of the fill area.
Since API version 9, this API is supported in ArkTS widgets.| +| fillOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | Opacity of the fill area.
Since API version 9, this API is supported in ArkTS widgets.| +| stroke | [ResourceColor](ts-types.md) | - | Stroke color. If this attribute is not set, the component does not have any stroke.
Since API version 9, this API is supported in ArkTS widgets.| +| strokeDashArray | Array<Length> | [] | Stroke dashes.
Since API version 9, this API is supported in ArkTS widgets.| +| strokeDashOffset | number \| string | 0 | Offset of the start point for drawing the stroke.
Since API version 9, this API is supported in ArkTS widgets.| +| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | Cap style of the stroke.
Since API version 9, this API is supported in ArkTS widgets.| +| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | Join style of the stroke.
Since API version 9, this API is supported in ArkTS widgets.| +| strokeMiterLimit | number \| string | 4 | Limit on the ratio of the miter length to the value of **strokeWidth** used to draw a miter join. The miter length indicates the distance from the outer tip to the inner corner of the miter.
**NOTE**
This attribute must be set to a value greater than or equal to 1 and takes effect when **strokeLineJoin** is set to **LineJoinStyle.Miter**.
Since API version 9, this API is supported in ArkTS widgets.| +| strokeOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | Stroke opacity.
**NOTE**
The value range is [0.0, 1.0]. If the set value is less than 0.0, **0.0** will be used. If the set value is greater than 1.0, **1.0** will be used.
Since API version 9, this API is supported in ArkTS widgets.| +| strokeWidth | Length | 1 | Stroke width.
Since API version 9, this API is supported in ArkTS widgets.| +| antiAlias | boolean | true | Whether anti-aliasing is enabled.
Since API version 9, this API is supported in ArkTS widgets.| ## Example diff --git a/en/application-dev/reference/arkui-ts/ts-explicit-animation.md b/en/application-dev/reference/arkui-ts/ts-explicit-animation.md index b2802444ab2e297ffc599263910afea57fee2465..1cee9be56077b524b2bb71e098336701e7dd9593 100644 --- a/en/application-dev/reference/arkui-ts/ts-explicit-animation.md +++ b/en/application-dev/reference/arkui-ts/ts-explicit-animation.md @@ -6,9 +6,10 @@ You can create explicit animation with your custom settings. > > The APIs of this module are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. - animateTo(value: AnimateParam, event: () => void): void +Since API version 9, this API is supported in ArkTS widgets. + | Name | Type | Mandatory | Description | | ---------------- | ------------ | -------------------- | -------------------- | | value | [AnimateParam](#animateparam)| Yes| Animation settings.| @@ -18,13 +19,13 @@ animateTo(value: AnimateParam, event: () => void): void | Name| Type| Description| | -------- | -------- | -------- | -| duration | number | Animation duration, in ms.
Default value: **1000**| +| duration | number | Animation duration, in ms.
Default value: **1000**
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
- The maximum animation duration on an ArkTS widget is 1000 ms. If the set value exceeds the limit, the value **1000** will be used.| | tempo | number | Animation playback speed. A larger value indicates faster animation playback, and a smaller value indicates slower animation playback. The value **0** means that there is no animation.
Default value: **1.0**| -| curve | [Curve](ts-appendix-enums.md#curve) \| [ICurve](../apis/js-apis-curve.md#icurve) \| string | Animation curve.
Default value: **Curve.Linear**| +| curve | [Curve](ts-appendix-enums.md#curve) \| [ICurve](../apis/js-apis-curve.md#icurve) \| string | Animation curve.
Default value: **Curve.Linear**
Since API version 9, this API is supported in ArkTS widgets.| | delay | number | Delay of animation playback, in ms. By default, the playback is not delayed.
Default value: **0**| | iterations | number | Number of times that the animation is played. By default, the animation is played once. The value **-1** indicates that the animation is played for an unlimited number of times.
Default value: **1**| -| playMode | [PlayMode](ts-appendix-enums.md#playmode) | Animation playback mode. By default, the animation is played from the beginning after the playback is complete.
Default value: **PlayMode.Normal**| -| onFinish | () => void | Callback invoked when the animation playback is complete.| +| playMode | [PlayMode](ts-appendix-enums.md#playmode) | Animation playback mode. By default, the animation is played from the beginning after the playback is complete.
Default value: **PlayMode.Normal**
Since API version 9, this API is supported in ArkTS widgets.| +| onFinish | () => void | Callback invoked when the animation playback is complete.
Since API version 9, this API is supported in ArkTS widgets.| ## Example diff --git a/en/application-dev/reference/arkui-ts/ts-pixel-units.md b/en/application-dev/reference/arkui-ts/ts-pixel-units.md index 2256aa963c944561e69ccbf110a656347afd448a..4f7099cc28fffbe5b72c6fa3ddd5fe0cfa1b969f 100644 --- a/en/application-dev/reference/arkui-ts/ts-pixel-units.md +++ b/en/application-dev/reference/arkui-ts/ts-pixel-units.md @@ -8,21 +8,21 @@ The framework provides four pixel units, with vp as the reference data unit. | px | Physical pixel unit of the screen. | | vp | Pixel unit specific to the screen density. Pixels in this unit are converted into physical pixels of the screen based on the screen pixel density. This unit is used for values whose unit is not specified.| | fp | Font pixel, which is similar to vp and varies according to the system font size. | -| lpx | Logical pixel unit of the window. It is the ratio of the actual screen width to the logical width (configured by **designWidth**). For example, if **designWidth** is set to **720** (default value), then 1lpx is equal to 2px for a screen with an actual width of 1440 physical pixels. | +| lpx | Logical pixel unit of the window. It is the ratio of the actual screen width to the logical width (configured by **designWidth**). For example, if **designWidth** is set to **720** (default value), then 1lpx is equal to 2px for a screen with an actual width of 1440 physical pixels.| ## Pixel Unit Conversion Conversion between px and other pixel units is supported. -| API | Description | -| ---------------------------------------- | ---------------------- | -| vp2px(value : number) : number | Converts a value in units of vp to a value in units of px. | -| px2vp(value : number) : number | Converts a value in units of px to a value in units of vp. | -| fp2px(value : number) : number | Converts a value in units of fp to a value in units of px. | -| px2fp(value : number) : number | Converts a value in units of px to a value in units of fp. | -| lpx2px(value : number) : number | Converts a value in units of lpx to a value in units of px.| -| px2lpx(value : number) : number | Converts a value in units of px to a value in units of lpx.| +| API | Description | +| --------------------------------------------------- | ------------------------------------------------------------ | +| vp2px(value : number) : number | Converts a value in units of vp to a value in units of px.
Since API version 9, this API is supported in ArkTS widgets.| +| px2vp(value : number) : number | Converts a value in units of px to a value in units of vp.
Since API version 9, this API is supported in ArkTS widgets.| +| fp2px(value : number) : number | Converts a value in units of fp to a value in units of px.
Since API version 9, this API is supported in ArkTS widgets.| +| px2fp(value : number) : number | Converts a value in units of px to a value in units of fp.
Since API version 9, this API is supported in ArkTS widgets.| +| lpx2px(value : number) : number | Converts a value in units of lpx to a value in units of px.
Since API version 9, this API is supported in ArkTS widgets.| +| px2lpx(value : number) : number | Converts a value in units of px to a value in units of lpx.
Since API version 9, this API is supported in ArkTS widgets.| ## Example diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-background.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-background.md index 0bde935d8e104ad982c322c342abb71b96909a31..98da7c61fee51c2a6d99349a7de61b93fda1cede 100644 --- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-background.md +++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-background.md @@ -10,10 +10,10 @@ You can set the background of a component. | Name| Type| Description| | -------- | -------- | -------- | -| backgroundColor | [ResourceColor](ts-types.md#resourcecolor) | Background color of the component.| -| backgroundImage | src: [ResourceStr](ts-types.md#resourcestr),
repeat?: [ImageRepeat](ts-appendix-enums.md#imagerepeat) | **src**: image address, which can be the address of an Internet or a local image. (SVG images are not supported.)
**repeat**: whether the background image is repeatedly used. By default, the background image is not repeatedly used.| -| backgroundImageSize | {
width?: [Length](ts-types.md#length),
height?: [Length](ts-types.md#length)
} \| [ImageSize](ts-appendix-enums.md#imagesize) | Width and height of the background image. If the input is a **{width: Length, height: Length}** object and only one attribute is set, the other attribute is the set value multiplied by the original aspect ratio of the image. By default, the original image aspect ratio remains unchanged.
Default value: **ImageSize.Auto**| -| backgroundImagePosition | [Position](ts-types.md#position8) \| [Alignment](ts-appendix-enums.md#alignment) | Position of the background image in the component, that is, the coordinates relative to the upper left corner of the component.
Default value:
{
x: 0,
y: 0
}
When **x** and **y** are set in percentage, the offset is calculated based on the width and height of the component.| +| backgroundColor | [ResourceColor](ts-types.md#resourcecolor) | Background color of the component.
Since API version 9, this API is supported in ArkTS widgets.| +| backgroundImage | src: [ResourceStr](ts-types.md#resourcestr),
repeat?: [ImageRepeat](ts-appendix-enums.md#imagerepeat) | **src**: image address, which can be the address of an Internet or a local image. (SVG images are not supported.)
**repeat**: whether the background image is repeatedly used. By default, the background image is not repeatedly used.
Since API version 9, this API is supported in ArkTS widgets.| +| backgroundImageSize | {
width?: [Length](ts-types.md#length),
height?: [Length](ts-types.md#length)
} \| [ImageSize](ts-appendix-enums.md#imagesize) | Width and height of the background image. If the input is a **{width: Length, height: Length}** object and only one attribute is set, the other attribute is the set value multiplied by the original aspect ratio of the image. By default, the original image aspect ratio remains unchanged.
Default value: **ImageSize.Auto**
Since API version 9, this API is supported in ArkTS widgets.| +| backgroundImagePosition | [Position](ts-types.md#position8) \| [Alignment](ts-appendix-enums.md#alignment) | Position of the background image in the component, that is, the coordinates relative to the upper left corner of the component.
Default value:
{
x: 0,
y: 0
}
When **x** and **y** are set in percentage, the offset is calculated based on the width and height of the component.
Since API version 9, this API is supported in ArkTS widgets.| ## Example diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-backgroundBlurStyle.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-backgroundBlurStyle.md index e24e391a4690c7767dd9449c4ef5d1e6d2daa968..fdff66a475bb3987ab7574b14d99fe0ea50a6ff0 100644 --- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-backgroundBlurStyle.md +++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-backgroundBlurStyle.md @@ -12,10 +12,12 @@ You can apply background blur effects to a component. | Name | Type | Description | | -------------------- | ----------------------- | ------------------------ | -| backgroundBlurStyle | [BlurStyle](#blurstyle) | Style of the blur between the background and content for the current component. The input parameter indicates a blur material.| +| backgroundBlurStyle | [BlurStyle](#blurstyle) | Style of the blur between the background and content for the current component. The input parameter indicates a blur material.
This API is supported in ArkTS widgets.| ## BlurStyle +This API is supported in ArkTS widgets. + | Name | Description | | ------- | ---------- | | Thin | Thin material. | diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-border-image.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-border-image.md index d50f5ec504c3b9f215e033c4d33dd9dc48dba96d..2371633764347fc20d9306e52a561ecb98795a63 100644 --- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-border-image.md +++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-border-image.md @@ -10,10 +10,12 @@ You can draw an image around a component. | Name | Type | Description | | ---------- | ---------------------------------------- | --------------------------------------- | -| borderImage | [BorderImageOption](#borderimageoption) | Border image or border gradient. | +| borderImage | [BorderImageOption](#borderimageoption) | Border image or border gradient.
This API is supported in ArkTS widgets.| ## BorderImageOption +This API is supported in ArkTS widgets. + | Name | Type | Description | | ---------- | ---------------------------------------- | --------------------------------------- | | source | string \| [Resource](ts-types.md#resource) \| [linearGradient](ts-universal-attributes-gradient-color.md) | Source or gradient color of the border image.
**NOTE**
The border image source applies only to container components, such as **\**, **\**, and **\**.| @@ -23,9 +25,10 @@ You can draw an image around a component. | repeat | [RepeatMode](#repeatmode) | Repeat mode of the border image.
Default value: **RepeatMode.Stretch**| | fill | boolean | Whether to fill the center of the border image.
Default value: **false** | - ## RepeatMode +This API is supported in ArkTS widgets. + | Name | Description | | ------- | ----------------------------------- | | Repeat | The source image's slices are tiled. Tiles beyond the border box will be clipped. | diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-border.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-border.md index 5387323038344bdea0670d857178ad6ae4175ac5..2868a7fdf9c6920437dbd6d105051bd6c2f94f88 100644 --- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-border.md +++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-border.md @@ -13,11 +13,11 @@ The border attributes are used to set border styles for components. | Name | Type | Description | | ------------ | ------------------------------------------------------------ | ------------------------------------------------------------ | -| border | {
width?: [Length](ts-types.md#length) \| [EdgeWidths](#edgewidths9)9+,
color?: [ResourceColor](ts-types.md#resourcecolor) \| [EdgeColors](#edgecolors9)9+,
radius?: [Length](ts-types.md#length) \| [BorderRadiuses](#borderradiuses9)9+,
style?: [BorderStyle](ts-appendix-enums.md#borderstyle) \| [EdgeStyles](#edgestyles9)9+
} | Unified border style.
- **width**: border width.
- **color**: border color.
- **radius**: radius of the rounded corner of the border.
- **style**: border style.| -| borderStyle | [BorderStyle](ts-appendix-enums.md#borderstyle) \| [EdgeStyles](#edgestyles9)9+ | Border style.
Default value: **BorderStyle.Solid** | -| borderWidth | [Length](ts-types.md#length) \| [EdgeWidths](#edgewidths9)9+ | Border width. The percentage format is not supported. | -| borderColor | [ResourceColor](ts-types.md#resourcecolor) \| [EdgeColors](#edgecolors9)9+ | Border color.
Default value: **Color.Black** | -| borderRadius | [Length](ts-types.md#length) \| [BorderRadiuses](#borderradiuses9)9+ | Border radius. The percentage format is not supported. | +| border | {
width?: [Length](ts-types.md#length) \| [EdgeWidths](#edgewidths9)9+,
color?: [ResourceColor](ts-types.md#resourcecolor) \| [EdgeColors](#edgecolors9)9+,
radius?: [Length](ts-types.md#length) \| [BorderRadiuses](#borderradiuses9)9+,
style?: [BorderStyle](ts-appendix-enums.md#borderstyle) \| [EdgeStyles](#edgestyles9)9+
} | Unified border style.
- **width**: border width.
- **color**: border color.
- **radius**: radius of the rounded corner of the border.
- **style**: border style.
Since API version 9, this API is supported in ArkTS widgets.| +| borderStyle | [BorderStyle](ts-appendix-enums.md#borderstyle) \| [EdgeStyles](#edgestyles9)9+ | Border style.
Default value: **BorderStyle.Solid**
Since API version 9, this API is supported in ArkTS widgets.| +| borderWidth | [Length](ts-types.md#length) \| [EdgeWidths](#edgewidths9)9+ | Border width. The percentage format is not supported.
Since API version 9, this API is supported in ArkTS widgets.| +| borderColor | [ResourceColor](ts-types.md#resourcecolor) \| [EdgeColors](#edgecolors9)9+ | Border color.
Default value: **Color.Black**
Since API version 9, this API is supported in ArkTS widgets.| +| borderRadius | [Length](ts-types.md#length) \| [BorderRadiuses](#borderradiuses9)9+ | Border radius. The percentage format is not supported.
Since API version 9, this API is supported in ArkTS widgets.| ## EdgeWidths9+ diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-component-id.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-component-id.md index 72c361558b417f77d28024abda69e19bc7ad111e..1c96d9b4d0ed36fabb1069bd42eb1ac1a1965b6c 100644 --- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-component-id.md +++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-component-id.md @@ -11,7 +11,7 @@ | Name | Type | Description | | -----| -------- | ----------------------------- | -| id | string | Unique ID you assigned to the component.
Default value: **''**| +| id | string | Unique ID you assigned to the component.
Default value: **''**
Since API version 9, this API is supported in ArkTS widgets.| ## APIs diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-enable.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-enable.md index 6e7645eabe12366ced89fb469334612d2205bd9f..d30aa033b3dd9276a78d1b47f639661d384d5a7c 100644 --- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-enable.md +++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-enable.md @@ -10,9 +10,9 @@ The **enabled** attribute sets whether a component responds to user interactions ## Attributes -| Name | Type | Description | -| ------- | ------- | ---------------------------------------- | -| enabled | boolean | Whether the component responds to user interactions, including clicks and touches. The value **true** means that the component responds to user interactions, and **false** means the opposite.
Default value: **true** | +| Name | Type| Description | +| ------- | -------- | ------------------------------------------------------------ | +| enabled | boolean | Whether the component responds to user interactions, including clicks and touches. The value **true** means that the component responds to user interactions, and **false** means the opposite.
Default value: **true**
Since API version 9, this API is supported in ArkTS widgets. | ## Example diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-flex-layout.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-flex-layout.md index 9234810c88d381fbeda3bbc8e9b79a244d5f74ac..702fdef1d7c4acb9f3a2bc8eecd9325ec4367181 100644 --- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-flex-layout.md +++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-flex-layout.md @@ -8,12 +8,12 @@ ## Attributes -| Name | Type | Description | -| ---------- | ---------------------------------------- | ---------------------------------------- | -| flexBasis | number \| string | Base size of the component in the main axis of the parent container.
Default value: **'auto'** (indicating that the base size of the component in the main axis is the original size of the component)
This attribute cannot be set in percentage.| -| flexGrow | number | Percentage of the parent container's remaining space that is allocated to the component.
Default value: **0** | -| flexShrink | number | Percentage of the parent container's shrink size that is allocated to the component.
When the parent container is **\** or **\**, the default value is **0**.
When the parent container is **\**, the default value is **1**. | -| alignSelf | [ItemAlign](ts-appendix-enums.md#itemalign) | Alignment mode of the child components along the cross axis of the parent container. The setting overwrites the **alignItems** setting of the parent container.
Default value: **ItemAlign.Auto**| +| Name | Type | Description | +| ---------- | ------------------------------------------- | ------------------------------------------------------------ | +| flexBasis | number \| string | Base size of the component in the main axis of the parent container.
Default value: **'auto'** (indicating that the base size of the component in the main axis is the original size of the component)
This attribute cannot be set in percentage.
Since API version 9, this API is supported in ArkTS widgets.| +| flexGrow | number | Percentage of the parent container's remaining space that is allocated to the component.
Default value: **0**
Since API version 9, this API is supported in ArkTS widgets.| +| flexShrink | number | Percentage of the parent container's shrink size that is allocated to the component.
When the parent container is **\** or **\**, the default value is **0**.
When the parent container is **\**, the default value is **1**.
Since API version 9, this API is supported in ArkTS widgets.| +| alignSelf | [ItemAlign](ts-appendix-enums.md#itemalign) | Alignment mode of the child components along the cross axis of the parent container. The setting overwrites the **alignItems** setting of the parent container.
Default value: **ItemAlign.Auto**
Since API version 9, this API is supported in ArkTS widgets.| ## Example diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-gradient-color.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-gradient-color.md index a8db3e77829f493a331e570449b80cedce5eb2b2..fb90877b959fbfd39b5d0a01455ecaa00a5bb8f0 100644 --- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-gradient-color.md +++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-gradient-color.md @@ -12,9 +12,9 @@ Create a more gorgeous look for a component by applying a gradient color effect | Name | Type | Description | | -------------- | -------------------------------------------- | ----------------------------------- | -| linearGradient | {
angle?: number \| string,
direction?: [GradientDirection](ts-appendix-enums.md#gradientdirection),
colors: Array<[ColorStop](ts-basic-components-gauge.md#colorstop)>,
repeating?: boolean
} | Linear gradient.
- **angle**: start angle of the linear gradient. A positive value indicates a clockwise rotation from the origin, (0, 0).
Default value: **180**
- **direction**: direction of the linear gradient. It does not take effect when **angle** is set.
Default value: **GradientDirection.Bottom**
- **colors**: colors of the linear gradient.
- **repeating**: whether the colors are repeated.
Default value: **false**| -| sweepGradient | {
center: Point,
start?: number \| string,
end?: number \| string,
rotation?: number\|string,
colors: Array<[ColorStop](ts-basic-components-gauge.md#colorstop)>,
repeating?: boolean
} | Angle gradient.
- **center**: center point of the angle gradient, that is, the coordinates relative to the upper left corner of the current component.
- **start**: start point of the angle gradient.
Default value: **0**
- **end**: end point of the angle gradient.
Default value: **0**
- **rotation**: rotation angle of the angle gradient.
Default value: **0**
- **colors**: colors of the angle gradient.
- **repeating**: whether the colors are repeated.
Default value: **false**| -| radialGradient | {
center: Point,
radius: number \| string,
colors: Array<[ColorStop](ts-basic-components-gauge.md#colorstop)>,
repeating?: boolean
} | Radial gradient.
- **center**: center point of the radial gradient, that is, the coordinates relative to the upper left corner of the current component.
- **radius**: radius of the radial gradient.
- **colors**: colors of the radial gradient.
- **repeating**: whether the colors are repeated.
Default value: **false**| +| linearGradient | {
angle?: number \| string,
direction?: [GradientDirection](ts-appendix-enums.md#gradientdirection),
colors: Array<[ColorStop](ts-basic-components-gauge.md#colorstop)>,
repeating?: boolean
} | Linear gradient.
- **angle**: start angle of the linear gradient. A positive value indicates a clockwise rotation from the origin, (0, 0).
Default value: **180**
- **direction**: direction of the linear gradient. It does not take effect when **angle** is set.
Default value: **GradientDirection.Bottom**
- **colors**: colors of the linear gradient.
- **repeating**: whether the colors are repeated.
Default value: **false**
Since API version 9, this API is supported in ArkTS widgets.| +| sweepGradient | {
center: Point,
start?: number \| string,
end?: number \| string,
rotation?: number\|string,
colors: Array<[ColorStop](ts-basic-components-gauge.md#colorstop)>,
repeating?: boolean
} | Sweep gradient.
- **center**: center point of the sweep gradient, that is, the coordinates relative to the upper left corner of the current component.
- **start**: start point of the sweep gradient.
Default value: **0**
- **end**: end point of the sweep gradient.
Default value: **0**
- **rotation**: rotation angle of the sweep gradient.
Default value: **0**
- **colors**: colors of the sweep gradient.
- **repeating**: whether the colors are repeated.
Default value: **false**
Since API version 9, this API is supported in ArkTS widgets. | +| radialGradient | {
center: Point,
radius: number \| string,
colors: Array<[ColorStop](ts-basic-components-gauge.md#colorstop)>,
repeating?: boolean
} | Radial gradient.
- **center**: center point of the radial gradient, that is, the coordinates relative to the upper left corner of the current component.
- **radius**: radius of the radial gradient.
- **colors**: colors of the radial gradient.
- **repeating**: whether the colors are repeated.
Default value: **false**
Since API version 9, this API is supported in ArkTS widgets.| ## Example diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-image-effect.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-image-effect.md index 69272c0d3bf0283b23e894da1342649e6c612472..9049012d7d1adf05cc00e1945b44045bb8edbddf 100644 --- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-image-effect.md +++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-image-effect.md @@ -3,6 +3,7 @@ Image effects include blur, shadow, and much more. > **NOTE** +> > The APIs of this module are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. @@ -11,17 +12,17 @@ Image effects include blur, shadow, and much more. | Name | Type | Default Value| Description | | ----------------------------- | ------------------------------------------------------------ | ------ | ------------------------------------------------------------ | -| blur | number | - | Applies the content blur effect to the current component. The input parameter is the blur radius. The larger the radius is, the more blurred the content is. If the value is **0**, the content is not blurred.| -| backdropBlur | number | - | Applies the background blur effect to the current component. The input parameter is the blur radius. The larger the radius is, the more blurred the background is. If the value is **0**, the background is not blurred.| -| shadow | {
radius: number \| [Resource](ts-types.md#resource),
color?: [Color](ts-appendix-enums.md#color) \| string \| [Resource](ts-types.md#resource),
offsetX?: number \| [Resource](ts-types.md#resource),
offsetY?: number \| [Resource](ts-types.md#resource)
} | - | Applies the shadow effect to the current component. The input parameters are the fuzzy radius (mandatory), shadow color (optional; gray by default), x-axis offset (optional; 0 by default), and y-axis offset (optional; 0 by default). The offset unit is px.| -| grayscale | number | 0.0 | Converts the input image to grayscale. The value indicates the grayscale conversion ratio. If the input value is **1.0**, the image is converted into a grayscale image. If the input value is **0.0**, the image does not change. If the input value is between **0.0** and **1.0**, the effect changes in linear mode. The unit is percentage.| -| brightness | number | 1.0 | Applies a brightness to the current component. The input parameter is a brightness ratio. The value **1** indicates no effects. The value **0** indicates the complete darkness. If the value is less than **1**, the brightness decreases. If the value is greater than **1**, the brightness increases. A larger value indicates a higher brightness.| -| saturate | number | 1.0 | Applies the saturation effect to the current component. The saturation is the ratio of the chromatic component to the achromatic component (gray) in a color. When the input value is **1**, the source image is displayed. When the input value is greater than **1**, a higher percentage of the chromatic component indicates a higher saturation. When the input value is less than **1**, a higher percentage of the achromatic component indicates a lower saturation. The unit is percentage.| -| contrast | number | 1.0 | Applies the contrast effect to the current component. The input parameter is a contrast value. If the value is **1**, the source image is displayed. If the value is greater than **1**, a larger value indicates a higher contrast and a clearer image. If the value is less than **1**, a smaller value indicates a lower contrast is. If the value is **0**, the image becomes all gray. The unit is percentage.| -| invert | number | 0 | Inverts the input image. The input parameter is an image inversion ratio. The value **1** indicates complete inversion. The value **0** indicates that the image does not change. The unit is percentage.| -| sepia | number | 0 | Converts the image color to sepia. The input parameter is an image inversion ratio. The value **1** indicates the image is completely sepia. The value **0** indicates that the image does not change. The unit is percentage.| -| hueRotate | number \| string | '0deg' | Applies the hue rotation effect to the current component. The input parameter is a rotation angle. | -| colorBlend 8+ | [Color](ts-appendix-enums.md#color) \| string \| [Resource](ts-types.md#resource) | - | Applies the color blend effect to the current component. The input parameter is the blended color. | +| blur | number | - | Applies the content blur effect to the current component. The input parameter is the blur radius. The larger the radius is, the more blurred the content is. If the value is **0**, the content is not blurred.
Since API version 9, this API is supported in ArkTS widgets.| +| backdropBlur | number | - | Applies the background blur effect to the current component. The input parameter is the blur radius. The larger the radius is, the more blurred the background is. If the value is **0**, the background is not blurred.
Since API version 9, this API is supported in ArkTS widgets.| +| shadow | {
radius: number \| [Resource](ts-types.md#resource),
color?: [Color](ts-appendix-enums.md#color) \| string \| [Resource](ts-types.md#resource),
offsetX?: number \| [Resource](ts-types.md#resource),
offsetY?: number \| [Resource](ts-types.md#resource)
} | - | Applies the shadow effect to the current component. The input parameters are the fuzzy radius (mandatory), shadow color (optional; gray by default), x-axis offset (optional; 0 by default), and y-axis offset (optional; 0 by default). The offset unit is px.
Since API version 9, this API is supported in ArkTS widgets. | +| grayscale | number | 0.0 | Converts the input image to grayscale. The value indicates the grayscale conversion ratio. If the input value is **1.0**, the image is converted into a grayscale image. If the input value is **0.0**, the image does not change. If the input value is between **0.0** and **1.0**, the effect changes in linear mode. The unit is percentage.
Since API version 9, this API is supported in ArkTS widgets.| +| brightness | number | 1.0 | Applies a brightness to the current component. The input parameter is a brightness ratio. The value **1** indicates no effects. The value **0** indicates the complete darkness. If the value is less than **1**, the brightness decreases. If the value is greater than **1**, the brightness increases. A larger value indicates a higher brightness.
Since API version 9, this API is supported in ArkTS widgets.| +| saturate | number | 1.0 | Applies the saturation effect to the current component. The saturation is the ratio of the chromatic component to the achromatic component (gray) in a color. When the input value is **1**, the source image is displayed. When the input value is greater than **1**, a higher percentage of the chromatic component indicates a higher saturation. When the input value is less than **1**, a higher percentage of the achromatic component indicates a lower saturation. The unit is percentage.
Since API version 9, this API is supported in ArkTS widgets.| +| contrast | number | 1.0 | Applies the contrast effect to the current component. The input parameter is a contrast value. If the value is **1**, the source image is displayed. If the value is greater than **1**, a larger value indicates a higher contrast and a clearer image. If the value is less than **1**, a smaller value indicates a lower contrast is. If the value is **0**, the image becomes all gray. The unit is percentage.
Since API version 9, this API is supported in ArkTS widgets.| +| invert | number | 0 | Inverts the input image. The input parameter is an image inversion ratio. The value **1** indicates complete inversion. The value **0** indicates that the image does not change. The unit is percentage.
Since API version 9, this API is supported in ArkTS widgets.| +| sepia | number | 0 | Converts the image color to sepia. The input parameter is an image inversion ratio. The value **1** indicates the image is completely sepia. The value **0** indicates that the image does not change. The unit is percentage.
Since API version 9, this API is supported in ArkTS widgets.| +| hueRotate | number \| string | '0deg' | Applies the hue rotation effect to the current component. The input parameter is a rotation angle.
Since API version 9, this API is supported in ArkTS widgets.| +| colorBlend 8+ | [Color](ts-appendix-enums.md#color) \| string \| [Resource](ts-types.md#resource) | - | Applies the color blend effect to the current component. The input parameter is the blended color.
Since API version 9, this API is supported in ArkTS widgets.| ## Example diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-layout-constraints.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-layout-constraints.md index 6fbaa35cdd66ca161b41999aedd1a2f06996f13d..76855375443264f0e2552db2b0df1fd339d8a53b 100644 --- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-layout-constraints.md +++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-layout-constraints.md @@ -9,10 +9,10 @@ Layout constraints refer to constraints on the aspect ratio and display priority ## Attributes -| Name | Type | Description | -| --------------- | ------ | ---------------------------------------- | -| aspectRatio | number | Aspect ratio of the component, which can be obtained using the following formula: Width/Height. | -| displayPriority | number | Display priority for the component in the layout container. When the space of the parent container is insufficient, the component with a lower priority is hidden.
The digits after the decimal point are not counted in determining the display priority. That is, numbers in the [x, x + 1) range are considered to represent the same priority. For example, **1.0** and **1.9** represent the same priority.
**NOTE**
This attribute is valid only for the **\**, **\**, and **\** (single-row) container components.| +| Name | Type| Description | +| --------------- | -------- | ------------------------------------------------------------ | +| aspectRatio | number | Aspect ratio of the component, which can be obtained using the following formula: Width/Height.
Since API version 9, this API is supported in ArkTS widgets.| +| displayPriority | number | Display priority for the component in the layout container. When the space of the parent container is insufficient, the component with a lower priority is hidden.
The digits after the decimal point are not counted in determining the display priority. That is, numbers in the [x, x + 1) range are considered to represent the same priority. For example, **1.0** and **1.9** represent the same priority.
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
This attribute is valid only for the **\**, **\**, and **\** (single-row) container components.| ## Example diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-location.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-location.md index a603c54bc5f16e877420e80c1714ac16f70e2123..d28294adf2e11dd3c2bdd47c9bf3abe66dce6623 100644 --- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-location.md +++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-location.md @@ -12,12 +12,12 @@ The location attributes set the alignment mode, layout direction, and position o | Name| Type| Description| | -------- | -------- | -------- | -| align | [Alignment](ts-appendix-enums.md#alignment) | Alignment mode of the component content in the drawing area.
Default value: **Alignment.Center**| -| direction | [Direction](ts-appendix-enums.md#direction) | Horizontal layout of the component.
Default value: **Direction.Auto**| -| position | [Position](ts-types.md#position8) | Offset of the component's upper left corner relative to the parent component's upper left corner. This offset is expressed using absolute values. When laying out components, this attribute does not affect the layout of the parent component. It only adjusts the component position during drawing.| -| markAnchor | [Position](ts-types.md#position8) | Anchor point of the component for positioning. The upper left corner of the component is used as the reference point for offset. Generally, this attribute is used together with the **position** and **offset** attributes. When used independently, this attribute is similar to **offset**.
Default value:
{
x: 0,
y: 0
} | -| offset | [Position](ts-types.md#position8) | Offset of the component relative to itself. This offset is expressed using relative values. This attribute does not affect the layout of the parent component. It only adjusts the component position during drawing.
Default value:
{
x: 0,
y: 0
} | -| alignRules9+ | {
left?: { anchor: string, align: [HorizontalAlign](ts-appendix-enums.md#horizontalalign) };
right?: { anchor: string, align: [HorizontalAlign](ts-appendix-enums.md#horizontalalign) };
middle?: { anchor: string, align: [HorizontalAlign](ts-appendix-enums.md#horizontalalign) };
top?: { anchor: string, align: [VerticalAlign](ts-appendix-enums.md#verticalalign) };
bottom?: { anchor: string, align: [VerticalAlign](ts-appendix-enums.md#verticalalign) };
center?: { anchor: string, align: [VerticalAlign](ts-appendix-enums.md#verticalalign) }
} | Alignment rules relative to the container. This attribute is valid only when the container is [\](ts-container-relativecontainer.md).
- **left**: left-aligned.
- **right**: right-aligned.
- **middle**: center-aligned.
- **top**: top-aligned.
- **bottom**: bottom-aligned.
- **center**: center-aligned.
**NOTE**
- **anchor**: ID of the component that functions as the anchor point.
- **align**: alignment mode relative to the anchor component.| +| align | [Alignment](ts-appendix-enums.md#alignment) | Alignment mode of the component content in the drawing area.
Default value: **Alignment.Center**
Since API version 9, this API is supported in ArkTS widgets.| +| direction | [Direction](ts-appendix-enums.md#direction) | Horizontal layout of the component.
Default value: **Direction.Auto**
Since API version 9, this API is supported in ArkTS widgets.| +| position | [Position](ts-types.md#position8) | Offset of the component's upper left corner relative to the parent component's upper left corner. This offset is expressed using absolute values. When laying out components, this attribute does not affect the layout of the parent component. It only adjusts the component position during drawing.
Since API version 9, this API is supported in ArkTS widgets.| +| markAnchor | [Position](ts-types.md#position8) | Anchor point of the component for positioning. The upper left corner of the component is used as the reference point for offset. Generally, this attribute is used together with the **position** and **offset** attributes. When used independently, this attribute is similar to **offset**.
Default value:
{
x: 0,
y: 0
}
Since API version 9, this API is supported in ArkTS widgets.| +| offset | [Position](ts-types.md#position8) | Offset of the component relative to itself. This offset is expressed using relative values. This attribute does not affect the layout of the parent component. It only adjusts the component position during drawing.
Default value:
{
x: 0,
y: 0
}
Since API version 9, this API is supported in ArkTS widgets.| +| alignRules9+ | {
left?: { anchor: string, align: [HorizontalAlign](ts-appendix-enums.md#horizontalalign) };
right?: { anchor: string, align: [HorizontalAlign](ts-appendix-enums.md#horizontalalign) };
middle?: { anchor: string, align: [HorizontalAlign](ts-appendix-enums.md#horizontalalign) };
top?: { anchor: string, align: [VerticalAlign](ts-appendix-enums.md#verticalalign) };
bottom?: { anchor: string, align: [VerticalAlign](ts-appendix-enums.md#verticalalign) };
center?: { anchor: string, align: [VerticalAlign](ts-appendix-enums.md#verticalalign) }
} | Alignment rules relative to the container.
- **left**: left-aligned.
- **right**: right-aligned.
- **middle**: center-aligned.
- **top**: top-aligned.
- **bottom**: bottom-aligned.
- **center**: center-aligned.
This API is supported in ArkTS widgets.
**NOTE**
- **anchor**: ID of the component that functions as the anchor point.
- **align**: alignment mode relative to the anchor component. | ## Example diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-opacity.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-opacity.md index db1e33a8ed8e723c626e81fc4bbb6cd9915948fe..63a1d1d838932fd90ff0ec8a93bdc232c6baeb1f 100644 --- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-opacity.md +++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-opacity.md @@ -10,9 +10,9 @@ You can set the opacity of a component. ## Attributes -| Name | Type | Description | -| ------- | ---------------------------------------- | ---------------------------------------- | -| opacity | number \| [Resource](ts-types.md#resource) | Opacity of the component. The value ranges from 0 to 1. The value **1** means opaque, and **0** means completely transparent. When being completely transparent, the component is hidden, but still takes up space in the layout.
**NOTE**
A child component can inherit this attribute of its parent component. Default value: **1**| +| Name | Type | Description | +| ------- | ---------------------------------------------------- | ------------------------------------------------------------ | +| opacity | number \| [Resource](ts-types.md#resource) | Opacity of the component. The value ranges from 0 to 1. The value **1** means opaque, and **0** means completely transparent. When being completely transparent, the component is hidden, but still takes up space in the layout.
**NOTE**
A component can inherit the opacity setting from its parent component.
Default value: **1**
Since API version 9, this API is supported in ArkTS widgets. | ## Example diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-overlay.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-overlay.md index 4bb23b9f11f8f7ab4aa187fedaca3ab37716a461..412b3b5be90a52e110a7b45eef2069ccbf9c5a34 100644 --- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-overlay.md +++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-overlay.md @@ -10,7 +10,7 @@ You can set overlay text for a component. | Name| Type| Default Value| Description| | -------- | -------- | -------- | -------- | -| overlay | value: string,
options?: {
align?: [Alignment](ts-appendix-enums.md#alignment),
offset?: {x?: number, y?: number}
} | {
align: Alignment.Center,
offset: {0, 0}
} | Overlay added to the component.
**value**: mask text.
**options**: text positioning. **align** indicates the location of the text relative to the component. **[offset](ts-universal-attributes-location.md)** indicates the offset of the text relative to the upper left corner of itself. By default, the text is in the upper left corner of the component.
If both **align** and **offset** are set, the text is first positioned relative to the component, and then offset relative to the upper left corner of itself.| +| overlay | value: string,
options?: {
align?: [Alignment](ts-appendix-enums.md#alignment),
offset?: {x?: number, y?: number}
} | {
align: Alignment.Center,
offset: {0, 0}
} | Overlay added to the component.
**value**: mask text.
**options**: text positioning. **align** indicates the location of the text relative to the component. **[offset](ts-universal-attributes-location.md)** indicates the offset of the text relative to the upper left corner of itself. By default, the text is in the upper left corner of the component.
If both **align** and **offset** are set, the text is first positioned relative to the component, and then offset relative to the upper left corner of itself.
Since API version 9, this API is supported in ArkTS widgets.| ## Example diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-polymorphic-style.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-polymorphic-style.md index 5d3d604773dd94846f3f77957ce1bce86540e660..f0698f179b985dff0628d8d963b736ad51d7d16e 100644 --- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-polymorphic-style.md +++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-polymorphic-style.md @@ -11,10 +11,12 @@ You can set state-specific styles for components. | Style| Type| Description| | -------- | -------- | -------- | -| stateStyles | StateStyles | Styles of the component for different states.| +| stateStyles | StateStyles | Styles of the component for different states.
Since API version 9, this API is supported in ArkTS widgets.| ## StateStyles +Since API version 9, this API is supported in ArkTS widgets. + | Name| Type| Mandatory| Description| | -------- | -------- | -------- | -------- | | normal | ()=>void | No| Style of the component when being stateless.| diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-sharp-clipping.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-sharp-clipping.md index 3aaeb64451a672c5eb662fb4f79f166fd7afcab5..a62a7a53b11336ce58448233fe4b1765580b9265 100644 --- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-sharp-clipping.md +++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-sharp-clipping.md @@ -12,8 +12,8 @@ Shape clipping changes the visible portion of a component through clipping or ma | Name | Type | Description | | -----| ------------------------------------------ | ------------------------------------ | -| clip | [Circle](ts-drawing-components-circle.md) \| [Ellipse](ts-drawing-components-ellipse.md) \| [Path](ts-drawing-components-path.md) \| [Rect](ts-drawing-components-rect.md) \| boolean | Clip mode. If the value is a shape, the component is clipped based on the specified shape. If the value is of the Boolean type, it specifies whether to clip the component based on the edge outline of the parent container.
Default value: **false**| -| mask | [Circle](ts-drawing-components-circle.md) \| [Ellipse](ts-drawing-components-ellipse.md) \| [Path](ts-drawing-components-path.md) \| [Rect](ts-drawing-components-rect.md) | Mask of the specified shape to add to the component.| +| clip | [Circle](ts-drawing-components-circle.md) \| [Ellipse](ts-drawing-components-ellipse.md) \| [Path](ts-drawing-components-path.md) \| [Rect](ts-drawing-components-rect.md) \| boolean | Clip mode. If the value is a shape, the component is clipped based on the specified shape. If the value is of the Boolean type, it specifies whether to clip the component based on the edge outline of the parent container.
Default value: **false**
Since API version 9, this API is supported in ArkTS widgets.| +| mask | [Circle](ts-drawing-components-circle.md) \| [Ellipse](ts-drawing-components-ellipse.md) \| [Path](ts-drawing-components-path.md) \| [Rect](ts-drawing-components-rect.md) | Mask of the specified shape to add to the component.
Since API version 9, this API is supported in ArkTS widgets.| ## Example diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-size.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-size.md index fe7c40c76994b0088a21b6fb65867432a5fb7deb..63adc44dc9489b233c92d96176a7cf1d6e9eb520 100644 --- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-size.md +++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-size.md @@ -10,15 +10,15 @@ The size attributes set the width, height, and margin of a component. ## Attributes -| Name | Type | Description | -| -------------- | ---------------------------------------- | ---------------------------------------- | -| width | [Length](ts-types.md#length) | Width of the component. By default, the width required to fully hold the component content is used. If the width of the component is greater than that of the parent container, the range of the parent container is drawn. | -| height | [Length](ts-types.md#length) | Height of the component. By default, the height required to fully hold the component content is used. If the height of the component is greater than that of the parent container, the range of the parent container is drawn. | -| size | {
width?: [Length](ts-types.md#length),
height?: [Length](ts-types.md#length)
} | Size of the component. | -| padding | [Padding](ts-types.md#padding) \| [Length](ts-types.md#length) | Padding of the component.
When the parameter is of the **Length** type, the four paddings take effect.
Default value: **0**
When **padding** is set to a percentage, the width of the parent container is used as the basic value.| -| margin | [Margin](ts-types.md#margin) \| [Length](ts-types.md#length) | Margin of the component.
When the parameter is of the **Length** type, the four margins take effect.
Default value: **0**
When **margin** is set to a percentage, the width of the parent container is used as the basic value.| -| constraintSize | {
minWidth?: [Length](ts-types.md#length),
maxWidth?: [Length](ts-types.md#length),
minHeight?: [Length](ts-types.md#length),
maxHeight?: [Length](ts-types.md#length)
} | Constraint size of the component, which is used to limit the size range during component layout. **constraintSize** takes precedence over **width** and **height**. If the value of **minWidth** is greater than that of **maxWidth**, only the value of **minWidth** takes effect. The same rule applies to **minHeight** and **maxHeight**.
Default value:
{
minWidth: 0,
maxWidth: Infinity,
minHeight: 0,
maxHeight: Infinity
} | -| layoutWeight | number \| string | Weight of the component during layout. When the container size is determined, the container space is allocated along the main axis among the component and sibling components based on the layout weight, and the component size setting is ignored.
**NOTE**
This attribute is valid only for the **\**, **\**, and **\** layouts.| +| Name | Type | Description | +| -------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | +| width | [Length](ts-types.md#length) | Width of the component. By default, the width required to fully hold the component content is used. If the width of the component is greater than that of the parent container, the range of the parent container is drawn.
Since API version 9, this API is supported in ArkTS widgets.| +| height | [Length](ts-types.md#length) | Height of the component. By default, the height required to fully hold the component content is used. If the height of the component is greater than that of the parent container, the range of the parent container is drawn.
Since API version 9, this API is supported in ArkTS widgets.| +| size | {
width?: [Length](ts-types.md#length),
height?: [Length](ts-types.md#length)
} | Size of the component.
Since API version 9, this API is supported in ArkTS widgets.| +| padding | [Padding](ts-types.md#padding) \| [Length](ts-types.md#length) | Padding of the component.
When the parameter is of the **Length** type, the four paddings take effect.
Default value: **0**
When **padding** is set to a percentage, the width of the parent container is used as the basic value.
Since API version 9, this API is supported in ArkTS widgets.| +| margin | [Margin](ts-types.md#margin) \| [Length](ts-types.md#length) | Margin of the component.
When the parameter is of the **Length** type, the four margins take effect.
Default value: **0**
When **margin** is set to a percentage, the width of the parent container is used as the basic value.
Since API version 9, this API is supported in ArkTS widgets.| +| constraintSize | {
minWidth?: [Length](ts-types.md#length),
maxWidth?: [Length](ts-types.md#length),
minHeight?: [Length](ts-types.md#length),
maxHeight?: [Length](ts-types.md#length)
} | Constraint size of the component, which is used to limit the size range during component layout. **constraintSize** takes precedence over **width** and **height**. If the value of **minWidth** is greater than that of **maxWidth**, only the value of **minWidth** takes effect. The same rule applies to **minHeight** and **maxHeight**.
Default value:
{
minWidth: 0,
maxWidth: Infinity,
minHeight: 0,
maxHeight: Infinity
}
Since API version 9, this API is supported in ArkTS widgets.| +| layoutWeight | number \| string | Weight of the component during layout. When the container size is determined, the container space is allocated along the main axis among the component and sibling components based on the layout weight, and the component size setting is ignored.
**NOTE**
This attribute is valid only for the **\**, **\**, and **\** layouts.
Since API version 9, this API is supported in ArkTS widgets.| ## Example diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-touch-target.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-touch-target.md index f78135e0ad613113d71fd10c3f054c74cf9cf68e..9cf189d9f4d2f607aeff6d361142fcbb8ff03557 100644 --- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-touch-target.md +++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-touch-target.md @@ -11,12 +11,15 @@ You can set the touch target for components that support universal click events, ## Attributes -| Name | Type | Description | -| -------------- | --------------------------------------------- | ----------------------------------------- | -| responseRegion | Array<[Rectangle](#rectangle)> \| [Rectangle](#rectangle) | One or more touch targets, including their location and size.
The default touch target is the entire component. Default value:
{
x: 0,
y: 0,
width: '100%',
height: '100%'
} | +| Name | Type | Description | +| -------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | +| responseRegion | Array<[Rectangle](#rectangle)> \| [Rectangle](#rectangle) | One or more touch targets, including their location and size.
The default touch target is the entire component. Default value:
{
x: 0,
y: 0,
width: '100%',
height: '100%'
}
Since API version 9, this API is supported in ArkTS widgets.| ## Rectangle + +Since API version 9, this API is supported in ArkTS widgets. + | Name | Type | Mandatory | Description | | ------ | ----------------------------- | -----| -------------------------------- | | x | [Length](ts-types.md#length) | No | X coordinate of the touch point relative to the upper left corner of the component.
Default value: **0vp**| diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-transformation.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-transformation.md index bf35ba4e5ee69b08d9621570b664af5ca6c0429e..0f946ddb498c50fa7ace4c25c04a79eb8bc47fe1 100644 --- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-transformation.md +++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-transformation.md @@ -11,9 +11,9 @@ Transformation attributes allow you to rotate, translate, scale, or transform a | Name | Type | Description | | --------- | ------------------------------------------------------------ | ------------------------------------------------------------ | -| rotate | {
x?: number,
y?: number,
z?: number,
angle?: number \| string,
centerX?: number \| string,
centerY?: number \| string
} | Rotation axis. A positive angle indicates a clockwise rotation, and a negative angle indicates a counterclockwise rotation. The default value is **0**. **centerX** and **centerY** are used to set the rotation center point.
Default value:
{
x: 0,
y: 0,
z: 0,
angle: 0,
centerX: '50%',
centerY: '50%'
} | -| translate | {
x?: number \| string,
y?: number \| string,
z? : number \| string
} | Translation distance along the x-, y-, and z-axis. The translation direction is determined by the positive and negative values. The value cannot be a percentage.
Default value:
{
x: 0,
y: 0,
z: 0
} | -| scale | {
x?: number,
y?: number,
z?: number,
centerX?: number \| string,
centerY?: number \| string
} | Scale ratio along the x-, y-, and z-axis. The default value is **1**. **centerX** and **centerY** are used to set the scale center point.
Default value:
{
x: 1,
y: 1,
z: 1,
centerX:'50%',
centerY:'50%'
} | +| rotate | {
x?: number,
y?: number,
z?: number,
angle?: number \| string,
centerX?: number \| string,
centerY?: number \| string
} | Rotation axis. A positive angle indicates a clockwise rotation, and a negative angle indicates a counterclockwise rotation. The default value is **0**. **centerX** and **centerY** are used to set the rotation center point.
Default value:
{
x: 0,
y: 0,
z: 0,
angle: 0,
centerX: '50%',
centerY: '50%'
}
Since API version 9, this API is supported in ArkTS widgets.| +| translate | {
x?: number \| string,
y?: number \| string,
z? : number \| string
} | Translation distance along the x-, y-, and z-axis. The translation direction is determined by the positive and negative values. The value cannot be a percentage.
Default value:
{
x: 0,
y: 0,
z: 0
}
Since API version 9, this API is supported in ArkTS widgets.| +| scale | {
x?: number,
y?: number,
z?: number,
centerX?: number \| string,
centerY?: number \| string
} | Scale ratio along the x-, y-, and z-axis. The default value is **1**. **centerX** and **centerY** are used to set the scale center point.
Default value:
{
x: 1,
y: 1,
z: 1,
centerX:'50%',
centerY:'50%'
}
Since API version 9, this API is supported in ArkTS widgets.| | transform | [Matrix4Transit](../apis/js-apis-matrix4.md) | Transformation matrix of the component. | diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-visibility.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-visibility.md index 906b8fe2dff247520061d61a5f7275a32a023746..7bf991c7db0e1cd9c291dd740496890f06dc1af6 100644 --- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-visibility.md +++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-visibility.md @@ -10,7 +10,7 @@ The visibility attribute controls whether a component is visible. | Name | Type | Description | | ---------- | ---------------------------- | ------------------------------------------ | -| visibility | [Visibility](ts-appendix-enums.md#visibility) | Whether the component is visible. Note that even if a component is invisible, it still needs to be re-created when the page is refreshed. Therefore, you are advised to use [conditional rendering](../../quick-start/arkts-rendering-control.md#conditional-rendering) instead under scenarios where consistently high performance is required.
Default value: **Visibility.Visible** | +| visibility | [Visibility](ts-appendix-enums.md#visibility) | Whether the component is visible. Note that even if a component is invisible, it still needs to be re-created when the page is refreshed. Therefore, you are advised to use [conditional rendering](../../quick-start/arkts-rendering-control.md#conditional-rendering) instead under scenarios where consistently high performance is required.
Default value: **Visibility.Visible**
Since API version 9, this API is supported in ArkTS widgets.| ## Example diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-z-order.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-z-order.md index 24be504eef9a302db845b10a0f1e9f082d6d6efd..c4a0fa3b20338f824c93d29bf88e857c247c7f05 100644 --- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-z-order.md +++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-z-order.md @@ -12,7 +12,7 @@ The **zIndex** attribute sets the z-order of a component in the stacking context | Name| Type| Description| | -------- | -------- | -------- | -| zIndex | number | Hierarchy of sibling components in a container. A larger value indicates a higher display level.| +| zIndex | number | Hierarchy of sibling components in a container. A larger value indicates a higher display level.
Since API version 9, this API is supported in ArkTS widgets.| ## Example diff --git a/en/application-dev/reference/arkui-ts/ts-universal-events-click.md b/en/application-dev/reference/arkui-ts/ts-universal-events-click.md index 226a6b6030f7050ddff13e6ccc37ddd3663afc4e..0936712b13880edcd098755dc388db885333dbc5 100644 --- a/en/application-dev/reference/arkui-ts/ts-universal-events-click.md +++ b/en/application-dev/reference/arkui-ts/ts-universal-events-click.md @@ -11,9 +11,12 @@ A click event is triggered when a component is clicked. | Name | Bubbling Supported| Description | | ---------------------------------------- | ---- | --------------------------------- | -| onClick(event: (event?: ClickEvent) => void) | No | Called when a click event occurs. For details about **event**, see **ClickEvent**.| +| onClick(event: (event?: ClickEvent) => void) | No | Called when a click event occurs. For details about **event**, see **ClickEvent**.
Since API version 9, this API is supported in ArkTS widgets.| ## ClickEvent + +Since API version 9, this API is supported in ArkTS widgets. + | Name | Type | Description | | ------------------- | ------------------------------------ | -------------------------------------------------------- | | screenX | number | X coordinate of the click relative to the upper left corner of the application window. | @@ -26,6 +29,8 @@ A click event is triggered when a component is clicked. ## EventTarget8+ +Since API version 9, this API is supported in ArkTS widgets. + | Name | Type | Description | | ---- | ------------------------- | ---------- | | area | [Area](ts-types.md#area8) | Area information of the target element.| diff --git a/en/application-dev/reference/arkui-ts/ts-universal-events-show-hide.md b/en/application-dev/reference/arkui-ts/ts-universal-events-show-hide.md index 7b1db0758f125113d863399d75a7672db10c302a..1f46534fcf3dcd7822d802e20f778018a4b82060 100644 --- a/en/application-dev/reference/arkui-ts/ts-universal-events-show-hide.md +++ b/en/application-dev/reference/arkui-ts/ts-universal-events-show-hide.md @@ -9,10 +9,10 @@ The show/hide event is triggered when a component is mounted or unmounted from t ## Events -| Name | Bubbling Supported| Description | -| ------------------------------------------------ | -------- | -------------------------- | -| onAppear(event: () => void) | No | Triggered when the component is displayed.| -| onDisAppear(event: () => void) | No | Triggered when the component is hidden.| +| Name | Bubbling Supported| Description | +| ------------------------------------------------ | -------- | ------------------------------------------------------------ | +| onAppear(event: () => void) | No | Triggered when the component is displayed.
Since API version 9, this API is supported in ArkTS widgets.| +| onDisAppear(event: () => void) | No | Triggered when the component is hidden.
Since API version 9, this API is supported in ArkTS widgets.| ## Example diff --git a/en/application-dev/ui/ui-ts-custom-component-lifecycle-callbacks.md b/en/application-dev/ui/ui-ts-custom-component-lifecycle-callbacks.md index 4475e2b9bc2fb000c5a31ff09086e7a4bb71b122..4e2b88132ffdb4d1766b3e7fcadfd6a519dfa87d 100644 --- a/en/application-dev/ui/ui-ts-custom-component-lifecycle-callbacks.md +++ b/en/application-dev/ui/ui-ts-custom-component-lifecycle-callbacks.md @@ -15,12 +15,16 @@ aboutToAppear?(): void Invoked after a new instance of the custom component is created and before its **build** function is executed. You can change state variables in the **aboutToAppear** function. The change will take effect when you execute the **build** function next time. +Since API version 9, this API is supported in ArkTS widgets. + ## aboutToDisappear aboutToDisappear?(): void Invoked before the destructor of the custom component is consumed. Do not change state variables in the **aboutToDisappear** function as doing this can cause unexpected errors. For example, the modification of the **@Link** decorated variable may cause unstable application running. +Since API version 9, this API is supported in ArkTS widgets. + **Example 1:** ```ts @@ -77,7 +81,7 @@ Invoked each time when a page is hidden. This callback is used in the routing pr onBackPress?(): void -Invoked when a user clicks the back button. Only the custom components decorated by **@Entry** take effect. If **true** is returned, the page processes the return logic and no page routing is performed. If **false** is returned, the default route return logic is used. If the return value is not set, the value **false** is used. +Invoked when a user clicks the back button. This callback takes effect only for the custom components decorated by **@Entry**. If **true** is returned, the page processes the return logic and no page routing is performed. If **false** is returned, the default route return logic is used. If the return value is not set, the value **false** is used. **Example 2:** @@ -122,6 +126,8 @@ onLayout?(children: Array\, constraint: ConstraintSizeOptions): vo Invoked when the custom component lays out its child components. Through this callback the component receives its child component layout information and size constraint from the framework. The state variable cannot be changed in the **onLayout** function. +This API is supported in ArkTS widgets. + **Parameters** | Name | Type | Description | @@ -135,6 +141,8 @@ onMeasure?(children: Array\, constraint: ConstraintSizeOptions): v Invoked when the custom component needs to determine its size. Through this callback the component receives its child component layout information and size constraint from the framework. The state variable cannot be changed in the onMeasure function. +This API is supported in ArkTS widgets. + **Parameters** | Name | Type | Description | @@ -146,6 +154,8 @@ Invoked when the custom component needs to determine its size. Through this call Provides the child component layout information. +This API is supported in ArkTS widgets. + | Name | Type | Description | | ---------- | ----------------------------------------------------------------------------------------------------------- | -------------------------------------- | | name | string | Name of the child component. | @@ -160,6 +170,8 @@ Provides the child component layout information. Provides the border information of the child component. +This API is supported in ArkTS widgets. + | Name | Type | Description | | ----------- | ---------------------------------------------------------- | ---------------------------------------------- | | borderWidth | [EdgeWidths](../reference/arkui-ts/ts-types.md#edgewidths) | Edge widths in different directions of the child component.| @@ -170,6 +182,8 @@ Provides the border information of the child component. Provides the layout information of the child component. +This API is supported in ArkTS widgets. + | Name | Type | Description | | ---------- | -------------------------------------------------------------------------------- | ---------------- | | position | [Position](../reference/arkui-ts/ts-types.md#position) | Position coordinates of the child component.|