Skip to content

D
Docs

OpenHarmony / Docs
大约 2 年 前同步成功

通知 161
Star 293
Fork 28
D
Docs
提交 11e5d007 编写于 作者: E ester.zhou
浏览文件
操作

Update docs (15190) 

Signed-off-by: Nester.zhou <ester.zhou@huawei.com>
上级 bdb7b977
隐藏空白更改
内联 并排
Showing with 566 addition and 292 deletion
en/application-dev/reference/apis/js-apis-curve.md
浏览文件 @ 11e5d007
...@@ -209,9 +209,10 @@ Curves.responsiveSpringMotion() // Create a responsive spring animation curve wi ...@@ -209,9 +209,10 @@ Curves.responsiveSpringMotion() // Create a responsive spring animation curve wi
interpolate(fraction: number): number interpolate(fraction: number): number
Implements calculation. Implements calculation.
Since API version 9, this API is supported in ArkTS widgets.
**System capability**: SystemCapability.ArkUI.ArkUI.Full **System capability**: SystemCapability.ArkUI.ArkUI.Full
**Parameters** **Parameters**
......
en/application-dev/reference/arkui-ts/ts-animatorproperty.md
浏览文件 @ 11e5d007
...@@ -6,20 +6,21 @@ You can create a property animator to animate certain universal attributes of a ...@@ -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. > 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}) 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** **Parameters**
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| ---------- | ------------------------------------------| ---- | ------------------------------------------------------------ | | ---------- | ------------------------------------------| ---- | ------------------------------------------------------------ |
| duration | number | No | Animation duration, in ms.<br>Default value: **1000**| | duration | number | No | Animation duration, in ms.<br>Default value: **1000**<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>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.<br>The value **0** indicates that no animation is applied.<br>Default value: **1**| | tempo | number | No | Animation playback speed. A greater value indicates a higher animation playback speed.<br>The value **0** indicates that no animation is applied.<br>Default value: **1**|
| curve | string \| [Curve](ts-appendix-enums.md#curve) \| ICurve<sup>9+</sup> | No | Animation curve.<br>Default value: **Curve.Linear** | | curve | string \| [Curve](ts-appendix-enums.md#curve) \| ICurve<sup>9+</sup> | No | Animation curve.<br>Default value: **Curve.Linear**<br>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.<br>Default value: **0** | | delay | number | No | Delay of animation playback, in ms. The value **0** indicates that the playback is not delayed.<br>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.<br>Default value: **1**| | 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.<br>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.<br>Default value: **PlayMode.Normal**| | 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.<br>Default value: **PlayMode.Normal**<br>Since API version 9, this API is supported in ArkTS widgets.|
| onFinish | () => void | No | Callback invoked when the animation playback is complete. | | onFinish | () => void | No | Callback invoked when the animation playback is complete.<br>Since API version 9, this API is supported in ArkTS widgets.|
## Example ## Example
......
en/application-dev/reference/arkui-ts/ts-appendix-enums.md
浏览文件 @ 11e5d007
...@@ -2,6 +2,8 @@ ...@@ -2,6 +2,8 @@
## Color ## Color
Since API version 9, this API is supported in ArkTS widgets.
| Color | Value | Illustration | | Color | Value | Illustration |
| ------------------------ | -------- | ------------------------------------------------------------ | | ------------------------ | -------- | ------------------------------------------------------------ |
| Black | 0x000000 | ![en-us_image_0000001219864153](figures/en-us_image_0000001219864153.png) | | Black | 0x000000 | ![en-us_image_0000001219864153](figures/en-us_image_0000001219864153.png) |
...@@ -19,6 +21,8 @@ ...@@ -19,6 +21,8 @@
## ImageFit ## ImageFit
Since API version 9, this API is supported in ArkTS widgets.
| Name | Description | | Name | Description |
| --------- | ------------------------------------------------------------ | | --------- | ------------------------------------------------------------ |
| Contain | The image is scaled with its aspect ratio retained for the content to be completely displayed within the display boundaries. | | 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 @@ ...@@ -30,6 +34,8 @@
## BorderStyle ## BorderStyle
Since API version 9, this API is supported in ArkTS widgets.
| Name | Description | | Name | Description |
| ------ | ----------------------------------------------- | | ------ | ----------------------------------------------- |
| Dotted | Dotted border. The radius of a dot is half of **borderWidth**.| | Dotted | Dotted border. The radius of a dot is half of **borderWidth**.|
...@@ -38,6 +44,8 @@ ...@@ -38,6 +44,8 @@
## LineJoinStyle ## LineJoinStyle
Since API version 9, this API is supported in ArkTS widgets.
| Name | Description | | Name | Description |
| ----- | -------------------- | | ----- | -------------------- |
| Bevel | Bevel is used to connect paths.| | Bevel | Bevel is used to connect paths.|
...@@ -46,6 +54,8 @@ ...@@ -46,6 +54,8 @@
## TouchType ## TouchType
Since API version 9, this API is supported in ArkTS widgets.
| Name | Description | | Name | Description |
| ------ | ------------------------------ | | ------ | ------------------------------ |
| Down | A finger is pressed. | | Down | A finger is pressed. |
...@@ -55,6 +65,8 @@ ...@@ -55,6 +65,8 @@
## MouseButton ## MouseButton
Since API version 9, this API is supported in ArkTS widgets.
| Name | Description | | Name | Description |
| ------- | ---------------- | | ------- | ---------------- |
| Left | Left button on the mouse. | | Left | Left button on the mouse. |
...@@ -66,6 +78,8 @@ ...@@ -66,6 +78,8 @@
## MouseAction ## MouseAction
Since API version 9, this API is supported in ArkTS widgets.
| Name | Description | | Name | Description |
| ------- | -------------- | | ------- | -------------- |
| Press | The mouse button is pressed.| | Press | The mouse button is pressed.|
...@@ -75,6 +89,8 @@ ...@@ -75,6 +89,8 @@
## Curve ## Curve
Since API version 9, this API is supported in ArkTS widgets.
| Name | Description | | Name | Description |
| ------------------- | ------------------------------------------------------------ | | ------------------- | ------------------------------------------------------------ |
| Linear | The animation speed keeps unchanged. | | Linear | The animation speed keeps unchanged. |
...@@ -93,6 +109,8 @@ ...@@ -93,6 +109,8 @@
## AnimationStatus ## AnimationStatus
Since API version 9, this API is supported in ArkTS widgets.
| Name | Description | | Name | Description |
| ------- | ------------------ | | ------- | ------------------ |
| Initial | The animation is in the initial state. | | Initial | The animation is in the initial state. |
...@@ -102,6 +120,8 @@ ...@@ -102,6 +120,8 @@
## FillMode ## FillMode
Since API version 9, this API is supported in ArkTS widgets.
| Name | Description | | 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.| | 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 @@ ...@@ -111,6 +131,8 @@
## PlayMode ## PlayMode
Since API version 9, this API is supported in ArkTS widgets.
| Name | Description | | Name | Description |
| ---------------- | ------------------------------------------------------------ | | ---------------- | ------------------------------------------------------------ |
| Normal | The animation is played forwards. | | Normal | The animation is played forwards. |
...@@ -120,6 +142,8 @@ ...@@ -120,6 +142,8 @@
## KeyType ## KeyType
Since API version 9, this API is supported in ArkTS widgets.
| Name| Description | | Name| Description |
| ---- | ---------- | | ---- | ---------- |
| Down | The key is pressed.| | Down | The key is pressed.|
...@@ -127,6 +151,8 @@ ...@@ -127,6 +151,8 @@
## KeySource ## KeySource
Since API version 9, this API is supported in ArkTS widgets.
| Name | Description | | Name | Description |
| -------- | -------------------- | | -------- | -------------------- |
| Unknown | Unknown input device. | | Unknown | Unknown input device. |
...@@ -136,16 +162,18 @@ ...@@ -136,16 +162,18 @@
| Name | Description | | Name | Description |
| -------- | ---------------------- | | -------- | ---------------------- |
| Top | Top edge in the vertical direction. | | Top | Top edge in the vertical direction.<br>Since API version 9, this API is supported in ArkTS widgets.|
| Center<sup>(deprecated) </sup> | Center position in the vertical direction.<br> This API is deprecated since API version 9. | | Center<sup>(deprecated) </sup> | Center position in the vertical direction.<br> This API is deprecated since API version 9.|
| Bottom | Bottom edge in the vertical direction. | | Bottom | Bottom edge in the vertical direction.<br>Since API version 9, this API is supported in ArkTS widgets.|
| Baseline<sup>(deprecated) </sup> | Text baseline position in the cross axis direction.<br> This API is deprecated since API version 9.| | Baseline<sup>(deprecated) </sup> | Text baseline position in the cross axis direction.<br> This API is deprecated since API version 9.|
| Start | Start position in the horizontal direction. | | Start | Start position in the horizontal direction.<br>Since API version 9, this API is supported in ArkTS widgets.|
| Middle<sup>(deprecated) </sup> | Center position in the horizontal direction.<br> This API is deprecated since API version 9. | | Middle<sup>(deprecated) </sup> | Center position in the horizontal direction.<br> This API is deprecated since API version 9.|
| End | End position in the horizontal direction. | | End | End position in the horizontal direction.<br>Since API version 9, this API is supported in ArkTS widgets.|
## Week ## Week
Since API version 9, this API is supported in ArkTS widgets.
| Name | Description | | Name | Description |
| -------- | ---------------------- | | -------- | ---------------------- |
| Mon | Monday. | | Mon | Monday. |
...@@ -158,6 +186,8 @@ ...@@ -158,6 +186,8 @@
## Direction ## Direction
Since API version 9, this API is supported in ArkTS widgets.
| Name| Description | | Name| Description |
| ---- | ---------------------- | | ---- | ---------------------- |
| Ltr | Components are arranged from left to right. | | Ltr | Components are arranged from left to right. |
...@@ -166,6 +196,8 @@ ...@@ -166,6 +196,8 @@
## BarState ## BarState
Since API version 9, this API is supported in ArkTS widgets.
| Name| Description | | Name| Description |
| ---- | -------------------------------- | | ---- | -------------------------------- |
| Off | Not displayed. | | Off | Not displayed. |
...@@ -174,6 +206,8 @@ ...@@ -174,6 +206,8 @@
## EdgeEffect ## EdgeEffect
Since API version 9, this API is supported in ArkTS widgets.
| Name | Description | | 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.| | 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 @@ ...@@ -182,6 +216,8 @@
## Alignment ## Alignment
Since API version 9, this API is supported in ArkTS widgets.
| Name | Description | | Name | Description |
| ----------- | ---------------- | | ----------- | ---------------- |
| TopStart | Top start. | | TopStart | Top start. |
...@@ -196,6 +232,8 @@ ...@@ -196,6 +232,8 @@
## TransitionType ## TransitionType
Since API version 9, this API is supported in ArkTS widgets.
| Name | Description | | Name | Description |
| ------ | -------------------------------------------------- | | ------ | -------------------------------------------------- |
| All | The transition takes effect in all scenarios.| | All | The transition takes effect in all scenarios.|
...@@ -204,6 +242,8 @@ ...@@ -204,6 +242,8 @@
## RelateType ## RelateType
Since API version 9, this API is supported in ArkTS widgets.
| Name | Description | | Name | Description |
| ------ | ------------------------------- | | ------ | ------------------------------- |
| FILL | The current child component is scaled to fill the parent component. | | FILL | The current child component is scaled to fill the parent component. |
...@@ -211,6 +251,8 @@ ...@@ -211,6 +251,8 @@
## Visibility ## Visibility
Since API version 9, this API is supported in ArkTS widgets.
| Name | Description | | Name | Description |
| ------- | -------------------------------- | | ------- | -------------------------------- |
| Hidden | The component is hidden, and a placeholder is used for it in the layout. | | Hidden | The component is hidden, and a placeholder is used for it in the layout. |
...@@ -219,6 +261,8 @@ ...@@ -219,6 +261,8 @@
## LineCapStyle ## LineCapStyle
Since API version 9, this API is supported in ArkTS widgets.
| Name | Description | | Name | Description |
| ------ | -------------------- | | ------ | -------------------- |
| Butt | The ends of the line are squared off, and the line does not extend beyond its two endpoints.| | Butt | The ends of the line are squared off, and the line does not extend beyond its two endpoints.|
...@@ -227,6 +271,8 @@ ...@@ -227,6 +271,8 @@
## Axis ## Axis
Since API version 9, this API is supported in ArkTS widgets.
| Name | Description | | Name | Description |
| ---------- | ------------ | | ---------- | ------------ |
| Vertical | Vertical direction.| | Vertical | Vertical direction.|
...@@ -234,6 +280,8 @@ ...@@ -234,6 +280,8 @@
## HorizontalAlign ## HorizontalAlign
Since API version 9, this API is supported in ArkTS widgets.
| Name | Description | | Name | Description |
| ------ | ------------------------ | | ------ | ------------------------ |
| Start | Aligned with the start edge in the same direction as the language in use.| | Start | Aligned with the start edge in the same direction as the language in use.|
...@@ -242,6 +290,8 @@ ...@@ -242,6 +290,8 @@
## FlexAlign ## FlexAlign
Since API version 9, this API is supported in ArkTS widgets.
| Name | Description | | 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.| | 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 @@ ...@@ -253,6 +303,8 @@
## ItemAlign ## ItemAlign
Since API version 9, this API is supported in ArkTS widgets.
| Name | Description | | Name | Description |
| -------- | ------------------------------------------------------------ | | -------- | ------------------------------------------------------------ |
| Auto | The default configuration in the flex container is used. | | Auto | The default configuration in the flex container is used. |
...@@ -264,6 +316,8 @@ ...@@ -264,6 +316,8 @@
## FlexDirection ## FlexDirection
Since API version 9, this API is supported in ArkTS widgets.
| Name | Description | | Name | Description |
| ------------- | ------------------------------ | | ------------- | ------------------------------ |
| Row | The child components are arranged in the same direction as the main axis runs along the rows.| | Row | The child components are arranged in the same direction as the main axis runs along the rows.|
...@@ -273,6 +327,8 @@ ...@@ -273,6 +327,8 @@
## FlexWrap ## FlexWrap
Since API version 9, this API is supported in ArkTS widgets.
| Name | Description | | Name | Description |
| ----------- | ------------------------------------------------- | | ----------- | ------------------------------------------------- |
| NoWrap | The child components in the flex container are arranged in a single line, and they cannot overflow. | | NoWrap | The child components in the flex container are arranged in a single line, and they cannot overflow. |
...@@ -281,6 +337,8 @@ ...@@ -281,6 +337,8 @@
## VerticalAlign ## VerticalAlign
Since API version 9, this API is supported in ArkTS widgets.
| Name | Description | | Name | Description |
| ------ | ------------------------ | | ------ | ------------------------ |
| Top | Top aligned. | | Top | Top aligned. |
...@@ -289,6 +347,8 @@ ...@@ -289,6 +347,8 @@
## ImageRepeat ## ImageRepeat
Since API version 9, this API is supported in ArkTS widgets.
| Name | Description | | Name | Description |
| -------- | -------------------------- | | -------- | -------------------------- |
| X | The image is repeatedly drawn only along the horizontal axis.| | X | The image is repeatedly drawn only along the horizontal axis.|
...@@ -298,6 +358,8 @@ ...@@ -298,6 +358,8 @@
## ImageSize ## ImageSize
Since API version 9, this API is supported in ArkTS widgets.
| Type | Description | | 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.| | 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 @@ ...@@ -306,6 +368,8 @@
## GradientDirection ## GradientDirection
Since API version 9, this API is supported in ArkTS widgets.
| Name | Description | | Name | Description |
| ----------- | ---------- | | ----------- | ---------- |
| Left | The gradient direction is from right to left.| | Left | The gradient direction is from right to left.|
...@@ -320,6 +384,8 @@ ...@@ -320,6 +384,8 @@
## SharedTransitionEffectType ## SharedTransitionEffectType
Since API version 9, this API is supported in ArkTS widgets.
| Name | Description | | 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.| | 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 @@ ...@@ -327,6 +393,8 @@
## FontStyle ## FontStyle
Since API version 9, this API is supported in ArkTS widgets.
| Name | Description | | Name | Description |
| ------ | ---------------- | | ------ | ---------------- |
| Normal | Standard font style.| | Normal | Standard font style.|
...@@ -334,6 +402,8 @@ ...@@ -334,6 +402,8 @@
## FontWeight ## FontWeight
Since API version 9, this API is supported in ArkTS widgets.
| Name | Description | | Name | Description |
| ------- | -------------- | | ------- | -------------- |
| Lighter | The font weight is lighter. | | Lighter | The font weight is lighter. |
...@@ -345,6 +415,8 @@ ...@@ -345,6 +415,8 @@
## TextAlign ## TextAlign
Since API version 9, this API is supported in ArkTS widgets.
| Name | Description | | Name | Description |
| ------ | -------------- | | ------ | -------------- |
| Start | Aligned with the start.| | Start | Aligned with the start.|
...@@ -353,6 +425,8 @@ ...@@ -353,6 +425,8 @@
## TextOverflow ## TextOverflow
Since API version 9, this API is supported in ArkTS widgets.
| Name | Description | | Name | Description |
| -------- | -------------------------------------- | | -------- | -------------------------------------- |
| Clip | Extra-long text is clipped. | | Clip | Extra-long text is clipped. |
...@@ -361,6 +435,8 @@ ...@@ -361,6 +435,8 @@
## TextDecorationType ## TextDecorationType
Since API version 9, this API is supported in ArkTS widgets.
| Name | Description | | Name | Description |
| ----------- | ------------------ | | ----------- | ------------------ |
| Underline | Line under the text. | | Underline | Line under the text. |
...@@ -370,6 +446,8 @@ ...@@ -370,6 +446,8 @@
## TextCase ## TextCase
Since API version 9, this API is supported in ArkTS widgets.
| Name | Description | | Name | Description |
| --------- | -------------------- | | --------- | -------------------- |
| Normal | The original case of the text is retained.| | Normal | The original case of the text is retained.|
...@@ -378,6 +456,8 @@ ...@@ -378,6 +456,8 @@
## ResponseType<sup>8+</sup> ## ResponseType<sup>8+</sup>
Since API version 9, this API is supported in ArkTS widgets.
| Name | Description | | Name | Description |
| ---------- | -------------------------- | | ---------- | -------------------------- |
| LongPress | The menu is displayed when the component is long-pressed. | | LongPress | The menu is displayed when the component is long-pressed. |
...@@ -385,6 +465,8 @@ ...@@ -385,6 +465,8 @@
## HoverEffect<sup>8+</sup> ## HoverEffect<sup>8+</sup>
Since API version 9, this API is supported in ArkTS widgets.
| Name | Description | | Name | Description |
| --------- | ---------------------------- | | --------- | ---------------------------- |
| Auto | Default hover effect.| | Auto | Default hover effect.|
...@@ -394,6 +476,8 @@ ...@@ -394,6 +476,8 @@
## Placement<sup>8+</sup> ## Placement<sup>8+</sup>
Since API version 9, this API is supported in ArkTS widgets.
| Name | Description | | Name | Description |
| ------------- | ------------------------------------------------------------ | | ------------- | ------------------------------------------------------------ |
| Left | The popup is on the left of the component, vertically aligned with the component on the left. | | Left | The popup is on the left of the component, vertically aligned with the component on the left. |
...@@ -411,6 +495,8 @@ ...@@ -411,6 +495,8 @@
## CopyOptions<sup>9+</sup> ## CopyOptions<sup>9+</sup>
Since API version 9, this API is supported in ArkTS widgets.
| Name | Description | | Name | Description |
| ----------- | -------------------- | | ----------- | -------------------- |
| None | Copy is not allowed. | | None | Copy is not allowed. |
...@@ -419,6 +505,8 @@ ...@@ -419,6 +505,8 @@
## HitTestMode<sup>9+</sup> ## HitTestMode<sup>9+</sup>
Since API version 9, this API is supported in ArkTS widgets.
| Name | Description | | 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. | | 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. |
......
en/application-dev/reference/arkui-ts/ts-basic-components-blank.md
浏览文件 @ 11e5d007
...@@ -16,6 +16,8 @@ Not supported ...@@ -16,6 +16,8 @@ Not supported
Blank(min?: number | string) Blank(min?: number | string)
Since API version 9, this API is supported in ArkTS widgets.
**Parameters** **Parameters**
| Name| Type| Mandatory| Description| | Name| Type| Mandatory| Description|
...@@ -28,7 +30,7 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the ...@@ -28,7 +30,7 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
| Name| Type| Description| | 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.<br>Since API version 9, this API is supported in ArkTS widgets.|
## Example ## Example
...@@ -88,6 +90,6 @@ struct BlankExample { ...@@ -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 **\<Blank>** component. If the width of the parent container is not set, set **min** to specify the minimum width of the **\<Blank>** component.
![blankmin](figures/blankmin.png) ![blankmin](figures/blankmin.png)
en/application-dev/reference/arkui-ts/ts-basic-components-button.md
浏览文件 @ 11e5d007
...@@ -16,6 +16,8 @@ This component can contain only one child component. ...@@ -16,6 +16,8 @@ This component can contain only one child component.
**API 1:** Button(options?: {type?: ButtonType, stateEffect?: boolean}) **API 1:** Button(options?: {type?: ButtonType, stateEffect?: boolean})
Since API version 9, this API is supported in ArkTS widgets.
**Parameters** **Parameters**
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
...@@ -28,6 +30,8 @@ This component can contain only one child component. ...@@ -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. 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** **Parameters**
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
...@@ -40,10 +44,13 @@ This component can contain only one child component. ...@@ -40,10 +44,13 @@ This component can contain only one child component.
| Name | Type | Description | | Name | Type | Description |
| ----------- | ----------- | --------------------------------- | | ----------- | ----------- | --------------------------------- |
| type | ButtonType | Button type.<br>Default value: **ButtonType.Capsule** | | type | ButtonType | Button type.<br>Default value: **ButtonType.Capsule**<br>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.<br>Default value: **true**| | stateEffect | boolean | Whether to enable the pressed effect on the click of the button. The value **false** means to disable the pressed effect.<br>Default value: **true**<br>Since API version 9, this API is supported in ArkTS widgets.|
## ButtonType enums ## ButtonType enums
Since API version 9, this API is supported in ArkTS widgets.
| Name | Description | | Name | Description |
| ------- | ------------------ | | ------- | ------------------ |
| Capsule | Capsule-type button (the round corner is half of the height by default).| | Capsule | Capsule-type button (the round corner is half of the height by default).|
......
en/application-dev/reference/arkui-ts/ts-basic-components-checkbox.md
浏览文件 @ 11e5d007
...@@ -14,6 +14,8 @@ Not supported ...@@ -14,6 +14,8 @@ Not supported
Checkbox(options?: {name?: string, group?: string }) Checkbox(options?: {name?: string, group?: string })
Since API version 9, this API is supported in ArkTS widgets.
**Parameters** **Parameters**
| Name | Type| Mandatory | Description| | Name | Type| Mandatory | Description|
...@@ -28,16 +30,16 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the ...@@ -28,16 +30,16 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
| Name | Type| Description| | Name | Type| Description|
| ------------- | ------- | -------- | | ------------- | ------- | -------- |
| select | boolean | Whether the check box is selected.<br>Default value: **false**| | select | boolean | Whether the check box is selected.<br>Default value: **false**<br>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.| | selectedColor | [ResourceColor](ts-types.md#resourcecolor) | Color of the check box when it is selected.<br>Since API version 9, this API is supported in ArkTS widgets.|
## Events ## Events
In addition to the [universal events](ts-universal-events-click.md), the following attributes are supported. In addition to the [universal events](ts-universal-events-click.md), the following attributes are supported.
| Name | Description| | Name | Description |
| ----------| -------- | | -------------------------------------------- | ------------------------------------------------------------ |
|onChange(callback: (value: boolean) => void) | Triggered when the selected status of the check box changes due to a manual operation.<br>- The value **true** means that the check box is selected.<br>- The value **false** means that the check box is not selected. | | onChange(callback: (value: boolean) => void) | Triggered when the selected status of the check box changes due to a manual operation.<br>- The value **true** means that the check box is selected.<br>- The value **false** means that the check box is not selected.<br>Since API version 9, this API is supported in ArkTS widgets.|
## Example ## Example
......
en/application-dev/reference/arkui-ts/ts-basic-components-checkboxgroup.md
浏览文件 @ 11e5d007
...@@ -16,9 +16,9 @@ CheckboxGroup(options?: { group?: string }) ...@@ -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. 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| | Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- |
...@@ -30,8 +30,8 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the ...@@ -30,8 +30,8 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
| Name| Type| Description| | Name| Type| Description|
| -------- | -------- | -------- | | -------- | -------- | -------- |
| selectAll | boolean | Whether to select all.<br>Default value: **false**<br>If **select** is explicitly set for check boxes in the group, the check box settings are prioritized.| | selectAll | boolean | Whether to select all.<br>Default value: **false**<br>If **select** is explicitly set for check boxes in the group, the check box settings are prioritized.<br>Since API version 9, this API is supported in ArkTS widgets.|
| selectedColor | [ResourceColor](ts-types.md#resourcecolor) | Color of the selected check box.| | selectedColor | [ResourceColor](ts-types.md#resourcecolor) | Color of the selected check box.<br>Since API version 9, this API is supported in ArkTS widgets.|
## Events ## Events
...@@ -39,9 +39,12 @@ In addition to the [universal events](ts-universal-events-click.md), the followi ...@@ -39,9 +39,12 @@ In addition to the [universal events](ts-universal-events-click.md), the followi
| Name| Description| | 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.<br>Since API version 9, this API is supported in ArkTS widgets.|
## CheckboxGroupResult ## CheckboxGroupResult
Since API version 9, this API is supported in ArkTS widgets.
| Name | Type | Description | | Name | Type | Description |
| ------ | ------ | ------- | | ------ | ------ | ------- |
| name | Array&lt;string&gt; | Names of all the selected check boxes in the group.| | name | Array&lt;string&gt; | 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 ...@@ -49,6 +52,8 @@ In addition to the [universal events](ts-universal-events-click.md), the followi
## SelectStatus ## SelectStatus
Since API version 9, this API is supported in ArkTS widgets.
| Name | Description| | Name | Description|
| ----- | -------------------- | | ----- | -------------------- |
| All | All check boxes in the group are selected.| | All | All check boxes in the group are selected.|
......
en/application-dev/reference/arkui-ts/ts-basic-components-datapanel.md
浏览文件 @ 11e5d007
...@@ -18,6 +18,8 @@ Not supported ...@@ -18,6 +18,8 @@ Not supported
DataPanel(options:{values: number[], max?: number, type?: DataPanelType}) DataPanel(options:{values: number[], max?: number, type?: DataPanelType})
Since API version 9, this API is supported in ArkTS widgets.
**Parameters** **Parameters**
| Name | Type | Mandatory | Description| | Name | Type | Mandatory | Description|
...@@ -26,8 +28,10 @@ DataPanel(options:{values: number[], max?: number, type?: DataPanelType}) ...@@ -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.<br>- 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.<br>Default value: **100**| | max | number | No | - When set to a value greater than 0, this parameter indicates the maximum value in the **values** list.<br>- 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.<br>Default value: **100**|
| type<sup>8+</sup> | [DataPanelType](#datapaneltype) | No| Type of the data panel (dynamic modification is not supported).<br>Default value: **DataPanelType.Circle**| | type<sup>8+</sup> | [DataPanelType](#datapaneltype) | No| Type of the data panel (dynamic modification is not supported).<br>Default value: **DataPanelType.Circle**|
## DataPanelType ## DataPanelType
Since API version 9, this API is supported in ArkTS widgets.
| Name| Description| | Name| Description|
| -------| ------------ | | -------| ------------ |
| Line | Line data panel.| | Line | Line data panel.|
......
en/application-dev/reference/arkui-ts/ts-basic-components-divider.md
浏览文件 @ 11e5d007
...@@ -16,16 +16,18 @@ Not supported ...@@ -16,16 +16,18 @@ Not supported
Divider() Divider()
Since API version 9, this API is supported in ArkTS widgets.
## Attributes ## Attributes
In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported. In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
| Name | Type | Description | | Name | Type | Description |
| ----------- | ---------- | ------------------ | | ----------- | ---------- | ------------------ |
| vertical | boolean | Whether a vertical divider is used. **false**: A horizontal divider is used.<br>**true**: A vertical divider is used.<br>Default value: **false**| | vertical | boolean | Whether a vertical divider is used. **false**: A horizontal divider is used.<br>**true**: A vertical divider is used.<br>Default value: **false**<br>Since API version 9, this API is supported in ArkTS widgets.|
| color | [ResourceColor](ts-types.md#resourcecolor) | Color of the divider.| | color | [ResourceColor](ts-types.md#resourcecolor) | Color of the divider.<br>Since API version 9, this API is supported in ArkTS widgets.|
| strokeWidth | number \| string | Width of the divider.<br>Default value: **1**| | strokeWidth | number \| string | Width of the divider.<br>Default value: **1**<br>Since API version 9, this API is supported in ArkTS widgets.|
| lineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | Cap style of the divider.<br>Default value: **LineCapStyle.Butt**| | lineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | Cap style of the divider.<br>Default value: **LineCapStyle.Butt**<br>Since API version 9, this API is supported in ArkTS widgets.|
## Events ## Events
......
en/application-dev/reference/arkui-ts/ts-basic-components-gauge.md
浏览文件 @ 11e5d007
...@@ -17,6 +17,8 @@ Not supported ...@@ -17,6 +17,8 @@ Not supported
Gauge(options:{value: number, min?: number, max?: number}) Gauge(options:{value: number, min?: number, max?: number})
Since API version 9, this API is supported in ArkTS widgets.
**Parameters** **Parameters**
| Name| Type| Mandatory| Description| | Name| Type| Mandatory| Description|
...@@ -31,16 +33,18 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the ...@@ -31,16 +33,18 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
| Name| Type| Description| | Name| Type| Description|
| -------- | -------- | -------- | | -------- | -------- | -------- |
| value | number | Value of the chart. It can be dynamically changed.<br>Default value: **0**| | value | number | Value of the chart. It can be dynamically changed.<br>Default value: **0**<br>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.<br>Default value: **0**| | startAngle | number | Start angle of the chart. The value **0** indicates 0 degrees, and a positive value indicates the clockwise direction.<br>Default value: **0**<br>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.<br>Default value: **360**| | endAngle | number | End angle of the chart. The value **0** indicates 0 degrees, and a positive value indicates the clockwise direction.<br>Default value: **360**<br>Since API version 9, this API is supported in ArkTS widgets.|
| colors | Array&lt;[ColorStop](#colorstop)&gt; | Colors of the chart. Colors can be set for individual segments.| | colors | Array&lt;[ColorStop](#colorstop)&gt; | Colors of the chart. Colors can be set for individual segments.<br>Since API version 9, this API is supported in ArkTS widgets.|
| strokeWidth | Length | Stroke width of the chart.| | strokeWidth | Length | Stroke width of the chart.<br>Since API version 9, this API is supported in ArkTS widgets.|
## ColorStop ## ColorStop
Describes a gradient stop. Describes a gradient stop.
Since API version 9, this API is supported in ArkTS widgets.
| Name | Type | Description | | 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.| | 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.|
......
en/application-dev/reference/arkui-ts/ts-basic-components-image.md
浏览文件 @ 11e5d007
...@@ -23,11 +23,13 @@ Image(src: string | PixelMap | Resource) ...@@ -23,11 +23,13 @@ Image(src: string | PixelMap | Resource)
Obtains an image from the specified source for subsequent rendering and display. Obtains an image from the specified source for subsequent rendering and display.
Since API version 9, this API is supported in ArkTS widgets.
**Parameters** **Parameters**
| Name| Type | Mandatory| Description | | 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.<br>When using an image referenced using a relative path, for example, **Image("common/test.jpg")**, the **\<Image>** 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.<br>- The following image formats are supported: PNG, JPG, BMP, SVG, GIF.<br>\- Base64 strings are supported. The value format is data:image/[png\|jpeg\|bmp\|webp];base64,[base64 data], where [base64 data] is a Base64 string.<br/>\- 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).<br>\- 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.<br>When using an image referenced using a relative path, for example, **Image("common/test.jpg")**, the **\<Image>** 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.<br>- The following image formats are supported: PNG, JPG, BMP, SVG, GIF.<br>\- Base64 strings are supported. The value format is data:image/[png\|jpeg\|bmp\|webp];base64,[base64 data], where [base64 data] is a Base64 string.<br/>\- 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).<br/>\- 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.<br/>- ArkTS widgets do not support the **http://**, **datashare://**, or **file://data/storage** path prefixes.<br>- ArkTS widgets do not support the [PixelMap](../apis/js-apis-image.md#pixelmap7) type.|
## Attributes ## Attributes
...@@ -35,19 +37,19 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the ...@@ -35,19 +37,19 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
| Name | Type | Description | | Name | Type | Description |
| --------------------- | ------------------------------------------------------- | ------------------------------------------------------------ | | --------------------- | ------------------------------------------------------- | ------------------------------------------------------------ |
| alt | string \| [Resource](ts-types.md#resource)| Placeholder image displayed during loading. Local images are supported. | | alt | string \| [Resource](ts-types.md#resource)| Placeholder image displayed during loading. Local images are supported.<br>Since API version 9, this API is supported in ArkTS widgets.|
| objectFit | [ImageFit](ts-appendix-enums.md#imagefit) | Image scale mode.<br>Default value: **ImageFit.Cover** | | objectFit | [ImageFit](ts-appendix-enums.md#imagefit) | Image scale mode.<br>Default value: **ImageFit.Cover**<br>Since API version 9, this API is supported in ArkTS widgets.|
| objectRepeat | [ImageRepeat](ts-appendix-enums.md#imagerepeat) | Whether the image is repeated.<br>Default value: **ImageRepeat.NoRepeat**<br>**NOTE**<br>This attribute is not applicable to SVG images.| | objectRepeat | [ImageRepeat](ts-appendix-enums.md#imagerepeat) | Whether the image is repeated.<br>Default value: **ImageRepeat.NoRepeat**<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>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.<br>Default value: **ImageInterpolation.None**<br>**NOTE**<br>This attribute is not applicable to SVG images.<br>This attribute is not applicable to **PixelMap** objects.| | 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.<br>Default value: **ImageInterpolation.None**<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>This attribute is not applicable to SVG images.<br>This attribute is not applicable to **PixelMap** objects.|
| renderMode | [ImageRenderMode](#imagerendermode) | Rendering mode of the image.<br>Default value: **ImageRenderMode.Original**<br>**NOTE**<br>This attribute is not applicable to SVG images.| | renderMode | [ImageRenderMode](#imagerendermode) | Rendering mode of the image.<br>Default value: **ImageRenderMode.Original**<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>This attribute is not applicable to SVG images.|
| sourceSize | {<br>width: number,<br>height: number<br>} | Size of the decoded image. The original image is decoded into a **pixelMap** of the specified size, in px.<br>**NOTE**<br>This attribute is not applicable to **PixelMap** objects or SVG images.| | sourceSize | {<br>width: number,<br>height: number<br>} | Size of the decoded image. The original image is decoded into a **pixelMap** of the specified size, in px.<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>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.<br>Default value: **false** | | 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.<br>Default value: **false**<br>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.<br>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.<br>Default value: **false**<br>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.| | 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.<br>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.<br>Default value: **true**| | 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.<br>Default value: **true**<br>Since API version 9, this API is supported in ArkTS widgets.|
| syncLoad<sup>8+</sup> | 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.<br>Default value: **false**| | syncLoad<sup>8+</sup> | 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.<br>Default value: **false**<br>Since API version 9, this API is supported in ArkTS widgets.|
| copyOption<sup>9+</sup> | [CopyOptions](ts-appendix-enums.md#copyoptions9) | Whether the image can be copied. (SVG images cannot be copied.)<br>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.<br>Default value: **CopyOptions.None**| | copyOption<sup>9+</sup> | [CopyOptions](ts-appendix-enums.md#copyoptions9) | Whether the image can be copied. (SVG images cannot be copied.)<br>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.<br>Default value: **CopyOptions.None**<br>This API is supported in ArkTS widgets.|
| colorFilter<sup>9+</sup> | [ColorFilter](ts-types.md#colorfilter9) | Color filter of the image.| | colorFilter<sup>9+</sup> | [ColorFilter](ts-types.md#colorfilter9) | Color filter of the image.<br>This API is supported in ArkTS widgets.|
> **NOTE** > **NOTE**
> >
...@@ -56,6 +58,8 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the ...@@ -56,6 +58,8 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
### ImageInterpolation ### ImageInterpolation
Since API version 9, this API is supported in ArkTS widgets.
| Name | Description | | Name | Description |
| ------ | ------------------------- | | ------ | ------------------------- |
| None | Interpolation image data is not used. | | None | Interpolation image data is not used. |
...@@ -65,6 +69,8 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the ...@@ -65,6 +69,8 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
### ImageRenderMode ### ImageRenderMode
Since API version 9, this API is supported in ArkTS widgets.
| Name | Description | | Name | Description |
| -------- | --------------------- | | -------- | --------------------- |
| Original | The image is rendered based on the original image, including the color. | | 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 ...@@ -76,9 +82,9 @@ In addition to the [universal events](ts-universal-events-click.md), the followi
| Name | Description | | Name | Description |
| ------------------------------------------------------------ | ------------------------------------------------------------ | | ------------------------------------------------------------ | ------------------------------------------------------------ |
| onComplete(callback: (event?: { width: number, height: number, componentWidth: number,<br> componentHeight: number, loadingStatus: number }) =&gt; void) | Triggered when an image is successfully loaded. The size of the loaded image is returned.<br>- **width**: width of the image, in pixels.<br>- **height**: height of the image, in pixels.<br>- **componentWidth**: width of the container component, in pixels.<br>- **componentHeight**: height of the container component, in pixels.<br>- **loadingStatus**: image loading status.<br>| | onComplete(callback: (event?: { width: number, height: number, componentWidth: number,<br> componentHeight: number, loadingStatus: number }) =&gt; void) | Triggered when an image is successfully loaded. The size of the loaded image is returned.<br>- **width**: width of the image, in pixels.<br>- **height**: height of the image, in pixels.<br>- **componentWidth**: width of the container component, in pixels.<br>- **componentHeight**: height of the container component, in pixels.<br>- **loadingStatus**: image loading status.<br>Since API version 9, this API is supported in ArkTS widgets.|
| onError(callback: (event?: { componentWidth: number, componentHeight: number , message<sup>9+</sup>: string }) =&gt; void) | Triggered when an exception occurs during image loading.<br>- **componentWidth**: width of the container component, in pixels.<br>- **componentHeight**: height of the container component, in pixels.| | onError(callback: (event?: { componentWidth: number, componentHeight: number , message<sup>9+</sup>: string }) =&gt; void) | Triggered when an exception occurs during image loading.<br>- **componentWidth**: width of the container component, in pixels.<br>- **componentHeight**: height of the container component, in pixels.<br>Since API version 9, this API is supported in ArkTS widgets.|
| onFinish(event: () =&gt; 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.| | onFinish(event: () =&gt; 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.<br>Since API version 9, this API is supported in ArkTS widgets.|
## Example ## Example
...@@ -156,7 +162,7 @@ struct ImageExample1 { ...@@ -156,7 +162,7 @@ struct ImageExample1 {
### Loading Online Images ### 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 **\<Image>** 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 **\<Image>** component. For details about image development, see [Image Development](../../media/image.md). The code snippet is as follows:
```tsx ```tsx
// @ts-nocheck // @ts-nocheck
...@@ -355,20 +361,16 @@ struct ImageExample3 { ...@@ -355,20 +361,16 @@ struct ImageExample3 {
### Rendering Sandbox Images ### Rendering Sandbox Images
```ts ```ts
import fileio from '@ohos.fileio' import fileio from '@ohos.fileio';
import fs from '@ohos.file.fs' import fs from '@ohos.file.fs';
import context from '@ohos.application.context' import context from '@ohos.app.ability.common';
@Entry @Entry
@Component @Component
struct LoadImageExample { struct LoadImageExample {
@State resourcesPath: string = '' @State resourcesPath: string = ''
@State sandboxPath: string = '' @State sandboxPath: string = ''
context: context.AbilityContext context: context.UIAbility = getContext(this) as context.UIAbilityContext
aboutToAppear() {
this.context = getContext(this) as context.AbilityContext
}
build() { build() {
Column() { Column() {
......
en/application-dev/reference/arkui-ts/ts-basic-components-loadingprogress.md
浏览文件 @ 11e5d007
...@@ -18,11 +18,13 @@ LoadingProgress() ...@@ -18,11 +18,13 @@ LoadingProgress()
Creates a **\<LoadingProgress>** component. Creates a **\<LoadingProgress>** component.
Since API version 9, this API is supported in ArkTS widgets.
## Attributes ## Attributes
| Name| Type| Description| | Name| Type| Description|
| -------- | -------- | -------- | | -------- | -------- | -------- |
| color | [ResourceColor](ts-types.md#resourcecolor) | Foreground color of the **\<LoadingProgress>** component.| | color | [ResourceColor](ts-types.md#resourcecolor) | Foreground color of the **\<LoadingProgress>** component.<br>Since API version 9, this API is supported in ArkTS widgets.|
## Example ## Example
......
en/application-dev/reference/arkui-ts/ts-basic-components-marquee.md
浏览文件 @ 11e5d007
...@@ -17,29 +17,31 @@ Not supported ...@@ -17,29 +17,31 @@ Not supported
Marquee(value: { start: boolean, step?: number, loop?: number, fromStart?: boolean, src: string }) Marquee(value: { start: boolean, step?: number, loop?: number, fromStart?: boolean, src: string })
Since API version 9, this API is supported in ArkTS widgets.
**Parameters** **Parameters**
| Name| Type| Mandatory| Description| | Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- |
| start | boolean | Yes| Whether to start scrolling.| | start | boolean | Yes| Whether to start scrolling.|
| step | number | No| Scrolling step.<br>Default value: **6**, in vp| | step | number | No| Scrolling step.<br>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.<br>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.<br>Default value: **-1**<br>**NOTE**<br>Regardless of the value, the marquee scrolls only once on an ArkTS widget.|
| fromStart | boolean | No| Whether the text scrolls from the start.<br>Default value: **true**| | fromStart | boolean | No| Whether the text scrolls from the start.<br>Default value: **true**|
| src | string | Yes| Text to scroll.| | src | string | Yes| Text to scroll.|
## Attributes ## Attributes
| Name | Type| Description | | Name | Type| Description |
| ---------- | -------- | ------------------------------------ | | ---------- | -------- | ------------------------------------------------------------ |
| allowScale | boolean | Whether to allow text to scale.<br>Default value: **false**| | allowScale | boolean | Whether to allow text to scale.<br>Default value: **false**<br>Since API version 9, this API is supported in ArkTS widgets.|
## Events ## Events
| Name| Description| | Name| Description|
| -------- | -------- | | -------- | -------- |
| onStart(event: () =&gt; void) | Triggered when the marquee starts scrolling.| | onStart(event: () =&gt; void) | Triggered when the marquee starts scrolling.<br>Since API version 9, this API is supported in ArkTS widgets.|
| onBounce(event: () =&gt; 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**.| | onBounce(event: () =&gt; 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**.<br>Since API version 9, this API is supported in ArkTS widgets.|
| onFinish(event: () =&gt; void) | Triggered when the marquee has finished the number of scrolling times set by the **loop** attribute.| | onFinish(event: () =&gt; void) | Triggered when the marquee has finished the number of scrolling times set by the **loop** attribute.<br>Since API version 9, this API is supported in ArkTS widgets.|
## Example ## Example
......
en/application-dev/reference/arkui-ts/ts-basic-components-progress.md
浏览文件 @ 11e5d007
...@@ -18,17 +18,21 @@ Progress(options: {value: number, total?: number, type?: ProgressType}) ...@@ -18,17 +18,21 @@ Progress(options: {value: number, total?: number, type?: ProgressType})
Creates a progress indicator. Creates a progress indicator.
Since API version 9, this API is supported in ArkTS widgets.
**Parameters** **Parameters**
| Name| Type| Mandatory| Description| | 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.| | 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.<br>Since API version 9, this API is supported in ArkTS widgets.|
| total | number | No| Total progress.<br>Default value: **100**| | total | number | No| Total progress.<br>Default value: **100**<br>Since API version 9, this API is supported in ArkTS widgets.|
| type<sup>8+</sup> | [ProgressType](#progresstype) | No| Style the progress indicator.<br>Default value: **ProgressType.Linear**| | type<sup>8+</sup> | [ProgressType](#progresstype) | No| Style the progress indicator.<br>Default value: **ProgressType.Linear**<br>Since API version 9, this API is supported in ArkTS widgets.|
| style<sup>deprecated</sup> | [ProgressStyle](#progressstyle) | No| Type of the progress indicator.<br>This parameter is deprecated since API version 8. You are advised to use **type** instead.<br>Default value: **ProgressStyle.Linear**| | style<sup>deprecated</sup> | [ProgressStyle](#progressstyle) | No| Type of the progress indicator.<br>This parameter is deprecated since API version 8. You are advised to use **type** instead.<br>Default value: **ProgressStyle.Linear**|
## ProgressType ## ProgressType
Since API version 9, this API is supported in ArkTS widgets.
| Name| Description| | 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.| | 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. ...@@ -39,6 +43,8 @@ Creates a progress indicator.
## ProgressStyle ## ProgressStyle
Since API version 9, this API is supported in ArkTS widgets.
| Name | Description | | Name | Description |
| --------- | ------------------------------------------------------------ | | --------- | ------------------------------------------------------------ |
| Linear | Linear type.| | Linear | Linear type.|
...@@ -51,10 +57,10 @@ Creates a progress indicator. ...@@ -51,10 +57,10 @@ Creates a progress indicator.
| Name| Type| Description| | 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.| | 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.<br>Since API version 9, this API is supported in ArkTS widgets.|
| color | [ResourceColor](ts-types.md#resourcecolor) | Background color of the progress indicator.| | color | [ResourceColor](ts-types.md#resourcecolor) | Background color of the progress indicator.<br>Since API version 9, this API is supported in ArkTS widgets.|
| backgroundColor | [ResourceColor](ts-types.md#resourcecolor) | Background color of the progress indicator.| | backgroundColor | [ResourceColor](ts-types.md#resourcecolor) | Background color of the progress indicator.<br>Since API version 9, this API is supported in ArkTS widgets.|
| style<sup>8+</sup> | {<br>strokeWidth?: [Length](ts-types.md#length),<br>scaleCount?: number,<br>scaleWidth?: [Length](ts-types.md#length)<br>} | Component style.<br>- **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.<br>Default value: **4.0Vp**<br>- **scaleCount**: number of divisions on the determinate ring-type process indicator.<br>Default value: **120**<br>- **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.<br>Default value: **2.0Vp**| | style<sup>8+</sup> | {<br>strokeWidth?: [Length](ts-types.md#length),<br>scaleCount?: number,<br>scaleWidth?: [Length](ts-types.md#length)<br>} | Component style.<br>- **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.<br>Default value: **4.0Vp**<br>- **scaleCount**: number of divisions on the determinate ring-type process indicator.<br>Default value: **120**<br>- **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.<br>Default value: **2.0Vp**<br>Since API version 9, this API is supported in ArkTS widgets.|
## Example ## Example
......
en/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md
浏览文件 @ 11e5d007
...@@ -1923,7 +1923,7 @@ setTransform(transform?: Matrix2D): void ...@@ -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. 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 ### translate
......
en/application-dev/reference/arkui-ts/ts-components-canvas-canvas.md
浏览文件 @ 11e5d007
...@@ -14,6 +14,8 @@ Not supported ...@@ -14,6 +14,8 @@ Not supported
Canvas(context?: CanvasRenderingContext2D) Canvas(context?: CanvasRenderingContext2D)
Since API version 9, this API is supported in ArkTS widgets.
**Parameters** **Parameters**
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory | Default Value | Description |
...@@ -30,7 +32,7 @@ In addition to the [universal events](ts-universal-events-click.md), the followi ...@@ -30,7 +32,7 @@ In addition to the [universal events](ts-universal-events-click.md), the followi
| Name | Parameter | Description | | 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.<br>Since API version 9, this API is supported in ArkTS widgets.|
**Example** **Example**
......
en/application-dev/reference/arkui-ts/ts-components-canvas-canvasgradient.md
浏览文件 @ 11e5d007
...@@ -14,6 +14,8 @@ addColorStop(offset: number, color: string): void ...@@ -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. 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** **Parameters**
......
en/application-dev/reference/arkui-ts/ts-components-canvas-imagebitmap.md
浏览文件 @ 11e5d007
...@@ -2,9 +2,21 @@ ...@@ -2,9 +2,21 @@
An **ImageBitmap** object stores pixel data rendered on a canvas. An **ImageBitmap** object stores pixel data rendered on a canvas.
> **NOTE** > **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. > 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.<br>**NOTE**<br>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. ...@@ -12,8 +24,8 @@ An **ImageBitmap** object stores pixel data rendered on a canvas.
| Name| Type| Description| | Name| Type| Description|
| -------- | -------- | -------- | | -------- | -------- | -------- |
| width | number | Pixel width of the **ImageBitmap** object.| | width | number | Pixel width of the **ImageBitmap** object.<br>Since API version 9, this API is supported in ArkTS widgets.|
| height | number | Pixel height of the **ImageBitmap** object.| | height | number | Pixel height of the **ImageBitmap** object.<br>Since API version 9, this API is supported in ArkTS widgets.|
**Example** **Example**
...@@ -54,3 +66,5 @@ An **ImageBitmap** object stores pixel data rendered on a canvas. ...@@ -54,3 +66,5 @@ An **ImageBitmap** object stores pixel data rendered on a canvas.
close() close()
Releases all graphics resources associated with this **ImageBitmap** object. This API is a void API. 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.
en/application-dev/reference/arkui-ts/ts-components-canvas-imagedata.md
浏览文件 @ 11e5d007
...@@ -12,9 +12,9 @@ An **ImageData** object stores pixel data rendered on a canvas. ...@@ -12,9 +12,9 @@ An **ImageData** object stores pixel data rendered on a canvas.
| Name| Type| Description| | Name| Type| Description|
| -------- | -------- | -------- | | -------- | -------- | -------- |
| width | number | Actual width of the rectangle on the canvas, in pixels.| | width | number | Actual width of the rectangle on the canvas, in pixels.<br>Since API version 9, this API is supported in ArkTS widgets.|
| height | number | Actual height of the rectangle on the canvas, in pixels.| | height | number | Actual height of the rectangle on the canvas, in pixels.<br>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.| | data | Uint8ClampedArray | A one-dimensional array of color values. The values range from 0 to 255.<br>Since API version 9, this API is supported in ArkTS widgets.|
> **NOTE** > **NOTE**
> >
......
en/application-dev/reference/arkui-ts/ts-components-canvas-path2d.md
浏览文件 @ 11e5d007
...@@ -14,6 +14,8 @@ addPath(path: path2D, transform?:Matrix2D): void ...@@ -14,6 +14,8 @@ addPath(path: path2D, transform?:Matrix2D): void
Adds a path to this path. Adds a path to this path.
Since API version 9, this API is supported in ArkTS widgets.
**Parameters** **Parameters**
| Name| Type| Mandatory| Default Value| Description| | Name| Type| Mandatory| Default Value| Description|
...@@ -61,6 +63,8 @@ closePath(): void ...@@ -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. 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** **Example**
```ts ```ts
...@@ -101,6 +105,8 @@ moveTo(x: number, y: number): void ...@@ -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. 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** **Parameters**
| Name| Type| Mandatory| Default Value| Description| | Name| Type| Mandatory| Default Value| Description|
...@@ -148,6 +154,8 @@ lineTo(x: number, y: number): void ...@@ -148,6 +154,8 @@ lineTo(x: number, y: number): void
Draws a straight line from the current point to the target point. Draws a straight line from the current point to the target point.
Since API version 9, this API is supported in ArkTS widgets.
**Parameters** **Parameters**
| Name| Type| Mandatory| Default Value| Description| | Name| Type| Mandatory| Default Value| Description|
...@@ -196,6 +204,8 @@ bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, ...@@ -196,6 +204,8 @@ bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number,
Draws a cubic bezier curve on the canvas. Draws a cubic bezier curve on the canvas.
Since API version 9, this API is supported in ArkTS widgets.
**Parameters** **Parameters**
| Name| Type| Mandatory| Default Value| Description| | Name| Type| Mandatory| Default Value| Description|
...@@ -245,6 +255,8 @@ quadraticCurveTo(cpx: number, cpy: number, x: number ,y: number): void ...@@ -245,6 +255,8 @@ quadraticCurveTo(cpx: number, cpy: number, x: number ,y: number): void
Draws a quadratic curve on the canvas. Draws a quadratic curve on the canvas.
Since API version 9, this API is supported in ArkTS widgets.
**Parameters** **Parameters**
| Name| Type| Mandatory| Default Value| Description| | Name| Type| Mandatory| Default Value| Description|
...@@ -292,6 +304,8 @@ arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, ...@@ -292,6 +304,8 @@ arc(x: number, y: number, radius: number, startAngle: number, endAngle: number,
Draws an arc on the canvas. Draws an arc on the canvas.
Since API version 9, this API is supported in ArkTS widgets.
**Parameters** **Parameters**
| Name| Type| Mandatory| Default Value| Description| | Name| Type| Mandatory| Default Value| Description|
...@@ -340,6 +354,8 @@ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void ...@@ -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. Draws an arc based on the radius and points on the arc.
Since API version 9, this API is supported in ArkTS widgets.
**Parameters** **Parameters**
| Name| Type| Mandatory| Default Value| Description| | Name| Type| Mandatory| Default Value| Description|
...@@ -387,6 +403,8 @@ ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number ...@@ -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. Draws an ellipse in the specified rectangular region on the canvas.
Since API version 9, this API is supported in ArkTS widgets.
**Parameters** **Parameters**
| Name| Type| Mandatory| Default Value| Description| | Name| Type| Mandatory| Default Value| Description|
...@@ -437,6 +455,8 @@ rect(x: number, y: number, w: number, h: number): void ...@@ -437,6 +455,8 @@ rect(x: number, y: number, w: number, h: number): void
Creates a rectangle on the canvas. Creates a rectangle on the canvas.
Since API version 9, this API is supported in ArkTS widgets.
**Parameters** **Parameters**
| Name| Type| Mandatory| Default Value| Description| | Name| Type| Mandatory| Default Value| Description|
......
en/application-dev/reference/arkui-ts/ts-container-badge.md
浏览文件 @ 11e5d007
...@@ -18,7 +18,10 @@ This component supports only one child component. ...@@ -18,7 +18,10 @@ This component supports only one child component.
Creates a badge. Creates a badge.
Since API version 9, this API is supported in ArkTS widgets.
**Parameters** **Parameters**
| Name| Type| Mandatory| Default Value| Description| | Name| Type| Mandatory| Default Value| Description|
| -------- | -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- | -------- |
| count | number | Yes| - | Number of notifications.| | count | number | Yes| - | Number of notifications.|
...@@ -30,6 +33,8 @@ Creates a badge. ...@@ -30,6 +33,8 @@ Creates a badge.
Creates a badge based on the given string. Creates a badge based on the given string.
Since API version 9, this API is supported in ArkTS widgets.
**Parameters** **Parameters**
| Name| Type| Mandatory| Default Value| Description| | Name| Type| Mandatory| Default Value| Description|
...@@ -40,6 +45,8 @@ Creates a badge based on the given string. ...@@ -40,6 +45,8 @@ Creates a badge based on the given string.
## BadgePosition ## BadgePosition
Since API version 9, this API is supported in ArkTS widgets.
| Name| Description| | Name| Description|
| -------- | -------- | | -------- | -------- |
| RightTop | The badge is displayed in the upper right corner of the parent component.| | 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. ...@@ -48,6 +55,8 @@ Creates a badge based on the given string.
## BadgeStyle ## BadgeStyle
Since API version 9, this API is supported in ArkTS widgets.
| Name | Type | Mandatory| Default Value | Description | | Name | Type | Mandatory| Default Value | Description |
| ---------- | ------------------------------------------ | ---- | ----------- | ------------------------------------------- | | ---------- | ------------------------------------------ | ---- | ----------- | ------------------------------------------- |
| color | [ResourceColor](ts-types.md#resourcecolor) | No | Color.White | Font color. | | color | [ResourceColor](ts-types.md#resourcecolor) | No | Color.White | Font color. |
......
en/application-dev/reference/arkui-ts/ts-container-column.md
浏览文件 @ 11e5d007
...@@ -16,11 +16,13 @@ Supported ...@@ -16,11 +16,13 @@ Supported
Column(value?: {space?: string | number}) Column(value?: {space?: string | number})
Since API version 9, this API is supported in ArkTS widgets.
**Parameters** **Parameters**
| Name| Type| Mandatory| Description| | Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- |
| space | string \| number | No| Vertical spacing between two adjacent child components.<br>Since API version 9, this parameter does not take effect when it is set to a negative number.<br>Default value: **0**| | space | string \| number | No| Vertical spacing between two adjacent child components.<br>Since API version 9, this parameter does not take effect when it is set to a negative number.<br>Default value: **0** |
## Attributes ## Attributes
...@@ -28,8 +30,8 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the ...@@ -28,8 +30,8 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
| Name| Type| Description| | Name| Type| Description|
| -------- | -------- | -------- | | -------- | -------- | -------- |
| alignItems | [HorizontalAlign](ts-appendix-enums.md#horizontalalign) | Alignment mode of the child components in the horizontal direction.<br>Default value: **HorizontalAlign.Center**| | alignItems | [HorizontalAlign](ts-appendix-enums.md#horizontalalign) | Alignment mode of the child components in the horizontal direction.<br>Default value: **HorizontalAlign.Center**<br>Since API version 9, this API is supported in ArkTS widgets.|
| justifyContent<sup>8+</sup> | [FlexAlign](ts-container-flex.md) | Alignment mode of the child components in the vertical direction.<br>Default value: **FlexAlign.Start**| | justifyContent<sup>8+</sup> | [FlexAlign](ts-appendix-enums.md#flexalign) | Alignment mode of the child components in the vertical direction.<br>Default value: **FlexAlign.Start**<br>Since API version 9, this API is supported in ArkTS widgets.|
## Example ## Example
......
en/application-dev/reference/arkui-ts/ts-container-counter.md
浏览文件 @ 11e5d007
...@@ -16,6 +16,8 @@ Supported ...@@ -16,6 +16,8 @@ Supported
Counter() Counter()
Since API version 9, this API is supported in ArkTS widgets.
## Events ## Events
...@@ -23,8 +25,8 @@ The universal events and gestures are not supported. Only the following events a ...@@ -23,8 +25,8 @@ The universal events and gestures are not supported. Only the following events a
| Name| Description| | Name| Description|
| -------- | -------- | | -------- | -------- |
| onInc(event: () =&gt; void) | Invoked when the number of monitored objects is increased.| | onInc(event: () =&gt; void) | Invoked when the number of monitored objects is increased.<br>Since API version 9, this API is supported in ArkTS widgets.|
| onDec(event: () =&gt; void) | Invoked when the number of monitored objects is decreased.| | onDec(event: () =&gt; void) | Invoked when the number of monitored objects is decreased.<br>Since API version 9, this API is supported in ArkTS widgets.|
## Example ## Example
......
en/application-dev/reference/arkui-ts/ts-container-flex.md
浏览文件 @ 11e5d007
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
The **\<Flex>** component allows for flexible layout of child components. The **\<Flex>** component allows for flexible layout of child components.
> **NOTE** > **NOTE**
> >
> - This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. > - This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
> - The **\<Flex>** component adapts the layout of flex items during rendering. This may affect the performance. Therefore, you are advised to use **[\<Column>](ts-container-column.md)** or **[\<Row>](ts-container-row.md)** instead under scenarios where consistently high performance is required. > - The **\<Flex>** component adapts the layout of flex items during rendering. This may affect the performance. Therefore, you are advised to use **[\<Column>](ts-container-column.md)** or **[\<Row>](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 ...@@ -19,11 +19,13 @@ Flex(value?: { direction?: FlexDirection, wrap?: FlexWrap, justifyContent?: Fle
Creates a standard **\<Flex>** component. Creates a standard **\<Flex>** component.
Since API version 9, this API is supported in ArkTS widgets.
**Parameters** **Parameters**
| Name | Type | Mandatory | Default Value | Description | | 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 **\<Flex>** 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 **\<Flex>** component, that is, the direction of the main axis. |
| wrap | [FlexWrap](ts-appendix-enums.md#flexwrap) | No | FlexWrap.NoWrap | Whether the **\<Flex>** component has a single line or multiple lines. | | wrap | [FlexWrap](ts-appendix-enums.md#flexwrap) | No | FlexWrap.NoWrap | Whether the **\<Flex>** 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 **\<Flex>** component along the main axis. | | justifyContent | [FlexAlign](ts-appendix-enums.md#flexalign) | No | FlexAlign.Start | Alignment mode of the child components in the **\<Flex>** component along the main axis. |
| alignItems | [ItemAlign](ts-appendix-enums.md#itemalign) | No | ItemAlign.Start | Alignment mode of the child components in the **\<Flex>** component along the cross axis. | | alignItems | [ItemAlign](ts-appendix-enums.md#itemalign) | No | ItemAlign.Start | Alignment mode of the child components in the **\<Flex>** component along the cross axis. |
......
en/application-dev/reference/arkui-ts/ts-container-gridcol.md
浏览文件 @ 11e5d007
...@@ -13,6 +13,8 @@ This component can contain only one child component. ...@@ -13,6 +13,8 @@ This component can contain only one child component.
GridCol(option?:{span?: number | GridColColumnOption, offset?: number | GridColColumnOption, order?: number | GridColColumnOption}) GridCol(option?:{span?: number | GridColColumnOption, offset?: number | GridColColumnOption, order?: number | GridColColumnOption})
Since API version 9, this API is supported in ArkTS widgets.
**Parameters** **Parameters**
| Name| Type | Mandatory| Description | | Name| Type | Mandatory| Description |
...@@ -25,12 +27,14 @@ GridCol(option?:{span?: number | GridColColumnOption, offset?: number | GridColC ...@@ -25,12 +27,14 @@ GridCol(option?:{span?: number | GridColColumnOption, offset?: number | GridColC
| Name| Type | Mandatory| Description | | 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.<br>Default value: **1**| | 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.<br>Default value: **1**<br>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<br>Default value: **0** | | offset | number \| GridColColumnOption | No | Number of offset columns relative to the previous child component of the grid<br>Default value: **0**<br>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.<br>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.<br>Default value: **0**<br>Since API version 9, this API is supported in ArkTS widgets.|
## GridColColumnOption ## GridColColumnOption
Since API version 9, this API is supported in ArkTS widgets.
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| ----- | ------ | ---- | ---------------------------------------- | | ----- | ------ | ---- | ---------------------------------------- |
| xs | number | No | Device of the minimum size. | | xs | number | No | Device of the minimum size. |
...@@ -38,7 +42,7 @@ GridCol(option?:{span?: number | GridColColumnOption, offset?: number | GridColC ...@@ -38,7 +42,7 @@ GridCol(option?:{span?: number | GridColColumnOption, offset?: number | GridColC
| md | number | No | Medium-sized device. | | md | number | No | Medium-sized device. |
| lg | number | No | Large-sized device. | | lg | number | No | Large-sized device. |
| xl | number | No | Extra-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. 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.
......
en/application-dev/reference/arkui-ts/ts-container-gridrow.md
浏览文件 @ 11e5d007
...@@ -15,7 +15,10 @@ This component can contain the **\<GridCol>** child component. ...@@ -15,7 +15,10 @@ This component can contain the **\<GridCol>** child component.
## APIs ## APIs
GridRow(option?: {columns?: number | GridRowColumnOption, gutter?: Length | GutterOption, breakpoints?: BreakPoints, direction?: GridRowDirection}) GridRow(option?: {columns?: number | GridRowColumnOption, gutter?: Length | GutterOption, breakpoints?: BreakPoints, direction?: GridRowDirection})
Since API version 9, this API is supported in ArkTS widgets.
**Parameters** **Parameters**
| Name|Type|Mandatory|Description| | Name|Type|Mandatory|Description|
|-----|-----|----|----| |-----|-----|----|----|
|gutter|Length \| GutterOption| No |Gutter of the grid layout. **x** indicates the horizontal direction.| |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 ...@@ -25,6 +28,8 @@ GridRow(option?: {columns?: number | GridRowColumnOption, gutter?: Length | Gutt
## GutterOption ## GutterOption
Since API version 9, this API is supported in ArkTS widgets.
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| ----- | ------ | ---- | ---------------------------------------- | | ----- | ------ | ---- | ---------------------------------------- |
| x | Length \| GridRowSizeOption | No | Gutter in the horizontal direction. | | x | Length \| GridRowSizeOption | No | Gutter in the horizontal direction. |
...@@ -34,6 +39,8 @@ GridRow(option?: {columns?: number | GridRowColumnOption, gutter?: Length | Gutt ...@@ -34,6 +39,8 @@ GridRow(option?: {columns?: number | GridRowColumnOption, gutter?: Length | Gutt
Describes the numbers of grid columns for different device width types. 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 | | Name | Type | Mandatory | Description |
| ----- | ------ | ---- | ---------------------------------------- | | ----- | ------ | ---- | ---------------------------------------- |
| xs | number | No | Device of the minimum size. | | xs | number | No | Device of the minimum size. |
...@@ -47,6 +54,8 @@ Describes the numbers of grid columns for different device width types. ...@@ -47,6 +54,8 @@ Describes the numbers of grid columns for different device width types.
Describes the gutter sizes 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 | | Name | Type | Mandatory | Description |
| ----- | ------ | ---- | ---------------------------------------- | | ----- | ------ | ---- | ---------------------------------------- |
| xs | Length | No | Device of the minimum size. | | xs | Length | No | Device of the minimum size. |
...@@ -58,6 +67,8 @@ Describes the gutter sizes for different device width types. ...@@ -58,6 +67,8 @@ Describes the gutter sizes for different device width types.
## BreakPoints ## BreakPoints
Since API version 9, this API is supported in ArkTS widgets.
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| ----- | ------ | ---- | ---------------------------------------- | | ----- | ------ | ---- | ---------------------------------------- |
| value | Array&lt;string&gt; | No | Array of monotonically increasing breakpoints.<br>Default value: **["320vp", "520vp", "840vp"]** | | value | Array&lt;string&gt; | No | Array of monotonically increasing breakpoints.<br>Default value: **["320vp", "520vp", "840vp"]** |
...@@ -72,12 +83,18 @@ Describes the gutter sizes for different device width types. ...@@ -72,12 +83,18 @@ Describes the gutter sizes for different device width types.
``` ```
## BreakpointsReference ## BreakpointsReference
Since API version 9, this API is supported in ArkTS widgets.
| Name| Description| | Name| Description|
| -------- | -------- | | -------- | -------- |
| WindowSize | The window is used as a reference.| | WindowSize | The window is used as a reference.|
| ComponentSize | The container is used as a reference.| | ComponentSize | The container is used as a reference.|
## GridRowDirection ## GridRowDirection
Since API version 9, this API is supported in ArkTS widgets.
| Name| Description| | Name| Description|
| -------- | -------- | | -------- | -------- |
| Row | Grid elements are arranged in the row direction.| | Row | Grid elements are arranged in the row direction.|
...@@ -118,6 +135,8 @@ The [universal attributes](ts-universal-attributes-size.md) are supported. ...@@ -118,6 +135,8 @@ The [universal attributes](ts-universal-attributes-size.md) are supported.
onBreakpointChange(callback: (breakpoints: string) => void) onBreakpointChange(callback: (breakpoints: string) => void)
Since API version 9, this API is supported in ArkTS widgets.
**Parameters** **Parameters**
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
......
en/application-dev/reference/arkui-ts/ts-container-list.md
浏览文件 @ 11e5d007
...@@ -17,6 +17,8 @@ This component supports the **[\<ListItem>](ts-container-listitem.md)** and **[\ ...@@ -17,6 +17,8 @@ This component supports the **[\<ListItem>](ts-container-listitem.md)** and **[\
List(value?:{space?: number | string, initialIndex?: number, scroller?: Scroller}) List(value?:{space?: number | string, initialIndex?: number, scroller?: Scroller})
Since API version 9, this API is supported in ArkTS widgets.
**Parameters** **Parameters**
| Name| Type| Mandatory| Description| | Name| Type| Mandatory| Description|
...@@ -31,20 +33,22 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the ...@@ -31,20 +33,22 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
| Name| Type| Description| | Name| Type| Description|
| -------- | -------- | -------- | | -------- | -------- | -------- |
| listDirection | [Axis](ts-appendix-enums.md#axis) | Direction in which the list items are arranged.<br>Default value: **Axis.Vertical**| | listDirection | [Axis](ts-appendix-enums.md#axis) | Direction in which the list items are arranged.<br>Default value: **Axis.Vertical**<br>Since API version 9, this API is supported in ArkTS widgets.|
| divider | {<br>strokeWidth: [Length](ts-types.md#length),<br>color?:[ResourceColor](ts-types.md),<br>startMargin?: Length,<br>endMargin?: Length<br>} \| null | Style of the divider for the list items. By default, there is no divider.<br>- **strokeWidth**: stroke width of the divider.<br>- **color**: color of the divider.<br>- **startMargin**: distance between the divider and the start edge of the list.<br>- **endMargin**: distance between the divider and the end edge of the list.| | divider | {<br>strokeWidth: [Length](ts-types.md#length),<br>color?:[ResourceColor](ts-types.md#resourcecolor),<br>startMargin?: Length,<br>endMargin?: Length<br>} \| null | Style of the divider for the list items. By default, there is no divider.<br>- **strokeWidth**: stroke width of the divider.<br>- **color**: color of the divider.<br>- **startMargin**: distance between the divider and the start edge of the list.<br>- **endMargin**: distance between the divider and the end edge of the list.<br>Since API version 9, this API is supported in ArkTS widgets.|
| scrollBar | [BarState](ts-appendix-enums.md#barstate) | Scrollbar status.<br>Default value: **BarState.Off**| | scrollBar | [BarState](ts-appendix-enums.md#barstate) | Scrollbar status.<br>Default value: **BarState.Off**<br>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).<br>Default value: **1**| | 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).<br>Default value: **1**<br>Since API version 9, this API is supported in ArkTS widgets.|
| editMode | boolean | Whether to enter editing mode.<br>Default value: **false** | | editMode | boolean | Whether to enter editing mode.<br>Default value: **false** |
| edgeEffect | [EdgeEffect](ts-appendix-enums.md#edgeeffect) | Scroll effect.<br>Default value: **EdgeEffect.Spring**| | edgeEffect | [EdgeEffect](ts-appendix-enums.md#edgeeffect) | Scroll effect.<br>Default value: **EdgeEffect.Spring**<br>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.<br>Default value: **false**<br>- **false**: No chained animations are displayed.<br>- **true**: Chained animations are displayed.| | 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.<br>Default value: **false**<br>- **false**: No chained animations are displayed.<br>- **true**: Chained animations are displayed.<br>Since API version 9, this API is supported in ArkTS widgets.|
| multiSelectable<sup>8+</sup> | boolean | Whether to enable mouse frame selection.<br>Default value: **false**<br>- **false**: The mouse frame selection is disabled.<br>- **true**: The mouse frame selection is enabled.| | multiSelectable<sup>8+</sup> | boolean | Whether to enable mouse frame selection.<br>Default value: **false**<br>- **false**: The mouse frame selection is disabled.<br>- **true**: The mouse frame selection is enabled.<br>Since API version 9, this API is supported in ArkTS widgets.|
| lanes<sup>9+</sup> | number \| [LengthConstrain](ts-types.md#lengthconstrain) | In the following description, **listDirection** is set to **Axis.Vertical**:<br>Number of columns in which the list items are arranged along the cross axis.<br>Default value: **1**<br>The rules are as follows:<br>- 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 **\<List>** component.<br>- If the value is set to {minLength, maxLength}, the number of columns is adjusted adaptively based on the width of the **\<List>** 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 **\<List>** 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 **\<List>** component is changed to 80 vp, which is twice the value of **minLength**, the list items are arranged in two columns.| | lanes<sup>9+</sup> | number \| [LengthConstrain](ts-types.md#lengthconstrain) | In the following description, **listDirection** is set to **Axis.Vertical**:<br>Number of columns in which the list items are arranged along the cross axis.<br>Default value: **1**<br>The rules are as follows:<br>- 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 **\<List>** component.<br>- If the value is set to {minLength, maxLength}, the number of columns is adjusted adaptively based on the width of the **\<List>** 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 **\<List>** 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 **\<List>** component is changed to 80 vp, which is twice the value of **minLength**, the list items are arranged in two columns.<br>This API is supported in ArkTS widgets.|
| alignListItem<sup>9+</sup> | ListItemAlign | Alignment mode of list items along the cross axis when: Cross-axis width of the **\<List>** component > Cross-axis width of list items x Value of **lanes**.<br>Default value: **ListItemAlign.Start**| | alignListItem<sup>9+</sup> | ListItemAlign | Alignment mode of list items along the cross axis when: Cross-axis width of the **\<List>** component > Cross-axis width of list items x Value of **lanes**.<br>Default value: **ListItemAlign.Start**<br>This API is supported in ArkTS widgets.|
| sticky<sup>9+</sup> | StickyStyle | Whether to pin the header to the top or the footer to the bottom in the **\<ListItemGroup>** component. This attribute is used together with the **[\<ListItemGroup>](ts-container-listitemgroup.md)** component.<br>Default value: **StickyStyle.None**<br>**NOTE**<br>The **sticky** attribute can be set to **StickyStyle.Header** or \| **StickyStyle.Footer** to support both the pin-to-top and pin-to-bottom features.| | sticky<sup>9+</sup> | StickyStyle | Whether to pin the header to the top or the footer to the bottom in the **\<ListItemGroup>** component. This attribute is used together with the **[\<ListItemGroup>](ts-container-listitemgroup.md)** component.<br>Default value: **StickyStyle.None**<br>This API is supported in ArkTS widgets.<br>**NOTE**<br>The **sticky** attribute can be set to **StickyStyle.Header** or \| **StickyStyle.Footer** to support both the pin-to-top and pin-to-bottom features.|
## ListItemAlign<sup>9+</sup> ## ListItemAlign<sup>9+</sup>
This API is supported in ArkTS widgets.
| Name | Description | | Name | Description |
| ------ | -------------------------------------- | | ------ | -------------------------------------- |
| Start | The list items are packed toward the start edge of the **\<List>** component along the cross axis.| | Start | The list items are packed toward the start edge of the **\<List>** component along the cross axis.|
...@@ -53,6 +57,8 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the ...@@ -53,6 +57,8 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
## StickyStyle<sup>9+</sup> ## StickyStyle<sup>9+</sup>
This API is supported in ArkTS widgets.
| Name | Description | | Name | Description |
| ------ | -------------------------------------- | | ------ | -------------------------------------- |
| None | In the **\<ListItemGroup>** component, the header is not pinned to the top, and the footer is not pinned to the bottom.| | None | In the **\<ListItemGroup>** 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 ...@@ -66,13 +72,13 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
| Name| Description| | Name| Description|
| -------- | -------- | | -------- | -------- |
| onItemDelete(event: (index: number) => boolean) | Triggered when a list item is deleted.<br>- **index**: index of the deleted list item. | | onItemDelete(event: (index: number) => boolean) | Triggered when a list item is deleted.<br>- **index**: index of the deleted list item. |
| onScroll(event: (scrollOffset: number, scrollState: ScrollState) => void) | Triggered when the list scrolls.<br>- **scrollOffset**: scroll offset.<br>- **[scrollState](#scrollstate)**: current scroll state.| | onScroll(event: (scrollOffset: number, scrollState: ScrollState) => void) | Triggered when the list scrolls.<br>- **scrollOffset**: scroll offset.<br>- **[scrollState](#scrollstate)**: current scroll state.<br>Since API version 9, this API is supported in ArkTS widgets.|
| onScrollIndex(event: (start: number, end: number) => void) | Triggered when scrolling starts.<br>When calculating the index value, the **\<ListItemGroup>** accounts for one index value as a whole, and the index values of the list items within are not calculated.<br>- **start**: index of the scroll start position.<br>- **end**: index of the scroll end position.| | onScrollIndex(event: (start: number, end: number) => void) | Triggered when scrolling starts.<br>When calculating the index value, the **\<ListItemGroup>** accounts for one index value as a whole, and the index values of the list items within are not calculated.<br>- **start**: index of the scroll start position.<br>- **end**: index of the scroll end position.<br>Since API version 9, this API is supported in ArkTS widgets.|
| onReachStart(event: () => void) | Triggered when the list reaches the start position.| | onReachStart(event: () => void) | Triggered when the list reaches the start position.<br>Since API version 9, this API is supported in ArkTS widgets.|
| onReachEnd(event: () => void) | Triggered when the list reaches the end position.| | onReachEnd(event: () => void) | Triggered when the list reaches the end position.<br>Since API version 9, this API is supported in ArkTS widgets.|
| onScrollFrameBegin<sup>9+</sup>(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.<br>\- **offset**: amount to scroll by.<br>\- **state**: current sliding status.<br>- **offsetRemain**: required amount to scroll by in the horizontal direction.| | onScrollFrameBegin<sup>9+</sup>(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.<br>\- **offset**: amount to scroll by.<br>\- **state**: current sliding status.<br>- **offsetRemain**: actual amount by which the list scrolls.<br>This API is supported in ArkTS widgets.|
| onScrollStart<sup>9+</sup>(event: () => void) | Triggered when the list starts scrolling initiated by the user's finger dragging the **\<Scroll>** component or its scrollbar. This event will not be triggered if the scrolling is initiated by using [Scroller](ts-container-scroll.md#scroller).| | onScrollStart<sup>9+</sup>(event: () => void) | Triggered when the list starts scrolling initiated by the user's finger dragging the **\<Scroll>** 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 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 is also triggered when the animation contained in the scrolling triggered by [Scroller](ts-container-scroll.md#scroller) stops.<br>Since API version 9, this API is supported in ArkTS widgets.|
| onItemMove(event: (from: number, to: number) => boolean) | Triggered when a list item moves.<br>- **from**: index of the item before moving.<br>- **to**: index of the item after moving.| | onItemMove(event: (from: number, to: number) => boolean) | Triggered when a list item moves.<br>- **from**: index of the item before moving.<br>- **to**: index of the item after moving.|
| onItemDragStart(event: (event: ItemDragInfo, itemIndex: number) => ((() => any) \| void) | Triggered when a list element starts to be dragged.<br>- **event**: See [ItemDragInfo](ts-container-grid.md#itemdraginfo).<br>- **itemIndex**: index of the dragged list element.| | onItemDragStart(event: (event: ItemDragInfo, itemIndex: number) => ((() => any) \| void) | Triggered when a list element starts to be dragged.<br>- **event**: See [ItemDragInfo](ts-container-grid.md#itemdraginfo).<br>- **itemIndex**: index of the dragged list element.|
| onItemDragEnter(event: (event: ItemDragInfo) => void) | Triggered when the dragged item enters the drop target of the list.<br>- **event**: See [ItemDragInfo](ts-container-grid.md#itemdraginfo).| | onItemDragEnter(event: (event: ItemDragInfo) => void) | Triggered when the dragged item enters the drop target of the list.<br>- **event**: See [ItemDragInfo](ts-container-grid.md#itemdraginfo).|
...@@ -82,6 +88,8 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the ...@@ -82,6 +88,8 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
## ScrollState ## ScrollState
Since API version 9, this API is supported in ArkTS widgets.
| Name | Description | | Name | Description |
| ------ | ------------------------- | | ------ | ------------------------- |
| Idle | Not scrolling. | | Idle | Not scrolling. |
......
en/application-dev/reference/arkui-ts/ts-container-listitem.md
浏览文件 @ 11e5d007
...@@ -16,6 +16,8 @@ This component can contain a single child component. ...@@ -16,6 +16,8 @@ This component can contain a single child component.
ListItem(value?: string) ListItem(value?: string)
Since API version 9, this API is supported in ArkTS widgets.
## Attributes ## Attributes
In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported. 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 ...@@ -24,7 +26,7 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
| -------- | -------- | -------- | | -------- | -------- | -------- |
| sticky<sup>(deprecated)</sup> | [Sticky](#stickydeprecated) | Sticky effect of the list item.<br>Default value: **Sticky.None**<br>This API is deprecated since API version 9. You are advised to use **sticky** of the [\<List>](ts-container-list.md#attributes) component.| | sticky<sup>(deprecated)</sup> | [Sticky](#stickydeprecated) | Sticky effect of the list item.<br>Default value: **Sticky.None**<br>This API is deprecated since API version 9. You are advised to use **sticky** of the [\<List>](ts-container-list.md#attributes) component.|
| editable | boolean \| [EditMode](#editmode) | Whether to enter editing mode, where the list item can be deleted or moved.<br>Default value: **false** | | editable | boolean \| [EditMode](#editmode) | Whether to enter editing mode, where the list item can be deleted or moved.<br>Default value: **false** |
| selectable<sup>8+</sup> | boolean | Whether the current list item is selectable by mouse drag.<br>**NOTE**<br>This attribute takes effect only when mouse frame selection is enabled for the parent **\<List>** container.<br>Default value: **true**| | selectable<sup>8+</sup> | boolean | Whether the current list item is selectable by mouse drag.<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>This attribute takes effect only when mouse frame selection is enabled for the parent **\<List>** container.<br>Default value: **true**|
| swipeAction<sup>9+</sup> | {<br>start?: CustomBuilder,<br>end?:CustomBuilder,<br>edgeEffect?: [SwipeEdgeEffect](#swipeedgeeffect9),<br>} | Component displayed when the list item is swiped out from the screen edge.<br>- **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).<br>- **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).<br>- **edgeEffect**: scroll effect.<br>| | swipeAction<sup>9+</sup> | {<br>start?: CustomBuilder,<br>end?:CustomBuilder,<br>edgeEffect?: [SwipeEdgeEffect](#swipeedgeeffect9),<br>} | Component displayed when the list item is swiped out from the screen edge.<br>- **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).<br>- **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).<br>- **edgeEffect**: scroll effect.<br>|
## Sticky<sup>(deprecated)</sup> ## Sticky<sup>(deprecated)</sup>
...@@ -53,7 +55,7 @@ This API is deprecated since API version 9. You are advised to use [stickyStyle] ...@@ -53,7 +55,7 @@ This API is deprecated since API version 9. You are advised to use [stickyStyle]
| Name| Description| | Name| Description|
| -------- | -------- | | -------- | -------- |
| onSelect(event: (isSelected: boolean) =&gt; void)<sup>8+</sup> | Triggered when the selected state of the **\<ListItem>** changes.<br>**isSelected**: Returns **true** if the **\<ListItem>** is selected by mouse drag; returns **false** otherwise.| | onSelect(event: (isSelected: boolean) =&gt; void)<sup>8+</sup> | Triggered when the selected state of the **\<ListItem>** changes.<br>**isSelected**: Returns **true** if the **\<ListItem>** is selected by mouse drag; returns **false** otherwise.<br>Since API version 9, this API is supported in ArkTS widgets.|
## Example ## Example
......
en/application-dev/reference/arkui-ts/ts-drawing-components-circle.md
浏览文件 @ 11e5d007
...@@ -16,6 +16,8 @@ Not supported ...@@ -16,6 +16,8 @@ Not supported
Circle(options?: {width?: string | number, height?: string | number}) Circle(options?: {width?: string | number, height?: string | number})
Since API version 9, this API is supported in ArkTS widgets.
**Parameters** **Parameters**
| Name| Type| Mandatory| Description| | Name| Type| Mandatory| Description|
...@@ -29,17 +31,17 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the ...@@ -29,17 +31,17 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
| Name| Type| Description| | Name| Type| Description|
| -------- | -------- | -------- | | -------- | -------- | -------- |
| fill | [ResourceColor](ts-types.md) | Color of the fill area.<br>Default value: **Color.Black**| | fill | [ResourceColor](ts-types.md) | Color of the fill area.<br>Default value: **Color.Black**<br>Since API version 9, this API is supported in ArkTS widgets.|
| fillOpacity | number \| string \| [Resource](ts-types.md#resource)| Opacity of the fill area.<br>Default value: **1**| | fillOpacity | number \| string \| [Resource](ts-types.md#resource)| Opacity of the fill area.<br>Default value: **1**<br>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.| | stroke | [ResourceColor](ts-types.md) | Stroke color. If this attribute is not set, the component does not have any stroke.<br>Since API version 9, this API is supported in ArkTS widgets.|
| strokeDashArray | Array&lt;Length&gt; | Stroke dashes.<br>Default value: **[]** | | strokeDashArray | Array&lt;Length&gt; | Stroke dashes.<br>Default value: **[]**<br>Since API version 9, this API is supported in ArkTS widgets.|
| strokeDashOffset | number \| string | Offset of the start point for drawing the stroke.<br>Default value: **0**| | strokeDashOffset | number \| string | Offset of the start point for drawing the stroke.<br>Default value: **0**<br>Since API version 9, this API is supported in ArkTS widgets.|
| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | Cap style of the stroke.<br>Default value: **LineCapStyle.Butt**| | strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | Cap style of the stroke.<br>Default value: **LineCapStyle.Butt**<br>Since API version 9, this API is supported in ArkTS widgets.|
| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | Join style of the stroke.<br>Default value: **LineJoinStyle.Miter**| | strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | Join style of the stroke.<br>Default value: **LineJoinStyle.Miter**<br>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.<br>Default value: **4**<br>**NOTE**<br>This attribute does not take effect for the **\<Circle>** component, because it does not have a miter join.| | strokeMiterLimit | number \| string | Limit on the ratio of the miter length to the value of **strokeWidth** used to draw a miter join.<br>Default value: **4**<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>This attribute does not take effect for the **\<Circle>** component, because it does not have a miter join.|
| strokeOpacity | number \| string \| [Resource](ts-types.md#resource)| Stroke opacity.<br>Default value: **1**<br>**NOTE**<br>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.| | strokeOpacity | number \| string \| [Resource](ts-types.md#resource)| Stroke opacity.<br>Default value: **1**<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>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.<br>Default value: **1**| | strokeWidth | Length | Stroke width.<br>Default value: **1**<br>Since API version 9, this API is supported in ArkTS widgets.|
| antiAlias | boolean | Whether anti-aliasing is enabled.<br>Default value: **true**| | antiAlias | boolean | Whether anti-aliasing is enabled.<br>Default value: **true**<br>Since API version 9, this API is supported in ArkTS widgets.|
## Example ## Example
......
en/application-dev/reference/arkui-ts/ts-drawing-components-ellipse.md
浏览文件 @ 11e5d007
...@@ -16,6 +16,8 @@ Not supported ...@@ -16,6 +16,8 @@ Not supported
Ellipse(options?: {width?: string | number, height?: string | number}) Ellipse(options?: {width?: string | number, height?: string | number})
Since API version 9, this API is supported in ArkTS widgets.
**Parameters** **Parameters**
| Name| Type| Mandatory| Description| | Name| Type| Mandatory| Description|
...@@ -29,17 +31,17 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the ...@@ -29,17 +31,17 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
| Name| Type| Default Value| Description| | Name| Type| Default Value| Description|
| -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- |
| fill | [ResourceColor](ts-types.md) | Color.Black | Color of the fill area.| | fill | [ResourceColor](ts-types.md) | Color.Black | Color of the fill area.<br>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.| | fillOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | Opacity of the fill area.<br>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.| | stroke | [ResourceColor](ts-types.md) | - |Stroke color. If this attribute is not set, the component does not have any stroke.<br>Since API version 9, this API is supported in ArkTS widgets.|
| strokeDashArray | Array&lt;Length&gt; | [] | Stroke dashes.| | strokeDashArray | Array&lt;Length&gt; | [] | Stroke dashes.<br>Since API version 9, this API is supported in ArkTS widgets.|
| strokeDashOffset | number \| string | 0 | Offset of the start point for drawing the stroke.| | strokeDashOffset | number \| string | 0 | Offset of the start point for drawing the stroke.<br>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.| | strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | Cap style of the stroke.<br>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.| | strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | Join style of the stroke.<br>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.<br>**NOTE**<br>This attribute does not take effect for the **\<Ellipse>** component, because it does not have a miter join.| | strokeMiterLimit | number \| string | 4 | Limit on the ratio of the miter length to the value of **strokeWidth** used to draw a miter join.<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>This attribute does not take effect for the **\<Ellipse>** component, because it does not have a miter join.|
| strokeOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | Stroke opacity.<br>**NOTE**<br>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.| | strokeOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | Stroke opacity.<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>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.| | strokeWidth | Length | 1 | Stroke width.<br>Since API version 9, this API is supported in ArkTS widgets.|
| antiAlias | boolean | true | Whether anti-aliasing is enabled.| | antiAlias | boolean | true | Whether anti-aliasing is enabled.<br>Since API version 9, this API is supported in ArkTS widgets.|
## Example ## Example
......
en/application-dev/reference/arkui-ts/ts-drawing-components-line.md
浏览文件 @ 11e5d007
...@@ -15,6 +15,8 @@ Not supported ...@@ -15,6 +15,8 @@ Not supported
Line(value?: {width?: string | number, height?: string | number}) Line(value?: {width?: string | number, height?: string | number})
Since API version 9, this API is supported in ArkTS widgets.
**Parameters** **Parameters**
| Name| Type| Mandatory| Default Value| Description| | Name| Type| Mandatory| Default Value| Description|
...@@ -29,19 +31,19 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the ...@@ -29,19 +31,19 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
| Name| Type| Default Value| Description| | Name| Type| Default Value| Description|
| -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- |
| startPoint | Array&lt;Length&gt; | [0, 0] | Coordinates (relative coordinates) of the start point of the line, in vp.| | startPoint | Array&lt;Length&gt; | [0, 0] | Coordinates (relative coordinates) of the start point of the line, in vp.<br>Since API version 9, this API is supported in ArkTS widgets.|
| endPoint | Array&lt;Length&gt; | [0, 0] | Coordinates (relative coordinates) of the end point of the line, in vp.| | endPoint | Array&lt;Length&gt; | [0, 0] | Coordinates (relative coordinates) of the end point of the line, in vp.<br>Since API version 9, this API is supported in ArkTS widgets.|
| fill | [ResourceColor](ts-types.md#resourcecolor) | Color.Black | Color of the fill area.<br>**NOTE**<br>This attribute does not take effect because the **\<Line>** component cannot be used to draw a closed shape.| | fill | [ResourceColor](ts-types.md#resourcecolor) | Color.Black | Color of the fill area.<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>This attribute does not take effect because the **\<Line>** component cannot be used to draw a closed shape.|
| fillOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | Opacity of the fill area.<br>**NOTE**<br>This attribute does not take effect because the **\<Line>** component cannot be used to draw a closed shape.| | fillOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | Opacity of the fill area.<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>This attribute does not take effect because the **\<Line>** component cannot be used to draw a closed shape.|
| stroke | [ResourceColor](ts-types.md#resourcecolor) | Color.Black | Stroke color.| | stroke | [ResourceColor](ts-types.md) | - | Stroke color. If this attribute is not set, the component does not have any stroke.<br>Since API version 9, this API is supported in ArkTS widgets.|
| strokeDashArray | Array&lt;Length&gt; | [] | Stroke dashes.| | strokeDashArray | Array&lt;Length&gt; | [] | Stroke dashes.<br>Since API version 9, this API is supported in ArkTS widgets.|
| strokeDashOffset | number \| string | 0 | Offset of the start point for drawing the stroke.| | strokeDashOffset | number \| string | 0 | Offset of the start point for drawing the stroke.<br>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.| | strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | Cap style of the stroke.<br>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.| | strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | Join style of the stroke.<br>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.<br>**NOTE**<br>This attribute does not take effect because the **\<Line>** component cannot be used to draw a shape with a sharp angle.| | strokeMiterLimit | number \| string | 4 | Limit value when the sharp angle is drawn as a miter.<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>This attribute does not take effect because the **\<Line>** component cannot be used to draw a shape with a sharp angle.|
| strokeOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | Stroke opacity.<br>**NOTE**<br>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.| | strokeOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | Stroke opacity.<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>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.| | strokeWidth | Length | 1 | Stroke width.<br>Since API version 9, this API is supported in ArkTS widgets.|
| antiAlias | boolean | true | Whether anti-aliasing is enabled.| | antiAlias | boolean | true | Whether anti-aliasing is enabled.<br>Since API version 9, this API is supported in ArkTS widgets.|
## Example ## Example
...@@ -58,6 +60,7 @@ struct LineExample { ...@@ -58,6 +60,7 @@ struct LineExample {
Line() Line()
.startPoint([0, 0]) .startPoint([0, 0])
.endPoint([50, 100]) .endPoint([50, 100])
.stroke(Color.Black)
.backgroundColor('#F5F5F5') .backgroundColor('#F5F5F5')
Line() Line()
.width(200) .width(200)
...@@ -72,6 +75,7 @@ struct LineExample { ...@@ -72,6 +75,7 @@ struct LineExample {
Line({ width: 50, height: 50 }) Line({ width: 50, height: 50 })
.startPoint([0, 0]) .startPoint([0, 0])
.endPoint([100, 100]) .endPoint([100, 100])
.stroke(Color.Black)
.strokeWidth(3) .strokeWidth(3)
.strokeDashArray([10, 3]) .strokeDashArray([10, 3])
.backgroundColor('#F5F5F5') .backgroundColor('#F5F5F5')
...@@ -79,6 +83,7 @@ struct LineExample { ...@@ -79,6 +83,7 @@ struct LineExample {
Line({ width: 50, height: 50 }) Line({ width: 50, height: 50 })
.startPoint([0, 0]) .startPoint([0, 0])
.endPoint([100, 100]) .endPoint([100, 100])
.stroke(Color.Black)
.strokeWidth(3) .strokeWidth(3)
.strokeDashArray([10, 3]) .strokeDashArray([10, 3])
.strokeDashOffset(5) .strokeDashOffset(5)
...@@ -105,6 +110,7 @@ struct LineExample1 { ...@@ -105,6 +110,7 @@ struct LineExample1 {
.height(200) .height(200)
.startPoint([50, 50]) .startPoint([50, 50])
.endPoint([50, 200]) .endPoint([50, 200])
.stroke(Color.Black)
.strokeWidth(20) .strokeWidth(20)
.strokeLineCap(LineCapStyle.Butt) .strokeLineCap(LineCapStyle.Butt)
.backgroundColor('#F5F5F5').margin(10) .backgroundColor('#F5F5F5').margin(10)
...@@ -114,6 +120,7 @@ struct LineExample1 { ...@@ -114,6 +120,7 @@ struct LineExample1 {
.height(200) .height(200)
.startPoint([50, 50]) .startPoint([50, 50])
.endPoint([50, 200]) .endPoint([50, 200])
.stroke(Color.Black)
.strokeWidth(20) .strokeWidth(20)
.strokeLineCap(LineCapStyle.Round) .strokeLineCap(LineCapStyle.Round)
.backgroundColor('#F5F5F5') .backgroundColor('#F5F5F5')
...@@ -123,6 +130,7 @@ struct LineExample1 { ...@@ -123,6 +130,7 @@ struct LineExample1 {
.height(200) .height(200)
.startPoint([50, 50]) .startPoint([50, 50])
.endPoint([50, 200]) .endPoint([50, 200])
.stroke(Color.Black)
.strokeWidth(20) .strokeWidth(20)
.strokeLineCap(LineCapStyle.Square) .strokeLineCap(LineCapStyle.Square)
.backgroundColor('#F5F5F5') .backgroundColor('#F5F5F5')
...@@ -145,29 +153,34 @@ struct LineExample { ...@@ -145,29 +153,34 @@ struct LineExample {
Line() Line()
.startPoint([50, 30]) .startPoint([50, 30])
.endPoint([300, 30]) .endPoint([300, 30])
.stroke(Color.Black)
.strokeWidth(10) .strokeWidth(10)
// Set the interval for strokeDashArray to 50. // Set the interval for strokeDashArray to 50.
Line() Line()
.startPoint([50, 20]) .startPoint([50, 20])
.endPoint([300, 20]) .endPoint([300, 20])
.stroke(Color.Black)
.strokeWidth(10) .strokeWidth(10)
.strokeDashArray([50]) .strokeDashArray([50])
// Set the interval for strokeDashArray to 50, 10. // Set the interval for strokeDashArray to 50, 10.
Line() Line()
.startPoint([50, 20]) .startPoint([50, 20])
.endPoint([300, 20]) .endPoint([300, 20])
.stroke(Color.Black)
.strokeWidth(10) .strokeWidth(10)
.strokeDashArray([50, 10]) .strokeDashArray([50, 10])
// Set the interval for strokeDashArray to 50, 10, 20. // Set the interval for strokeDashArray to 50, 10, 20.
Line() Line()
.startPoint([50, 20]) .startPoint([50, 20])
.endPoint([300, 20]) .endPoint([300, 20])
.stroke(Color.Black)
.strokeWidth(10) .strokeWidth(10)
.strokeDashArray([50, 10, 20]) .strokeDashArray([50, 10, 20])
// Set the interval for strokeDashArray to 50, 10, 20, 30. // Set the interval for strokeDashArray to 50, 10, 20, 30.
Line() Line()
.startPoint([50, 20]) .startPoint([50, 20])
.endPoint([300, 20]) .endPoint([300, 20])
.stroke(Color.Black)
.strokeWidth(10) .strokeWidth(10)
.strokeDashArray([50, 10, 20, 30]) .strokeDashArray([50, 10, 20, 30])
......
en/application-dev/reference/arkui-ts/ts-drawing-components-path.md
浏览文件 @ 11e5d007
...@@ -15,6 +15,8 @@ Not supported ...@@ -15,6 +15,8 @@ Not supported
Path(value?: { width?: number | string; height?: number | string; commands?: string }) Path(value?: { width?: number | string; height?: number | string; commands?: string })
Since API version 9, this API is supported in ArkTS widgets.
**Parameters** **Parameters**
| Name | Type | Mandatory| Description | | Name | Type | Mandatory| Description |
...@@ -29,18 +31,18 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the ...@@ -29,18 +31,18 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
| Name | Type | Default Value | Description | | 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).| | 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).<br>Since API version 9, this API is supported in ArkTS widgets.|
| fill | [ResourceColor](ts-types.md) | Color.Black | Color of the fill area.| | fill | [ResourceColor](ts-types.md) | Color.Black | Color of the fill area.<br>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.| | fillOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | Opacity of the fill area.<br>Since API version 9, this API is supported in ArkTS widgets.|
| stroke | [ResourceColor](ts-types.md) | - | Stroke color.| | stroke | [ResourceColor](ts-types.md) | - |Stroke color. If this attribute is not set, the component does not have any stroke.<br>Since API version 9, this API is supported in ArkTS widgets.|
| strokeDashArray | Array&lt;Length&gt; | [] | Stroke dashes.| | strokeDashArray | Array&lt;Length&gt; | [] | Stroke dashes.<br>Since API version 9, this API is supported in ArkTS widgets.|
| strokeDashOffset | number \| string | 0 | Offset of the start point for drawing the stroke.| | strokeDashOffset | number \| string | 0 | Offset of the start point for drawing the stroke.<br>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.| | strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | Cap style of the stroke.<br>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.| | strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | Join style of the stroke.<br>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.<br>**NOTE**<br>This attribute must be set to a value greater than or equal to 1 and takes effect when **strokeLineJoin** is set to **LineJoinStyle.Miter**.| | 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.<br>**NOTE**<br>This attribute must be set to a value greater than or equal to 1 and takes effect when **strokeLineJoin** is set to **LineJoinStyle.Miter**.<br>Since API version 9, this API is supported in ArkTS widgets.|
| strokeOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | Opacity of the stroke.<br>**NOTE**<br>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.| | strokeOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | Opacity of the stroke.<br>**NOTE**<br>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.<br>Since API version 9, this API is supported in ArkTS widgets.|
| strokeWidth | Length | 1 | Width of the stroke.| | strokeWidth | Length | 1 | Width of the stroke.<br>Since API version 9, this API is supported in ArkTS widgets.|
| antiAlias | boolean | true | Whether anti-aliasing is enabled.| | antiAlias | boolean | true | Whether anti-aliasing is enabled.<br>Since API version 9, this API is supported in ArkTS widgets.|
The supported commands are as follows: The supported commands are as follows:
......
en/application-dev/reference/arkui-ts/ts-drawing-components-polygon.md
浏览文件 @ 11e5d007
...@@ -16,6 +16,8 @@ Not supported ...@@ -16,6 +16,8 @@ Not supported
Polygon(value?: {width?: string | number, height?: string | number}) Polygon(value?: {width?: string | number, height?: string | number})
Since API version 9, this API is supported in ArkTS widgets.
**Parameters** **Parameters**
| Name| Type| Mandatory| Default Value| Description| | Name| Type| Mandatory| Default Value| Description|
...@@ -30,23 +32,25 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the ...@@ -30,23 +32,25 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
| Name| Type| Default Value| Description| | Name| Type| Default Value| Description|
| -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- |
| points | Array&lt;Point&gt; | [] | Vertex coordinates of the polygon.| | points | Array&lt;Point&gt; | [] | Vertex coordinates of the polygon.<br>Since API version 9, this API is supported in ArkTS widgets.|
| fill | [ResourceColor](ts-types.md) | Color.Black | Color of the fill area.| | fill | [ResourceColor](ts-types.md) | Color.Black | Color of the fill area.<br>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.| | fillOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | Opacity of the fill area.<br>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.| | stroke | [ResourceColor](ts-types.md) | - | Stroke color. If this attribute is not set, the component does not have any stroke.<br>Since API version 9, this API is supported in ArkTS widgets.|
| strokeDashArray | Array&lt;Length&gt; | [] | Stroke dashes.| | strokeDashArray | Array&lt;Length&gt; | [] | Stroke dashes.<br>Since API version 9, this API is supported in ArkTS widgets.|
| strokeDashOffset | number \| string | 0 | Offset of the start point for drawing the stroke.| | strokeDashOffset | number \| string | 0 | Offset of the start point for drawing the stroke.<br>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.| | strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | Cap style of the stroke.<br>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.| | strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | Join style of the stroke.<br>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.<br>**NOTE**<br>This attribute must be set to a value greater than or equal to 1 and takes effect when **strokeLineJoin** is set to **LineJoinStyle.Miter**.| | 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.<br>**NOTE**<br>This attribute must be set to a value greater than or equal to 1 and takes effect when **strokeLineJoin** is set to **LineJoinStyle.Miter**.<br>Since API version 9, this API is supported in ArkTS widgets.|
| strokeOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | Stroke opacity.<br>**NOTE**<br>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.| | strokeOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | Stroke opacity.<br>**NOTE**<br>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.<br>Since API version 9, this API is supported in ArkTS widgets.|
| strokeWidth | Length | 1 | Stroke width.| | strokeWidth | Length | 1 | Stroke width.<br>Since API version 9, this API is supported in ArkTS widgets.|
| antiAlias | boolean | true | Whether anti-aliasing is enabled.| | antiAlias | boolean | true | Whether anti-aliasing is enabled.<br>Since API version 9, this API is supported in ArkTS widgets.|
## Point ## Point
Describes the coordinates of a point. Describes the coordinates of a point.
Since API version 9, this API is supported in ArkTS widgets.
| Name | Type | Description | | 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).| | Point | [number, number] | Coordinates of a point. The first parameter is the x-coordinate, and the second parameter is the y-coordinate (relative coordinate).|
......
en/application-dev/reference/arkui-ts/ts-drawing-components-polyline.md
浏览文件 @ 11e5d007
...@@ -16,6 +16,8 @@ Not supported ...@@ -16,6 +16,8 @@ Not supported
Polyline(value?: {width?: string | number, height?: string | number}) Polyline(value?: {width?: string | number, height?: string | number})
Since API version 9, this API is supported in ArkTS widgets.
**Parameters** **Parameters**
| Name| Type| Mandatory| Default Value| Description| | Name| Type| Mandatory| Default Value| Description|
...@@ -30,23 +32,25 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the ...@@ -30,23 +32,25 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
| Name| Type| Default Value| Description| | Name| Type| Default Value| Description|
| -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- |
| points | Array&lt;Point&gt; | [] | List of coordinates that the polyline passes through.| | points | Array&lt;Point&gt; | [] | List of coordinates that the polyline passes through.<br>Since API version 9, this API is supported in ArkTS widgets.|
| fill | [ResourceColor](ts-types.md) | Color.Black | Color of the fill area.| | fill | [ResourceColor](ts-types.md) | Color.Black | Color of the fill area.<br>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.| | fillOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | Opacity of the fill area.<br>Since API version 9, this API is supported in ArkTS widgets.|
| stroke | [ResourceColor](ts-types.md) | - | Stroke color.| | stroke | [ResourceColor](ts-types.md) | - | Stroke color. If this attribute is not set, the component does not have any stroke.<br>Since API version 9, this API is supported in ArkTS widgets.|
| strokeDashArray | Array&lt;Length&gt; | [] | Stroke dashes.| | strokeDashArray | Array&lt;Length&gt; | [] | Stroke dashes.<br>Since API version 9, this API is supported in ArkTS widgets.|
| strokeDashOffset | number \| string | 0 | Offset of the start point for drawing the stroke.| | strokeDashOffset | number \| string | 0 | Offset of the start point for drawing the stroke.<br>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.| | strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | Cap style of the stroke.<br>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.| | strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | Join style of the stroke.<br>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.<br>**NOTE**<br>This attribute must be set to a value greater than or equal to 1 and takes effect when **strokeLineJoin** is set to **LineJoinStyle.Miter**.| | 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.<br>**NOTE**<br>This attribute must be set to a value greater than or equal to 1 and takes effect when **strokeLineJoin** is set to **LineJoinStyle.Miter**.<br>Since API version 9, this API is supported in ArkTS widgets.|
| strokeOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | Stroke opacity.<br>**NOTE**<br>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.| | strokeOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | Stroke opacity.<br>**NOTE**<br>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.<br>Since API version 9, this API is supported in ArkTS widgets.|
| strokeWidth | Length | 1 | Stroke width.| | strokeWidth | Length | 1 | Stroke width.<br>Since API version 9, this API is supported in ArkTS widgets.|
| antiAlias | boolean | true | Whether anti-aliasing is enabled.| | antiAlias | boolean | true | Whether anti-aliasing is enabled.<br>Since API version 9, this API is supported in ArkTS widgets.|
## Point ## Point
Describes the coordinates of a point. Describes the coordinates of a point.
Since API version 9, this API is supported in ArkTS widgets.
| Name | Type | Description | | 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).| | Point | [number, number] | Coordinates of a point. The first parameter is the x-coordinate, and the second parameter is the y-coordinate (relative coordinate).|
......
en/application-dev/reference/arkui-ts/ts-drawing-components-rect.md
浏览文件 @ 11e5d007
...@@ -17,6 +17,8 @@ Not supported ...@@ -17,6 +17,8 @@ Not supported
Rect(value?: {width?: string | number,height?: string | number,radius?: string | number | Array&lt;string | number&gt;} | Rect(value?: {width?: string | number,height?: string | number,radius?: string | number | Array&lt;string | number&gt;} |
{width?: string | number,height?: string | number,radiusWidth?: string | number,radiusHeight?: 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** **Parameters**
| Name| Type| Mandatory| Default Value| Description| | Name| Type| Mandatory| Default Value| Description|
...@@ -34,20 +36,20 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the ...@@ -34,20 +36,20 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
| Name| Type| Default Value| Description| | 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.| | radiusWidth | string \| number | 0 | Width of the rounded corner. The width and height are the same when only the width is set.<br>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.| | radiusHeight | string \| number | 0 | Height of the rounded corner. The width and height are the same only when the height is set.<br>Since API version 9, this API is supported in ArkTS widgets.|
| radius | string \| number \| Array&lt;string \| number&gt; | 0 | Radius of the rounded corner. You can set separate radiuses for four rounded corners.| | radius | string \| number \| Array&lt;string \| number&gt; | 0 | Radius of the rounded corner. You can set separate radiuses for four rounded corners.<br>Since API version 9, this API is supported in ArkTS widgets.|
| fill | [ResourceColor](ts-types.md) | Color.Black | Color of the fill area.| | fill | [ResourceColor](ts-types.md) | Color.Black | Color of the fill area.<br>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.| | fillOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | Opacity of the fill area.<br>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.| | stroke | [ResourceColor](ts-types.md) | - | Stroke color. If this attribute is not set, the component does not have any stroke.<br>Since API version 9, this API is supported in ArkTS widgets.|
| strokeDashArray | Array&lt;Length&gt; | [] | Stroke dashes.| | strokeDashArray | Array&lt;Length&gt; | [] | Stroke dashes.<br>Since API version 9, this API is supported in ArkTS widgets.|
| strokeDashOffset | number \| string | 0 | Offset of the start point for drawing the stroke.| | strokeDashOffset | number \| string | 0 | Offset of the start point for drawing the stroke.<br>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.| | strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | Cap style of the stroke.<br>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.| | strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | Join style of the stroke.<br>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.<br>**NOTE**<br>This attribute must be set to a value greater than or equal to 1 and takes effect when **strokeLineJoin** is set to **LineJoinStyle.Miter**.| | 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.<br>**NOTE**<br>This attribute must be set to a value greater than or equal to 1 and takes effect when **strokeLineJoin** is set to **LineJoinStyle.Miter**.<br>Since API version 9, this API is supported in ArkTS widgets.|
| strokeOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | Stroke opacity.<br>**NOTE**<br>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.| | strokeOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | Stroke opacity.<br>**NOTE**<br>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.<br>Since API version 9, this API is supported in ArkTS widgets.|
| strokeWidth | Length | 1 | Stroke width.| | strokeWidth | Length | 1 | Stroke width.<br>Since API version 9, this API is supported in ArkTS widgets.|
| antiAlias | boolean | true | Whether anti-aliasing is enabled.| | antiAlias | boolean | true | Whether anti-aliasing is enabled.<br>Since API version 9, this API is supported in ArkTS widgets.|
## Example ## Example
......
en/application-dev/reference/arkui-ts/ts-explicit-animation.md
浏览文件 @ 11e5d007
...@@ -6,9 +6,10 @@ You can create explicit animation with your custom settings. ...@@ -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. > 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 animateTo(value: AnimateParam, event: () => void): void
Since API version 9, this API is supported in ArkTS widgets.
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| ---------------- | ------------ | -------------------- | -------------------- | | ---------------- | ------------ | -------------------- | -------------------- |
| value | [AnimateParam](#animateparam)| Yes| Animation settings.| | value | [AnimateParam](#animateparam)| Yes| Animation settings.|
...@@ -18,13 +19,13 @@ animateTo(value: AnimateParam, event: () => void): void ...@@ -18,13 +19,13 @@ animateTo(value: AnimateParam, event: () => void): void
| Name| Type| Description| | Name| Type| Description|
| -------- | -------- | -------- | | -------- | -------- | -------- |
| duration | number | Animation duration, in ms.<br>Default value: **1000**| | duration | number | Animation duration, in ms.<br>Default value: **1000**<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>- 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.<br>Default value: **1.0**| | 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.<br>Default value: **1.0**|
| curve | [Curve](ts-appendix-enums.md#curve) \| [ICurve](../apis/js-apis-curve.md#icurve) \| string | Animation curve.<br>Default value: **Curve.Linear**| | curve | [Curve](ts-appendix-enums.md#curve) \| [ICurve](../apis/js-apis-curve.md#icurve) \| string | Animation curve.<br>Default value: **Curve.Linear**<br>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.<br>Default value: **0**| | delay | number | Delay of animation playback, in ms. By default, the playback is not delayed.<br>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.<br>Default value: **1**| | 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.<br>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.<br>Default value: **PlayMode.Normal**| | playMode | [PlayMode](ts-appendix-enums.md#playmode) | Animation playback mode. By default, the animation is played from the beginning after the playback is complete.<br>Default value: **PlayMode.Normal**<br>Since API version 9, this API is supported in ArkTS widgets.|
| onFinish | () =&gt; void | Callback invoked when the animation playback is complete.| | onFinish | () =&gt; void | Callback invoked when the animation playback is complete.<br>Since API version 9, this API is supported in ArkTS widgets.|
## Example ## Example
......
en/application-dev/reference/arkui-ts/ts-pixel-units.md
浏览文件 @ 11e5d007
...@@ -8,21 +8,21 @@ The framework provides four pixel units, with vp as the reference data unit. ...@@ -8,21 +8,21 @@ The framework provides four pixel units, with vp as the reference data unit.
| px | Physical pixel unit of the screen. | | 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.| | 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. | | 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 ## Pixel Unit Conversion
Conversion between px and other pixel units is supported. Conversion between px and other pixel units is supported.
| API | Description | | API | Description |
| ---------------------------------------- | ---------------------- | | --------------------------------------------------- | ------------------------------------------------------------ |
| vp2px(value : number) : number | Converts a value in units of vp to a value in units of px. | | vp2px(value : number) : number | Converts a value in units of vp to a value in units of px.<br>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. | | px2vp(value : number) : number | Converts a value in units of px to a value in units of vp.<br>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. | | fp2px(value : number) : number | Converts a value in units of fp to a value in units of px.<br>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. | | px2fp(value : number) : number | Converts a value in units of px to a value in units of fp.<br>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.| | lpx2px(value : number) : number | Converts a value in units of lpx to a value in units of px.<br>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.| | px2lpx(value : number) : number | Converts a value in units of px to a value in units of lpx.<br>Since API version 9, this API is supported in ArkTS widgets.|
## Example ## Example
......
en/application-dev/reference/arkui-ts/ts-universal-attributes-background.md
浏览文件 @ 11e5d007
...@@ -10,10 +10,10 @@ You can set the background of a component. ...@@ -10,10 +10,10 @@ You can set the background of a component.
| Name| Type| Description| | Name| Type| Description|
| -------- | -------- | -------- | | -------- | -------- | -------- |
| backgroundColor | [ResourceColor](ts-types.md#resourcecolor) | Background color of the component.| | backgroundColor | [ResourceColor](ts-types.md#resourcecolor) | Background color of the component.<br>Since API version 9, this API is supported in ArkTS widgets.|
| backgroundImage | src: [ResourceStr](ts-types.md#resourcestr),<br>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.)<br>**repeat**: whether the background image is repeatedly used. By default, the background image is not repeatedly used.| | backgroundImage | src: [ResourceStr](ts-types.md#resourcestr),<br>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.)<br>**repeat**: whether the background image is repeatedly used. By default, the background image is not repeatedly used.<br>Since API version 9, this API is supported in ArkTS widgets.|
| backgroundImageSize | {<br>width?: [Length](ts-types.md#length),<br>height?: [Length](ts-types.md#length)<br>} \| [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.<br>Default value: **ImageSize.Auto**| | backgroundImageSize | {<br>width?: [Length](ts-types.md#length),<br>height?: [Length](ts-types.md#length)<br>} \| [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.<br>Default value: **ImageSize.Auto**<br>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.<br>Default value:<br>{<br>x: 0,<br>y: 0<br>} <br> When **x** and **y** are set in percentage, the offset is calculated based on the width and height of the component.| | 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.<br>Default value:<br>{<br>x: 0,<br>y: 0<br>} <br> When **x** and **y** are set in percentage, the offset is calculated based on the width and height of the component.<br>Since API version 9, this API is supported in ArkTS widgets.|
## Example ## Example
......
en/application-dev/reference/arkui-ts/ts-universal-attributes-backgroundBlurStyle.md
浏览文件 @ 11e5d007
...@@ -12,10 +12,12 @@ You can apply background blur effects to a component. ...@@ -12,10 +12,12 @@ You can apply background blur effects to a component.
| Name | Type | Description | | 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.<br>This API is supported in ArkTS widgets.|
## BlurStyle ## BlurStyle
This API is supported in ArkTS widgets.
| Name | Description | | Name | Description |
| ------- | ---------- | | ------- | ---------- |
| Thin | Thin material. | | Thin | Thin material. |
......
en/application-dev/reference/arkui-ts/ts-universal-attributes-border-image.md
浏览文件 @ 11e5d007
...@@ -10,10 +10,12 @@ You can draw an image around a component. ...@@ -10,10 +10,12 @@ You can draw an image around a component.
| Name | Type | Description | | Name | Type | Description |
| ---------- | ---------------------------------------- | --------------------------------------- | | ---------- | ---------------------------------------- | --------------------------------------- |
| borderImage | [BorderImageOption](#borderimageoption) | Border image or border gradient. | | borderImage | [BorderImageOption](#borderimageoption) | Border image or border gradient.<br>This API is supported in ArkTS widgets.|
## BorderImageOption ## BorderImageOption
This API is supported in ArkTS widgets.
| Name | Type | Description | | 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.<br>**NOTE**<br>The border image source applies only to container components, such as **\<Row>**, **\<Column>**, and **\<Flex>**.| | source | string \| [Resource](ts-types.md#resource) \| [linearGradient](ts-universal-attributes-gradient-color.md) | Source or gradient color of the border image.<br>**NOTE**<br>The border image source applies only to container components, such as **\<Row>**, **\<Column>**, and **\<Flex>**.|
...@@ -23,9 +25,10 @@ You can draw an image around a component. ...@@ -23,9 +25,10 @@ You can draw an image around a component.
| repeat | [RepeatMode](#repeatmode) | Repeat mode of the border image.<br>Default value: **RepeatMode.Stretch**| | repeat | [RepeatMode](#repeatmode) | Repeat mode of the border image.<br>Default value: **RepeatMode.Stretch**|
| fill | boolean | Whether to fill the center of the border image.<br>Default value: **false** | | fill | boolean | Whether to fill the center of the border image.<br>Default value: **false** |
## RepeatMode ## RepeatMode
This API is supported in ArkTS widgets.
| Name | Description | | Name | Description |
| ------- | ----------------------------------- | | ------- | ----------------------------------- |
| Repeat | The source image's slices are tiled. Tiles beyond the border box will be clipped. | | Repeat | The source image's slices are tiled. Tiles beyond the border box will be clipped. |
......
en/application-dev/reference/arkui-ts/ts-universal-attributes-border.md
浏览文件 @ 11e5d007
...@@ -13,11 +13,11 @@ The border attributes are used to set border styles for components. ...@@ -13,11 +13,11 @@ The border attributes are used to set border styles for components.
| Name | Type | Description | | Name | Type | Description |
| ------------ | ------------------------------------------------------------ | ------------------------------------------------------------ | | ------------ | ------------------------------------------------------------ | ------------------------------------------------------------ |
| border | {<br>width?: [Length](ts-types.md#length) \| [EdgeWidths](#edgewidths9)<sup>9+</sup>,<br>color?: [ResourceColor](ts-types.md#resourcecolor) \| [EdgeColors](#edgecolors9)<sup>9+</sup>,<br>radius?: [Length](ts-types.md#length) \| [BorderRadiuses](#borderradiuses9)<sup>9+</sup>,<br>style?: [BorderStyle](ts-appendix-enums.md#borderstyle) \| [EdgeStyles](#edgestyles9)<sup>9+</sup><br>} | Unified border style.<br>- **width**: border width.<br>- **color**: border color.<br>- **radius**: radius of the rounded corner of the border.<br>- **style**: border style.| | border | {<br>width?: [Length](ts-types.md#length) \| [EdgeWidths](#edgewidths9)<sup>9+</sup>,<br>color?: [ResourceColor](ts-types.md#resourcecolor) \| [EdgeColors](#edgecolors9)<sup>9+</sup>,<br>radius?: [Length](ts-types.md#length) \| [BorderRadiuses](#borderradiuses9)<sup>9+</sup>,<br>style?: [BorderStyle](ts-appendix-enums.md#borderstyle) \| [EdgeStyles](#edgestyles9)<sup>9+</sup><br>} | Unified border style.<br>- **width**: border width.<br>- **color**: border color.<br>- **radius**: radius of the rounded corner of the border.<br>- **style**: border style.<br>Since API version 9, this API is supported in ArkTS widgets.|
| borderStyle | [BorderStyle](ts-appendix-enums.md#borderstyle) \| [EdgeStyles](#edgestyles9)<sup>9+</sup> | Border style.<br>Default value: **BorderStyle.Solid** | | borderStyle | [BorderStyle](ts-appendix-enums.md#borderstyle) \| [EdgeStyles](#edgestyles9)<sup>9+</sup> | Border style.<br>Default value: **BorderStyle.Solid**<br>Since API version 9, this API is supported in ArkTS widgets.|
| borderWidth | [Length](ts-types.md#length) \| [EdgeWidths](#edgewidths9)<sup>9+</sup> | Border width. The percentage format is not supported. | | borderWidth | [Length](ts-types.md#length) \| [EdgeWidths](#edgewidths9)<sup>9+</sup> | Border width. The percentage format is not supported.<br>Since API version 9, this API is supported in ArkTS widgets.|
| borderColor | [ResourceColor](ts-types.md#resourcecolor) \| [EdgeColors](#edgecolors9)<sup>9+</sup> | Border color.<br>Default value: **Color.Black** | | borderColor | [ResourceColor](ts-types.md#resourcecolor) \| [EdgeColors](#edgecolors9)<sup>9+</sup> | Border color.<br>Default value: **Color.Black**<br>Since API version 9, this API is supported in ArkTS widgets.|
| borderRadius | [Length](ts-types.md#length) \| [BorderRadiuses](#borderradiuses9)<sup>9+</sup> | Border radius. The percentage format is not supported. | | borderRadius | [Length](ts-types.md#length) \| [BorderRadiuses](#borderradiuses9)<sup>9+</sup> | Border radius. The percentage format is not supported.<br>Since API version 9, this API is supported in ArkTS widgets.|
## EdgeWidths<sup>9+</sup> ## EdgeWidths<sup>9+</sup>
......
en/application-dev/reference/arkui-ts/ts-universal-attributes-component-id.md
浏览文件 @ 11e5d007
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
| Name | Type | Description | | Name | Type | Description |
| -----| -------- | ----------------------------- | | -----| -------- | ----------------------------- |
| id | string | Unique ID you assigned to the component.<br>Default value: **''**| | id | string | Unique ID you assigned to the component.<br>Default value: **''**<br>Since API version 9, this API is supported in ArkTS widgets.|
## APIs ## APIs
......
en/application-dev/reference/arkui-ts/ts-universal-attributes-enable.md
浏览文件 @ 11e5d007
...@@ -10,9 +10,9 @@ The **enabled** attribute sets whether a component responds to user interactions ...@@ -10,9 +10,9 @@ The **enabled** attribute sets whether a component responds to user interactions
## Attributes ## Attributes
| Name | Type | Description | | 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.<br>Default value: **true** | | 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.<br>Default value: **true**<br>Since API version 9, this API is supported in ArkTS widgets. |
## Example ## Example
......
en/application-dev/reference/arkui-ts/ts-universal-attributes-flex-layout.md
浏览文件 @ 11e5d007
...@@ -8,12 +8,12 @@ ...@@ -8,12 +8,12 @@
## Attributes ## Attributes
| Name | Type | Description | | Name | Type | Description |
| ---------- | ---------------------------------------- | ---------------------------------------- | | ---------- | ------------------------------------------- | ------------------------------------------------------------ |
| flexBasis | number \| string | Base size of the component in the main axis of the parent container.<br>Default value: **'auto'** (indicating that the base size of the component in the main axis is the original size of the component)<br>This attribute cannot be set in percentage.| | flexBasis | number \| string | Base size of the component in the main axis of the parent container.<br>Default value: **'auto'** (indicating that the base size of the component in the main axis is the original size of the component)<br>This attribute cannot be set in percentage.<br>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.<br>Default value: **0** | | flexGrow | number | Percentage of the parent container's remaining space that is allocated to the component.<br>Default value: **0**<br>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.<br>When the parent container is **\<Row>** or **\<Column>**, the default value is **0**.<br> When the parent container is **\<Flex>**, the default value is **1**. | | flexShrink | number | Percentage of the parent container's shrink size that is allocated to the component.<br>When the parent container is **\<Row>** or **\<Column>**, the default value is **0**.<br> When the parent container is **\<Flex>**, the default value is **1**.<br>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.<br>Default value: **ItemAlign.Auto**| | 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.<br>Default value: **ItemAlign.Auto**<br>Since API version 9, this API is supported in ArkTS widgets.|
## Example ## Example
......
en/application-dev/reference/arkui-ts/ts-universal-attributes-gradient-color.md
浏览文件 @ 11e5d007
...@@ -12,9 +12,9 @@ Create a more gorgeous look for a component by applying a gradient color effect ...@@ -12,9 +12,9 @@ Create a more gorgeous look for a component by applying a gradient color effect
| Name | Type | Description | | Name | Type | Description |
| -------------- | -------------------------------------------- | ----------------------------------- | | -------------- | -------------------------------------------- | ----------------------------------- |
| linearGradient | {<br>angle?: number \| string,<br>direction?: [GradientDirection](ts-appendix-enums.md#gradientdirection),<br>colors: Array&lt;[ColorStop](ts-basic-components-gauge.md#colorstop)&gt;,<br>repeating?: boolean<br>} | Linear gradient.<br>- **angle**: start angle of the linear gradient. A positive value indicates a clockwise rotation from the origin, (0, 0).<br> Default value: **180**<br>- **direction**: direction of the linear gradient. It does not take effect when **angle** is set.<br> Default value: **GradientDirection.Bottom**<br>- **colors**: colors of the linear gradient.<br>- **repeating**: whether the colors are repeated.<br> Default value: **false**| | linearGradient | {<br>angle?: number \| string,<br>direction?: [GradientDirection](ts-appendix-enums.md#gradientdirection),<br>colors: Array&lt;[ColorStop](ts-basic-components-gauge.md#colorstop)&gt;,<br>repeating?: boolean<br>} | Linear gradient.<br>- **angle**: start angle of the linear gradient. A positive value indicates a clockwise rotation from the origin, (0, 0).<br> Default value: **180**<br>- **direction**: direction of the linear gradient. It does not take effect when **angle** is set.<br> Default value: **GradientDirection.Bottom**<br>- **colors**: colors of the linear gradient.<br>- **repeating**: whether the colors are repeated.<br> Default value: **false**<br>Since API version 9, this API is supported in ArkTS widgets.|
| sweepGradient | {<br>center: Point,<br>start?: number \| string,<br>end?: number \| string,<br>rotation?: number\|string,<br>colors: Array&lt;[ColorStop](ts-basic-components-gauge.md#colorstop)&gt;,<br>repeating?: boolean<br>} | Angle gradient.<br>- **center**: center point of the angle gradient, that is, the coordinates relative to the upper left corner of the current component.<br>- **start**: start point of the angle gradient.<br> Default value: **0**<br>- **end**: end point of the angle gradient.<br> Default value: **0**<br>- **rotation**: rotation angle of the angle gradient.<br> Default value: **0**<br>- **colors**: colors of the angle gradient.<br>- **repeating**: whether the colors are repeated.<br> Default value: **false**| | sweepGradient | {<br>center: Point,<br>start?: number \| string,<br>end?: number \| string,<br>rotation?: number\|string,<br>colors: Array&lt;[ColorStop](ts-basic-components-gauge.md#colorstop)&gt;,<br>repeating?: boolean<br>} | Sweep gradient.<br>- **center**: center point of the sweep gradient, that is, the coordinates relative to the upper left corner of the current component.<br>- **start**: start point of the sweep gradient.<br> Default value: **0**<br>- **end**: end point of the sweep gradient.<br> Default value: **0**<br>- **rotation**: rotation angle of the sweep gradient.<br> Default value: **0**<br>- **colors**: colors of the sweep gradient.<br>- **repeating**: whether the colors are repeated.<br> Default value: **false**<br>Since API version 9, this API is supported in ArkTS widgets. |
| radialGradient | {<br>center: Point,<br> radius: number \| string,<br>colors: Array&lt;[ColorStop](ts-basic-components-gauge.md#colorstop)&gt;,<br>repeating?: boolean<br>} | Radial gradient.<br>- **center**: center point of the radial gradient, that is, the coordinates relative to the upper left corner of the current component.<br>- **radius**: radius of the radial gradient.<br>- **colors**: colors of the radial gradient.<br>- **repeating**: whether the colors are repeated.<br> Default value: **false**| | radialGradient | {<br>center: Point,<br> radius: number \| string,<br>colors: Array&lt;[ColorStop](ts-basic-components-gauge.md#colorstop)&gt;,<br>repeating?: boolean<br>} | Radial gradient.<br>- **center**: center point of the radial gradient, that is, the coordinates relative to the upper left corner of the current component.<br>- **radius**: radius of the radial gradient.<br>- **colors**: colors of the radial gradient.<br>- **repeating**: whether the colors are repeated.<br> Default value: **false**<br>Since API version 9, this API is supported in ArkTS widgets.|
## Example ## Example
......
en/application-dev/reference/arkui-ts/ts-universal-attributes-image-effect.md
浏览文件 @ 11e5d007
...@@ -3,6 +3,7 @@ ...@@ -3,6 +3,7 @@
Image effects include blur, shadow, and much more. Image effects include blur, shadow, and much more.
> **NOTE** > **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. > 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. ...@@ -11,17 +12,17 @@ Image effects include blur, shadow, and much more.
| Name | Type | Default Value| Description | | 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.| | 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.<br>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.| | 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.<br>Since API version 9, this API is supported in ArkTS widgets.|
| shadow | {<br>radius: number \| [Resource](ts-types.md#resource),<br>color?: [Color](ts-appendix-enums.md#color) \| string \| [Resource](ts-types.md#resource),<br>offsetX?: number \| [Resource](ts-types.md#resource),<br>offsetY?: number \| [Resource](ts-types.md#resource)<br>} | - | 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.| | shadow | {<br>radius: number \| [Resource](ts-types.md#resource),<br>color?: [Color](ts-appendix-enums.md#color) \| string \| [Resource](ts-types.md#resource),<br>offsetX?: number \| [Resource](ts-types.md#resource),<br>offsetY?: number \| [Resource](ts-types.md#resource)<br>} | - | 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.<br/>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.| | 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.<br>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.| | 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.<br>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.| | 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.<br>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.| | 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.<br>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.| | 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.<br>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.| | 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.<br>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. | | hueRotate | number \| string | '0deg' | Applies the hue rotation effect to the current component. The input parameter is a rotation angle.<br>Since API version 9, this API is supported in ArkTS widgets.|
| colorBlend <sup>8+</sup> | [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. | | colorBlend <sup>8+</sup> | [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.<br>Since API version 9, this API is supported in ArkTS widgets.|
## Example ## Example
......
en/application-dev/reference/arkui-ts/ts-universal-attributes-layout-constraints.md
浏览文件 @ 11e5d007
...@@ -9,10 +9,10 @@ Layout constraints refer to constraints on the aspect ratio and display priority ...@@ -9,10 +9,10 @@ Layout constraints refer to constraints on the aspect ratio and display priority
## Attributes ## Attributes
| Name | Type | Description | | Name | Type| Description |
| --------------- | ------ | ---------------------------------------- | | --------------- | -------- | ------------------------------------------------------------ |
| aspectRatio | number | Aspect ratio of the component, which can be obtained using the following formula: Width/Height. | | aspectRatio | number | Aspect ratio of the component, which can be obtained using the following formula: Width/Height.<br>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.<br>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.<br>**NOTE**<br>This attribute is valid only for the **\<Row>**, **\<Column>**, and **\<Flex>** (single-row) container components.| | 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.<br>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.<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>This attribute is valid only for the **\<Row>**, **\<Column>**, and **\<Flex>** (single-row) container components.|
## Example ## Example
......
en/application-dev/reference/arkui-ts/ts-universal-attributes-location.md
浏览文件 @ 11e5d007
...@@ -12,12 +12,12 @@ The location attributes set the alignment mode, layout direction, and position o ...@@ -12,12 +12,12 @@ The location attributes set the alignment mode, layout direction, and position o
| Name| Type| Description| | Name| Type| Description|
| -------- | -------- | -------- | | -------- | -------- | -------- |
| align | [Alignment](ts-appendix-enums.md#alignment) | Alignment mode of the component content in the drawing area.<br>Default value: **Alignment.Center**| | align | [Alignment](ts-appendix-enums.md#alignment) | Alignment mode of the component content in the drawing area.<br>Default value: **Alignment.Center**<br>Since API version 9, this API is supported in ArkTS widgets.|
| direction | [Direction](ts-appendix-enums.md#direction) | Horizontal layout of the component.<br>Default value: **Direction.Auto**| | direction | [Direction](ts-appendix-enums.md#direction) | Horizontal layout of the component.<br>Default value: **Direction.Auto**<br>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.| | 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.<br>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**.<br>Default value:<br>{<br>x: 0,<br>y: 0<br>} | | 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**.<br>Default value:<br>{<br>x: 0,<br>y: 0<br>}<br>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.<br>Default value:<br>{<br>x: 0,<br>y: 0<br>} | | 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.<br>Default value:<br>{<br>x: 0,<br>y: 0<br>}<br>Since API version 9, this API is supported in ArkTS widgets.|
| alignRules<sup>9+</sup> | {<br>left?: { anchor: string, align: [HorizontalAlign](ts-appendix-enums.md#horizontalalign) };<br>right?: { anchor: string, align: [HorizontalAlign](ts-appendix-enums.md#horizontalalign) };<br>middle?: { anchor: string, align: [HorizontalAlign](ts-appendix-enums.md#horizontalalign) };<br>top?: { anchor: string, align: [VerticalAlign](ts-appendix-enums.md#verticalalign) };<br>bottom?: { anchor: string, align: [VerticalAlign](ts-appendix-enums.md#verticalalign) };<br>center?: { anchor: string, align: [VerticalAlign](ts-appendix-enums.md#verticalalign) }<br>} | Alignment rules relative to the container. This attribute is valid only when the container is [\<RelativeContainer>](ts-container-relativecontainer.md).<br>- **left**: left-aligned.<br>- **right**: right-aligned.<br>- **middle**: center-aligned.<br>- **top**: top-aligned.<br>- **bottom**: bottom-aligned.<br>- **center**: center-aligned.<br>**NOTE**<br>- **anchor**: ID of the component that functions as the anchor point.<br>- **align**: alignment mode relative to the anchor component.| | alignRules<sup>9+</sup> | {<br>left?: { anchor: string, align: [HorizontalAlign](ts-appendix-enums.md#horizontalalign) };<br>right?: { anchor: string, align: [HorizontalAlign](ts-appendix-enums.md#horizontalalign) };<br>middle?: { anchor: string, align: [HorizontalAlign](ts-appendix-enums.md#horizontalalign) };<br>top?: { anchor: string, align: [VerticalAlign](ts-appendix-enums.md#verticalalign) };<br>bottom?: { anchor: string, align: [VerticalAlign](ts-appendix-enums.md#verticalalign) };<br>center?: { anchor: string, align: [VerticalAlign](ts-appendix-enums.md#verticalalign) }<br>} | Alignment rules relative to the container.<br>- **left**: left-aligned.<br>- **right**: right-aligned.<br>- **middle**: center-aligned.<br>- **top**: top-aligned.<br>- **bottom**: bottom-aligned.<br>- **center**: center-aligned.<br>This API is supported in ArkTS widgets.<br>**NOTE**<br>- **anchor**: ID of the component that functions as the anchor point.<br>- **align**: alignment mode relative to the anchor component. |
## Example ## Example
......
en/application-dev/reference/arkui-ts/ts-universal-attributes-opacity.md
浏览文件 @ 11e5d007
...@@ -10,9 +10,9 @@ You can set the opacity of a component. ...@@ -10,9 +10,9 @@ You can set the opacity of a component.
## Attributes ## Attributes
| Name | Type | Description | | 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.<br>**NOTE**<br>A child component can inherit this attribute of its parent component. Default value: **1**| | 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.<br/>**NOTE**<br/>A component can inherit the opacity setting from its parent component.<br/>Default value: **1**<br>Since API version 9, this API is supported in ArkTS widgets. |
## Example ## Example
......
en/application-dev/reference/arkui-ts/ts-universal-attributes-overlay.md
浏览文件 @ 11e5d007
...@@ -10,7 +10,7 @@ You can set overlay text for a component. ...@@ -10,7 +10,7 @@ You can set overlay text for a component.
| Name| Type| Default Value| Description| | Name| Type| Default Value| Description|
| -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- |
| overlay | value: string,<br>options?: {<br>align?: [Alignment](ts-appendix-enums.md#alignment), <br>offset?: {x?: number, y?: number}<br>} | {<br>align: Alignment.Center,<br>offset: {0, 0}<br>} | Overlay added to the component.<br> **value**: mask text.<br>**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.<br>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,<br>options?: {<br>align?: [Alignment](ts-appendix-enums.md#alignment), <br>offset?: {x?: number, y?: number}<br>} | {<br>align: Alignment.Center,<br>offset: {0, 0}<br>} | Overlay added to the component.<br> **value**: mask text.<br>**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.<br>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.<br>Since API version 9, this API is supported in ArkTS widgets.|
## Example ## Example
......
en/application-dev/reference/arkui-ts/ts-universal-attributes-polymorphic-style.md
浏览文件 @ 11e5d007
...@@ -11,10 +11,12 @@ You can set state-specific styles for components. ...@@ -11,10 +11,12 @@ You can set state-specific styles for components.
| Style| Type| Description| | Style| Type| Description|
| -------- | -------- | -------- | | -------- | -------- | -------- |
| stateStyles | StateStyles | Styles of the component for different states.| | stateStyles | StateStyles | Styles of the component for different states.<br>Since API version 9, this API is supported in ArkTS widgets.|
## StateStyles ## StateStyles
Since API version 9, this API is supported in ArkTS widgets.
| Name| Type| Mandatory| Description| | Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- |
| normal | ()=&gt;void | No| Style of the component when being stateless.| | normal | ()=&gt;void | No| Style of the component when being stateless.|
......
en/application-dev/reference/arkui-ts/ts-universal-attributes-sharp-clipping.md
浏览文件 @ 11e5d007
...@@ -12,8 +12,8 @@ Shape clipping changes the visible portion of a component through clipping or ma ...@@ -12,8 +12,8 @@ Shape clipping changes the visible portion of a component through clipping or ma
| Name | Type | Description | | 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.<br>Default value: **false**| | 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.<br>Default value: **false**<br>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.| | 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.<br>Since API version 9, this API is supported in ArkTS widgets.|
## Example ## Example
......
en/application-dev/reference/arkui-ts/ts-universal-attributes-size.md
浏览文件 @ 11e5d007
...@@ -10,15 +10,15 @@ The size attributes set the width, height, and margin of a component. ...@@ -10,15 +10,15 @@ The size attributes set the width, height, and margin of a component.
## Attributes ## Attributes
| Name | Type | Description | | 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. | | 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.<br>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. | | 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.<br>Since API version 9, this API is supported in ArkTS widgets.|
| size | {<br>width?: [Length](ts-types.md#length),<br>height?: [Length](ts-types.md#length)<br>} | Size of the component. | | size | {<br>width?: [Length](ts-types.md#length),<br>height?: [Length](ts-types.md#length)<br>} | Size of the component.<br>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.<br>When the parameter is of the **Length** type, the four paddings take effect.<br>Default value: **0**<br>When **padding** is set to a percentage, the width of the parent container is used as the basic value.| | padding | [Padding](ts-types.md#padding) \| [Length](ts-types.md#length) | Padding of the component.<br>When the parameter is of the **Length** type, the four paddings take effect.<br>Default value: **0**<br>When **padding** is set to a percentage, the width of the parent container is used as the basic value.<br>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.<br>When the parameter is of the **Length** type, the four margins take effect.<br>Default value: **0**<br>When **margin** 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.<br>When the parameter is of the **Length** type, the four margins take effect.<br>Default value: **0**<br>When **margin** is set to a percentage, the width of the parent container is used as the basic value.<br>Since API version 9, this API is supported in ArkTS widgets.|
| constraintSize | {<br>minWidth?: [Length](ts-types.md#length),<br>maxWidth?: [Length](ts-types.md#length),<br>minHeight?: [Length](ts-types.md#length),<br>maxHeight?: [Length](ts-types.md#length)<br>} | 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**.<br>Default value:<br>{<br>minWidth: 0,<br>maxWidth: Infinity,<br>minHeight: 0,<br>maxHeight: Infinity<br>} | | constraintSize | {<br>minWidth?: [Length](ts-types.md#length),<br>maxWidth?: [Length](ts-types.md#length),<br>minHeight?: [Length](ts-types.md#length),<br>maxHeight?: [Length](ts-types.md#length)<br>} | 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**.<br>Default value:<br>{<br>minWidth: 0,<br>maxWidth: Infinity,<br>minHeight: 0,<br>maxHeight: Infinity<br>}<br>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.<br>**NOTE**<br>This attribute is valid only for the **\<Row>**, **\<Column>**, and **\<Flex>** layouts.| | 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.<br>**NOTE**<br>This attribute is valid only for the **\<Row>**, **\<Column>**, and **\<Flex>** layouts.<br>Since API version 9, this API is supported in ArkTS widgets.|
## Example ## Example
......
en/application-dev/reference/arkui-ts/ts-universal-attributes-touch-target.md
浏览文件 @ 11e5d007
...@@ -11,12 +11,15 @@ You can set the touch target for components that support universal click events, ...@@ -11,12 +11,15 @@ You can set the touch target for components that support universal click events,
## Attributes ## Attributes
| Name | Type | Description | | Name | Type | Description |
| -------------- | --------------------------------------------- | ----------------------------------------- | | -------------- | ------------------------------------------------------------ | ------------------------------------------------------------ |
| responseRegion | Array&lt;[Rectangle](#rectangle)&gt; \| [Rectangle](#rectangle) | One or more touch targets, including their location and size.<br>The default touch target is the entire component. Default value:<br>{<br>x: 0,<br>y: 0,<br>width: '100%',<br>height: '100%'<br>} | | responseRegion | Array&lt;[Rectangle](#rectangle)&gt; \| [Rectangle](#rectangle) | One or more touch targets, including their location and size.<br>The default touch target is the entire component. Default value:<br>{<br>x: 0,<br>y: 0,<br>width: '100%',<br>height: '100%'<br>}<br>Since API version 9, this API is supported in ArkTS widgets.|
## Rectangle ## Rectangle
Since API version 9, this API is supported in ArkTS widgets.
| Name | Type | Mandatory | Description | | 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.<br>Default value: **0vp**| | x | [Length](ts-types.md#length) | No | X coordinate of the touch point relative to the upper left corner of the component.<br>Default value: **0vp**|
......
en/application-dev/reference/arkui-ts/ts-universal-attributes-transformation.md
浏览文件 @ 11e5d007
...@@ -11,9 +11,9 @@ Transformation attributes allow you to rotate, translate, scale, or transform a ...@@ -11,9 +11,9 @@ Transformation attributes allow you to rotate, translate, scale, or transform a
| Name | Type | Description | | Name | Type | Description |
| --------- | ------------------------------------------------------------ | ------------------------------------------------------------ | | --------- | ------------------------------------------------------------ | ------------------------------------------------------------ |
| rotate | {<br>x?: number,<br>y?: number,<br>z?: number,<br>angle?: number \| string,<br>centerX?: number \| string,<br>centerY?: number \| string<br>} | 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.<br>Default value:<br>{<br>x: 0,<br>y: 0,<br>z: 0,<br>angle: 0,<br>centerX: '50%',<br>centerY: '50%'<br>} | | rotate | {<br>x?: number,<br>y?: number,<br>z?: number,<br>angle?: number \| string,<br>centerX?: number \| string,<br>centerY?: number \| string<br>} | 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.<br>Default value:<br>{<br>x: 0,<br>y: 0,<br>z: 0,<br>angle: 0,<br>centerX: '50%',<br>centerY: '50%'<br>}<br>Since API version 9, this API is supported in ArkTS widgets.|
| translate | {<br>x?: number \| string,<br>y?: number \| string,<br>z? : number \| string<br>} | 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.<br>Default value:<br>{<br>x: 0,<br>y: 0,<br>z: 0<br>} | | translate | {<br>x?: number \| string,<br>y?: number \| string,<br>z? : number \| string<br>} | 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.<br>Default value:<br>{<br>x: 0,<br>y: 0,<br>z: 0<br>}<br>Since API version 9, this API is supported in ArkTS widgets.|
| scale | {<br>x?: number,<br>y?: number,<br>z?: number,<br>centerX?: number \| string,<br>centerY?: number \| string<br>} | 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.<br>Default value:<br>{<br>x: 1,<br>y: 1,<br>z: 1,<br>centerX:'50%',<br>centerY:'50%'<br>} | | scale | {<br>x?: number,<br>y?: number,<br>z?: number,<br>centerX?: number \| string,<br>centerY?: number \| string<br>} | 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.<br>Default value:<br>{<br>x: 1,<br>y: 1,<br>z: 1,<br>centerX:'50%',<br>centerY:'50%'<br>}<br>Since API version 9, this API is supported in ArkTS widgets.|
| transform | [Matrix4Transit](../apis/js-apis-matrix4.md) | Transformation matrix of the component. | | transform | [Matrix4Transit](../apis/js-apis-matrix4.md) | Transformation matrix of the component. |
......
en/application-dev/reference/arkui-ts/ts-universal-attributes-visibility.md
浏览文件 @ 11e5d007
...@@ -10,7 +10,7 @@ The visibility attribute controls whether a component is visible. ...@@ -10,7 +10,7 @@ The visibility attribute controls whether a component is visible.
| Name | Type | Description | | 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.<br>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.<br>Default value: **Visibility.Visible**<br>Since API version 9, this API is supported in ArkTS widgets.|
## Example ## Example
......
en/application-dev/reference/arkui-ts/ts-universal-attributes-z-order.md
浏览文件 @ 11e5d007
...@@ -12,7 +12,7 @@ The **zIndex** attribute sets the z-order of a component in the stacking context ...@@ -12,7 +12,7 @@ The **zIndex** attribute sets the z-order of a component in the stacking context
| Name| Type| Description| | 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.<br>Since API version 9, this API is supported in ArkTS widgets.|
## Example ## Example
......
en/application-dev/reference/arkui-ts/ts-universal-events-click.md
浏览文件 @ 11e5d007
...@@ -11,9 +11,12 @@ A click event is triggered when a component is clicked. ...@@ -11,9 +11,12 @@ A click event is triggered when a component is clicked.
| Name | Bubbling Supported| Description | | Name | Bubbling Supported| Description |
| ---------------------------------------- | ---- | --------------------------------- | | ---------------------------------------- | ---- | --------------------------------- |
| onClick(event: (event?: ClickEvent) =&gt; void) | No | Called when a click event occurs. For details about **event**, see **ClickEvent**.| | onClick(event: (event?: ClickEvent) =&gt; void) | No | Called when a click event occurs. For details about **event**, see **ClickEvent**.<br>Since API version 9, this API is supported in ArkTS widgets.|
## ClickEvent ## ClickEvent
Since API version 9, this API is supported in ArkTS widgets.
| Name | Type | Description | | Name | Type | Description |
| ------------------- | ------------------------------------ | -------------------------------------------------------- | | ------------------- | ------------------------------------ | -------------------------------------------------------- |
| screenX | number | X coordinate of the click relative to the upper left corner of the application window. | | 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. ...@@ -26,6 +29,8 @@ A click event is triggered when a component is clicked.
## EventTarget<sup>8+</sup> ## EventTarget<sup>8+</sup>
Since API version 9, this API is supported in ArkTS widgets.
| Name | Type | Description | | Name | Type | Description |
| ---- | ------------------------- | ---------- | | ---- | ------------------------- | ---------- |
| area | [Area](ts-types.md#area8) | Area information of the target element.| | area | [Area](ts-types.md#area8) | Area information of the target element.|
......
en/application-dev/reference/arkui-ts/ts-universal-events-show-hide.md
浏览文件 @ 11e5d007
...@@ -9,10 +9,10 @@ The show/hide event is triggered when a component is mounted or unmounted from t ...@@ -9,10 +9,10 @@ The show/hide event is triggered when a component is mounted or unmounted from t
## Events ## Events
| Name | Bubbling Supported| Description | | Name | Bubbling Supported| Description |
| ------------------------------------------------ | -------- | -------------------------- | | ------------------------------------------------ | -------- | ------------------------------------------------------------ |
| onAppear(event: () =&gt; void) | No | Triggered when the component is displayed.| | onAppear(event: () =&gt; void) | No | Triggered when the component is displayed.<br>Since API version 9, this API is supported in ArkTS widgets.|
| onDisAppear(event: () =&gt; void) | No | Triggered when the component is hidden.| | onDisAppear(event: () =&gt; void) | No | Triggered when the component is hidden.<br>Since API version 9, this API is supported in ArkTS widgets.|
## Example ## Example
......
en/application-dev/ui/ui-ts-custom-component-lifecycle-callbacks.md
浏览文件 @ 11e5d007
...@@ -15,12 +15,16 @@ aboutToAppear?(): void ...@@ -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. 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
aboutToDisappear?(): void 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. 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:** **Example 1:**
```ts ```ts
...@@ -77,7 +81,7 @@ Invoked each time when a page is hidden. This callback is used in the routing pr ...@@ -77,7 +81,7 @@ Invoked each time when a page is hidden. This callback is used in the routing pr
onBackPress?(): void 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:** **Example 2:**
...@@ -122,6 +126,8 @@ onLayout?(children: Array\<LayoutChild\>, constraint: ConstraintSizeOptions): vo ...@@ -122,6 +126,8 @@ onLayout?(children: Array\<LayoutChild\>, 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. 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** **Parameters**
| Name | Type | Description | | Name | Type | Description |
...@@ -135,6 +141,8 @@ onMeasure?(children: Array\<LayoutChild\>, constraint: ConstraintSizeOptions): v ...@@ -135,6 +141,8 @@ onMeasure?(children: Array\<LayoutChild\>, 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. 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** **Parameters**
| Name | Type | Description | | Name | Type | Description |
...@@ -146,6 +154,8 @@ Invoked when the custom component needs to determine its size. Through this call ...@@ -146,6 +154,8 @@ Invoked when the custom component needs to determine its size. Through this call
Provides the child component layout information. Provides the child component layout information.
This API is supported in ArkTS widgets.
| Name | Type | Description | | Name | Type | Description |
| ---------- | ----------------------------------------------------------------------------------------------------------- | -------------------------------------- | | ---------- | ----------------------------------------------------------------------------------------------------------- | -------------------------------------- |
| name | string | Name of the child component. | | name | string | Name of the child component. |
...@@ -160,6 +170,8 @@ Provides the child component layout information. ...@@ -160,6 +170,8 @@ Provides the child component layout information.
Provides the border information of the child component. Provides the border information of the child component.
This API is supported in ArkTS widgets.
| Name | Type | Description | | Name | Type | Description |
| ----------- | ---------------------------------------------------------- | ---------------------------------------------- | | ----------- | ---------------------------------------------------------- | ---------------------------------------------- |
| borderWidth | [EdgeWidths](../reference/arkui-ts/ts-types.md#edgewidths) | Edge widths in different directions of the child component.| | 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. ...@@ -170,6 +182,8 @@ Provides the border information of the child component.
Provides the layout information of the child component. Provides the layout information of the child component.
This API is supported in ArkTS widgets.
| Name | Type | Description | | Name | Type | Description |
| ---------- | -------------------------------------------------------------------------------- | ---------------- | | ---------- | -------------------------------------------------------------------------------- | ---------------- |
| position | [Position](../reference/arkui-ts/ts-types.md#position) | Position coordinates of the child component.| | position | [Position](../reference/arkui-ts/ts-types.md#position) | Position coordinates of the child component.|
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或