diff --git a/en/application-dev/reference/apis/js-apis-curve.md b/en/application-dev/reference/apis/js-apis-curve.md index cf3067e37fd78e9c9d0f3d701b1fdf30cb79c88f..718c84781a3d2c9b28f9a73de9ed4548027ef09e 100644 --- a/en/application-dev/reference/apis/js-apis-curve.md +++ b/en/application-dev/reference/apis/js-apis-curve.md @@ -209,9 +209,10 @@ Curves.responsiveSpringMotion() // Create a responsive spring animation curve wi interpolate(fraction: number): number - Implements calculation. +Since API version 9, this API is supported in ArkTS widgets. + **System capability**: SystemCapability.ArkUI.ArkUI.Full **Parameters** diff --git a/en/application-dev/reference/arkui-ts/ts-animatorproperty.md b/en/application-dev/reference/arkui-ts/ts-animatorproperty.md index 36d37c6d5fe1e091128d60ee0ff9f337bd13c818..f22e531ac3a0f8423c9e8de5af520a92d2828d5f 100644 --- a/en/application-dev/reference/arkui-ts/ts-animatorproperty.md +++ b/en/application-dev/reference/arkui-ts/ts-animatorproperty.md @@ -6,20 +6,21 @@ You can create a property animator to animate certain universal attributes of a > > This event is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. - animation(value: {duration?: number, tempo?: number, curve?: string | Curve | ICurve, delay?:number, iterations: number, playMode?: PlayMode, onFinish?: () => void}) +Since API version 9, this API is supported in ArkTS widgets. + **Parameters** | Name | Type | Mandatory | Description | | ---------- | ------------------------------------------| ---- | ------------------------------------------------------------ | -| duration | number | No | Animation duration, in ms.
Default value: **1000**| +| duration | number | No | Animation duration, in ms.
Default value: **1000**
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
The maximum animation duration on an ArkTS widget is 1000 ms. If the set value exceeds the limit, the value **1000** will be used. | | tempo | number | No | Animation playback speed. A greater value indicates a higher animation playback speed.
The value **0** indicates that no animation is applied.
Default value: **1**| -| curve | string \| [Curve](ts-appendix-enums.md#curve) \| ICurve9+ | No | Animation curve.
Default value: **Curve.Linear** | +| curve | string \| [Curve](ts-appendix-enums.md#curve) \| ICurve9+ | No | Animation curve.
Default value: **Curve.Linear**
Since API version 9, this API is supported in ArkTS widgets. | | delay | number | No | Delay of animation playback, in ms. The value **0** indicates that the playback is not delayed.
Default value: **0** | | iterations | number | No | Number of times that the animation is played. The value **-1** indicates that the animation is played for an unlimited number of times.
Default value: **1**| -| playMode | [PlayMode](ts-appendix-enums.md#playmode) | No | Animation playback mode. By default, the animation is played from the beginning after the playback is complete.
Default value: **PlayMode.Normal**| -| onFinish | () => void | No | Callback invoked when the animation playback is complete. | +| playMode | [PlayMode](ts-appendix-enums.md#playmode) | No | Animation playback mode. By default, the animation is played from the beginning after the playback is complete.
Default value: **PlayMode.Normal**
Since API version 9, this API is supported in ArkTS widgets.| +| onFinish | () => void | No | Callback invoked when the animation playback is complete.
Since API version 9, this API is supported in ArkTS widgets.| ## Example diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-loadingprogress.md b/en/application-dev/reference/arkui-ts/ts-basic-components-loadingprogress.md index 6a39e1c9f17f7a7150728509cdc5fdc32658189a..4381ad3257af51b69cb968af826f2359e3f30398 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-loadingprogress.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-loadingprogress.md @@ -18,11 +18,13 @@ LoadingProgress() Creates a **\** component. +Since API version 9, this API is supported in ArkTS widgets. + ## Attributes | Name| Type| Description| | -------- | -------- | -------- | -| color | [ResourceColor](ts-types.md#resourcecolor) | Foreground color of the **\** component.| +| color | [ResourceColor](ts-types.md#resourcecolor) | Foreground color of the **\** component.
Since API version 9, this API is supported in ArkTS widgets.| ## Example diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-marquee.md b/en/application-dev/reference/arkui-ts/ts-basic-components-marquee.md index 9d905a65b1736315055c4b4582a5fa7cf5e8d00e..a6c0b032ca3d1234898704a15d87358800f737e7 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-marquee.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-marquee.md @@ -17,29 +17,31 @@ Not supported Marquee(value: { start: boolean, step?: number, loop?: number, fromStart?: boolean, src: string }) +Since API version 9, this API is supported in ArkTS widgets. + **Parameters** | Name| Type| Mandatory| Description| | -------- | -------- | -------- | -------- | | start | boolean | Yes| Whether to start scrolling.| | step | number | No| Scrolling step.
Default value: **6**, in vp| -| loop | number | No| Number of times the marquee will scroll. If the value is less than or equal to **0**, the marquee will scroll continuously.
Default value: **-1**| +| loop | number | No| Number of times the marquee will scroll. If the value is less than or equal to **0**, the marquee will scroll continuously.
Default value: **-1**
**NOTE**
Regardless of the value, the marquee scrolls only once on an ArkTS widget.| | fromStart | boolean | No| Whether the text scrolls from the start.
Default value: **true**| | src | string | Yes| Text to scroll.| ## Attributes -| Name | Type| Description | -| ---------- | -------- | ------------------------------------ | -| allowScale | boolean | Whether to allow text to scale.
Default value: **false**| +| Name | Type| Description | +| ---------- | -------- | ------------------------------------------------------------ | +| allowScale | boolean | Whether to allow text to scale.
Default value: **false**
Since API version 9, this API is supported in ArkTS widgets.| ## Events | Name| Description| | -------- | -------- | -| onStart(event: () => void) | Triggered when the marquee starts scrolling.| -| onBounce(event: () => void) | Triggered when the marquee has reached the end. This event will be triggered for multiple times if the **loop** attribute is not set to **1**.| -| onFinish(event: () => void) | Triggered when the marquee has finished the number of scrolling times set by the **loop** attribute.| +| onStart(event: () => void) | Triggered when the marquee starts scrolling.
Since API version 9, this API is supported in ArkTS widgets.| +| onBounce(event: () => void) | Triggered when the marquee has reached the end. This event will be triggered for multiple times if the **loop** attribute is not set to **1**.
Since API version 9, this API is supported in ArkTS widgets.| +| onFinish(event: () => void) | Triggered when the marquee has finished the number of scrolling times set by the **loop** attribute.
Since API version 9, this API is supported in ArkTS widgets.| ## Example diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-progress.md b/en/application-dev/reference/arkui-ts/ts-basic-components-progress.md index 98d9d6e2b1a2d0839071d2f72689d2cae6cb15ea..695d7f0cdff2c7381818f975e9eb31bf18a1d881 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-progress.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-progress.md @@ -18,17 +18,21 @@ Progress(options: {value: number, total?: number, type?: ProgressType}) Creates a progress indicator. +Since API version 9, this API is supported in ArkTS widgets. + **Parameters** | Name| Type| Mandatory| Description| | -------- | -------- | -------- | -------- | -| value | number | Yes| Current progress. If the value is less than 0, the value **0** is used. If the value is greater than that of **total**, the value of **total** is used.| -| total | number | No| Total progress.
Default value: **100**| -| type8+ | [ProgressType](#progresstype) | No| Style the progress indicator.
Default value: **ProgressType.Linear**| +| value | number | Yes| Current progress. If the value is less than 0, the value **0** is used. If the value is greater than that of **total**, the value of **total** is used.
Since API version 9, this API is supported in ArkTS widgets.| +| total | number | No| Total progress.
Default value: **100**
Since API version 9, this API is supported in ArkTS widgets.| +| type8+ | [ProgressType](#progresstype) | No| Style the progress indicator.
Default value: **ProgressType.Linear**
Since API version 9, this API is supported in ArkTS widgets.| | styledeprecated | [ProgressStyle](#progressstyle) | No| Type of the progress indicator.
This parameter is deprecated since API version 8. You are advised to use **type** instead.
Default value: **ProgressStyle.Linear**| ## ProgressType +Since API version 9, this API is supported in ArkTS widgets. + | Name| Description| | -------- | -------- | | Linear | Linear type. Since API version 9, the progress indicator adaptively switches to vertical layout if the height is greater than the width.| @@ -39,6 +43,8 @@ Creates a progress indicator. ## ProgressStyle +Since API version 9, this API is supported in ArkTS widgets. + | Name | Description | | --------- | ------------------------------------------------------------ | | Linear | Linear type.| @@ -51,10 +57,10 @@ Creates a progress indicator. | Name| Type| Description| | -------- | -------- | -------- | -| value | number | Current progress. If the value is less than 0, the value **0** is used. If the value is greater than that of **total**, the value of **total** is used. Invalid values do not take effect.| -| color | [ResourceColor](ts-types.md#resourcecolor) | Background color of the progress indicator.| -| backgroundColor | [ResourceColor](ts-types.md#resourcecolor) | Background color of the progress indicator.| -| style8+ | {
strokeWidth?: [Length](ts-types.md#length),
scaleCount?: number,
scaleWidth?: [Length](ts-types.md#length)
} | Component style.
- **strokeWidth**: stroke width of the progress indicator. It cannot be set in percentage. Since API version 9, if the stroke width of the ring progress bar is greater than or equal to the radius, the width is changed to half of the radius.
Default value: **4.0Vp**
- **scaleCount**: number of divisions on the determinate ring-type process indicator.
Default value: **120**
- **scaleWidth**: scale width of the ring progress bar. It cannot be set in percentage. If it is greater than the value of **strokeWidth**, the default scale width is used.
Default value: **2.0Vp**| +| value | number | Current progress. If the value is less than 0, the value **0** is used. If the value is greater than that of **total**, the value of **total** is used. Invalid values do not take effect.
Since API version 9, this API is supported in ArkTS widgets.| +| color | [ResourceColor](ts-types.md#resourcecolor) | Background color of the progress indicator.
Since API version 9, this API is supported in ArkTS widgets.| +| backgroundColor | [ResourceColor](ts-types.md#resourcecolor) | Background color of the progress indicator.
Since API version 9, this API is supported in ArkTS widgets.| +| style8+ | {
strokeWidth?: [Length](ts-types.md#length),
scaleCount?: number,
scaleWidth?: [Length](ts-types.md#length)
} | Component style.
- **strokeWidth**: stroke width of the progress indicator. It cannot be set in percentage. Since API version 9, if the stroke width of the ring progress bar is greater than or equal to the radius, the width is changed to half of the radius.
Default value: **4.0Vp**
- **scaleCount**: number of divisions on the determinate ring-type process indicator.
Default value: **120**
- **scaleWidth**: scale width of the ring progress bar. It cannot be set in percentage. If it is greater than the value of **strokeWidth**, the default scale width is used.
Default value: **2.0Vp**
Since API version 9, this API is supported in ArkTS widgets.| ## Example diff --git a/en/application-dev/reference/arkui-ts/ts-container-list.md b/en/application-dev/reference/arkui-ts/ts-container-list.md index 7e00b5a33df637eba2cb20e9c36b49920dc9dcfc..173143538e6a4242fd7644d74faaeca465bd764c 100644 --- a/en/application-dev/reference/arkui-ts/ts-container-list.md +++ b/en/application-dev/reference/arkui-ts/ts-container-list.md @@ -17,6 +17,8 @@ This component supports the **[\](ts-container-listitem.md)** and **[\ List(value?:{space?: number | string, initialIndex?: number, scroller?: Scroller}) +Since API version 9, this API is supported in ArkTS widgets. + **Parameters** | Name| Type| Mandatory| Description| @@ -31,20 +33,22 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the | Name| Type| Description| | -------- | -------- | -------- | -| listDirection | [Axis](ts-appendix-enums.md#axis) | Direction in which the list items are arranged.
Default value: **Axis.Vertical**| -| divider | {
strokeWidth: [Length](ts-types.md#length),
color?:[ResourceColor](ts-types.md),
startMargin?: Length,
endMargin?: Length
} \| null | Style of the divider for the list items. By default, there is no divider.
- **strokeWidth**: stroke width of the divider.
- **color**: color of the divider.
- **startMargin**: distance between the divider and the start edge of the list.
- **endMargin**: distance between the divider and the end edge of the list.| -| scrollBar | [BarState](ts-appendix-enums.md#barstate) | Scrollbar status.
Default value: **BarState.Off**| -| cachedCount | number | Number of list items or list item groups to be preloaded. A list item group is calculated as a whole, and all list items of the group are preloaded at the same time. For details, see [Minimizing White Blocks During Swiping](../../ui/ui-ts-performance-improvement-recommendation.md#minimizing-white-blocks-during-swiping).
Default value: **1**| +| listDirection | [Axis](ts-appendix-enums.md#axis) | Direction in which the list items are arranged.
Default value: **Axis.Vertical**
Since API version 9, this API is supported in ArkTS widgets.| +| divider | {
strokeWidth: [Length](ts-types.md#length),
color?:[ResourceColor](ts-types.md#resourcecolor),
startMargin?: Length,
endMargin?: Length
} \| null | Style of the divider for the list items. By default, there is no divider.
- **strokeWidth**: stroke width of the divider.
- **color**: color of the divider.
- **startMargin**: distance between the divider and the start edge of the list.
- **endMargin**: distance between the divider and the end edge of the list.
Since API version 9, this API is supported in ArkTS widgets.| +| scrollBar | [BarState](ts-appendix-enums.md#barstate) | Scrollbar status.
Default value: **BarState.Off**
Since API version 9, this API is supported in ArkTS widgets.| +| cachedCount | number | Number of list items or list item groups to be preloaded. A list item group is calculated as a whole, and all list items of the group are preloaded at the same time. For details, see [Minimizing White Blocks During Swiping](../../ui/ui-ts-performance-improvement-recommendation.md#minimizing-white-blocks-during-swiping).
Default value: **1**
Since API version 9, this API is supported in ArkTS widgets.| | editMode(deprecated) | boolean | Whether to enter editing mode.
This API is deprecated since API version 9.
Default value: **false**| -| edgeEffect | [EdgeEffect](ts-appendix-enums.md#edgeeffect) | Scroll effect.
Default value: **EdgeEffect.Spring**| -| chainAnimation | boolean | Whether to display chained animations on this list when it slides or its top or bottom is dragged. The list items are separated with even space, and one item animation starts after the previous animation during basic sliding interactions. The chained animation effect is similar with spring physics.
Default value: **false**
- **false**: No chained animations are displayed.
- **true**: Chained animations are displayed.| -| multiSelectable8+ | boolean | Whether to enable mouse frame selection.
Default value: **false**
- **false**: The mouse frame selection is disabled.
- **true**: The mouse frame selection is enabled.| -| lanes9+ | number \| [LengthConstrain](ts-types.md#lengthconstrain) | In the following description, **listDirection** is set to **Axis.Vertical**:
Number of columns in which the list items are arranged along the cross axis.
Default value: **1**
The rules are as follows:
- If the value is set to a number, the column width is determined based on the specified number and the cross-axis width of the **\** component.
- If the value is set to {minLength, maxLength}, the number of columns is adjusted adaptively based on the width of the **\** component, ensuring that the width respects the {minLength, maxLength} constraints during adaptation. The **minLength** constraint is prioritized. For example, if **lanes** is set to **{minLength: 40vp, maxLength: 60vp}** and the width of the **\** component is 70 vp, the list items are arranged in one column with their alignment compliant with the **alignListItem** settings. If the width of the **\** component is changed to 80 vp, which is twice the value of **minLength**, the list items are arranged in two columns.| -| alignListItem9+ | ListItemAlign | Alignment mode of list items along the cross axis when: Cross-axis width of the **\** component > Cross-axis width of list items x Value of **lanes**.
Default value: **ListItemAlign.Start**| -| sticky9+ | StickyStyle | Whether to pin the header to the top or the footer to the bottom in the **\** component. This attribute is used together with the **[\](ts-container-listitemgroup.md)** component.
Default value: **StickyStyle.None**
**NOTE**
The **sticky** attribute can be set to **StickyStyle.Header** or \| **StickyStyle.Footer** to support both the pin-to-top and pin-to-bottom features.| +| edgeEffect | [EdgeEffect](ts-appendix-enums.md#edgeeffect) | Scroll effect.
Default value: **EdgeEffect.Spring**
Since API version 9, this API is supported in ArkTS widgets.| +| chainAnimation | boolean | Whether to display chained animations on this list when it slides or its top or bottom is dragged. The list items are separated with even space, and one item animation starts after the previous animation during basic sliding interactions. The chained animation effect is similar with spring physics.
Default value: **false**
- **false**: No chained animations are displayed.
- **true**: Chained animations are displayed.
Since API version 9, this API is supported in ArkTS widgets.| +| multiSelectable8+ | boolean | Whether to enable mouse frame selection.
Default value: **false**
- **false**: The mouse frame selection is disabled.
- **true**: The mouse frame selection is enabled.
Since API version 9, this API is supported in ArkTS widgets.| +| lanes9+ | number \| [LengthConstrain](ts-types.md#lengthconstrain) | In the following description, **listDirection** is set to **Axis.Vertical**:
Number of columns in which the list items are arranged along the cross axis.
Default value: **1**
The rules are as follows:
- If the value is set to a number, the column width is determined based on the specified number and the cross-axis width of the **\** component.
- If the value is set to {minLength, maxLength}, the number of columns is adjusted adaptively based on the width of the **\** component, ensuring that the width respects the {minLength, maxLength} constraints during adaptation. The **minLength** constraint is prioritized. For example, if **lanes** is set to **{minLength: 40vp, maxLength: 60vp}** and the width of the **\** component is 70 vp, the list items are arranged in one column with their alignment compliant with the **alignListItem** settings. If the width of the **\** component is changed to 80 vp, which is twice the value of **minLength**, the list items are arranged in two columns.
This API is supported in ArkTS widgets.| +| alignListItem9+ | ListItemAlign | Alignment mode of list items along the cross axis when: Cross-axis width of the **\** component > Cross-axis width of list items x Value of **lanes**.
Default value: **ListItemAlign.Start**
This API is supported in ArkTS widgets.| +| sticky9+ | StickyStyle | Whether to pin the header to the top or the footer to the bottom in the **\** component. This attribute is used together with the **[\](ts-container-listitemgroup.md)** component.
Default value: **StickyStyle.None**
This API is supported in ArkTS widgets.
**NOTE**
The **sticky** attribute can be set to **StickyStyle.Header** or \| **StickyStyle.Footer** to support both the pin-to-top and pin-to-bottom features.| ## ListItemAlign9+ +This API is supported in ArkTS widgets. + | Name | Description | | ------ | -------------------------------------- | | Start | The list items are packed toward the start edge of the **\** component along the cross axis.| @@ -53,6 +57,8 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the ## StickyStyle9+ +This API is supported in ArkTS widgets. + | Name | Description | | ------ | -------------------------------------- | | None | In the **\** component, the header is not pinned to the top, and the footer is not pinned to the bottom.| @@ -66,13 +72,13 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the | Name| Description| | -------- | -------- | | onItemDelete(deprecated)(event: (index: number) => boolean) | Triggered when a list item is deleted.
This API is deprecated since API version 9.
- **index**: index of the deleted list item.| -| onScroll(event: (scrollOffset: number, scrollState: ScrollState) => void) | Triggered when the list scrolls.
- **scrollOffset**: scroll offset.
- **[scrollState](#scrollstate)**: current scroll state.| -| onScrollIndex(event: (start: number, end: number) => void) | Triggered when scrolling starts.
When calculating the index value, the **\** accounts for one index value as a whole, and the index values of the list items within are not calculated.
- **start**: index of the scroll start position.
- **end**: index of the scroll end position.| -| onReachStart(event: () => void) | Triggered when the list reaches the start position.| -| onReachEnd(event: () => void) | Triggered when the list reaches the end position.| -| onScrollFrameBegin9+(event: (offset: number, state: ScrollState) => { offsetRemain }) | Triggered when the list starts to scroll. The input parameters indicate the amount by which the list will scroll. The event handler then works out the amount by which the list needs to scroll based on the real-world situation and returns the result.
\- **offset**: amount to scroll by.
\- **state**: current sliding status.
- **offsetRemain**: required amount to scroll by in the horizontal direction.| -| onScrollStart9+(event: () => void) | Triggered when the list starts scrolling initiated by the user's finger dragging the **\** component or its scrollbar. This event will not be triggered if the scrolling is initiated by using [Scroller](ts-container-scroll.md#scroller).| -| onScrollStop(event: () => void) | Triggered when the list stops scrolling after the user's finger leaves the screen. This event will not be triggered if the scrolling is initiated by using [Scroller](ts-container-scroll.md#scroller).| +| onScroll(event: (scrollOffset: number, scrollState: ScrollState) => void) | Triggered when the list scrolls.
- **scrollOffset**: scroll offset.
- **[scrollState](#scrollstate)**: current scroll state.
Since API version 9, this API is supported in ArkTS widgets.| +| onScrollIndex(event: (start: number, end: number) => void) | Triggered when scrolling starts.
When calculating the index value, the **\** accounts for one index value as a whole, and the index values of the list items within are not calculated.
- **start**: index of the scroll start position.
- **end**: index of the scroll end position.
Since API version 9, this API is supported in ArkTS widgets.| +| onReachStart(event: () => void) | Triggered when the list reaches the start position.
Since API version 9, this API is supported in ArkTS widgets.| +| onReachEnd(event: () => void) | Triggered when the list reaches the end position.
Since API version 9, this API is supported in ArkTS widgets.| +| onScrollFrameBegin9+(event: (offset: number, state: ScrollState) => { offsetRemain }) | Triggered when the list starts to scroll. The input parameters indicate the amount by which the list will scroll. The event handler then works out the amount by which the list needs to scroll based on the real-world situation and returns the result.
\- **offset**: amount to scroll by.
\- **state**: current sliding status.
- **offsetRemain**: actual amount by which the list scrolls.
This API is supported in ArkTS widgets.| +| onScrollStart9+(event: () => void) | Triggered when the list starts scrolling initiated by the user's finger dragging the **\** component or its scrollbar. This event is also triggered when the animation contained in the scrolling triggered by [Scroller](ts-container-scroll.md#scroller) starts.| +| onScrollStop(event: () => void) | Triggered when the list stops scrolling after the user's finger leaves the screen. This event is also triggered when the animation contained in the scrolling triggered by [Scroller](ts-container-scroll.md#scroller) stops.
Since API version 9, this API is supported in ArkTS widgets.| | onItemMove(event: (from: number, to: number) => boolean) | Triggered when a list item moves.
- **from**: index of the item before moving.
- **to**: index of the item after moving.| | onItemDragStart(event: (event: ItemDragInfo, itemIndex: number) => ((() => any) \| void) | Triggered when a list element starts to be dragged.
- **event**: See [ItemDragInfo](ts-container-grid.md#itemdraginfo).
- **itemIndex**: index of the dragged list element.| | onItemDragEnter(event: (event: ItemDragInfo) => void) | Triggered when the dragged item enters the drop target of the list.
- **event**: See [ItemDragInfo](ts-container-grid.md#itemdraginfo).| @@ -82,6 +88,8 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the ## ScrollState +Since API version 9, this API is supported in ArkTS widgets. + | Name | Description | | ------ | ------------------------- | | Idle | Not scrolling. | diff --git a/en/application-dev/reference/arkui-ts/ts-container-listitem.md b/en/application-dev/reference/arkui-ts/ts-container-listitem.md index a101532880cdab858319d8a13cf7df487cfb3a33..c5bb7c662b007a3cd5b186ecf2c910efef2362ef 100644 --- a/en/application-dev/reference/arkui-ts/ts-container-listitem.md +++ b/en/application-dev/reference/arkui-ts/ts-container-listitem.md @@ -16,6 +16,8 @@ This component can contain a single child component. ListItem(value?: string) +Since API version 9, this API is supported in ArkTS widgets. + ## Attributes In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported. @@ -24,7 +26,7 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the | -------- | -------- | -------- | | sticky(deprecated) | [Sticky](#stickydeprecated) | Sticky effect of the list item.
Default value: **Sticky.None**
This API is deprecated since API version 9. You are advised to use **sticky** of the [\](ts-container-list.md#attributes) component.| | editable(deprecated) | boolean \| [EditMode](#editmodedeprecated) | Whether to enter editing mode, where the list item can be deleted or moved.
This API is deprecated since API version 9.
Default value: **false**| -| selectable8+ | boolean | Whether the current list item is selectable by mouse drag.
**NOTE**
This attribute takes effect only when mouse frame selection is enabled for the parent **\** container.
Default value: **true**| +| selectable8+ | boolean | Whether the current list item is selectable by mouse drag.
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
This attribute takes effect only when mouse frame selection is enabled for the parent **\** container.
Default value: **true**| | swipeAction9+ | {
start?: CustomBuilder,
end?:CustomBuilder,
edgeEffect?: [SwipeEdgeEffect](#swipeedgeeffect9),
} | Component displayed when the list item is swiped out from the screen edge.
- **start**: component on the left of the list item when the item is swiped to the right (in vertical list layout) or component above the list item when the item is swiped down (in horizontal list layout).
- **end**: component on the right of the list item when the item is swiped to the left (in vertical list layout) or component below the list item when the item is swiped up (in horizontal list layout).
- **edgeEffect**: scroll effect.
| ## Sticky(deprecated) @@ -53,7 +55,7 @@ This API is deprecated since API version 9. | Name| Description| | -------- | -------- | -| onSelect(event: (isSelected: boolean) => void)8+ | Triggered when the selected state of the **\** changes.
**isSelected**: Returns **true** if the **\** is selected by mouse drag; returns **false** otherwise.| +| onSelect(event: (isSelected: boolean) => void)8+ | Triggered when the selected state of the **\** changes.
**isSelected**: Returns **true** if the **\** is selected by mouse drag; returns **false** otherwise.
Since API version 9, this API is supported in ArkTS widgets.| ## Example diff --git a/en/application-dev/reference/arkui-ts/ts-explicit-animation.md b/en/application-dev/reference/arkui-ts/ts-explicit-animation.md index b2802444ab2e297ffc599263910afea57fee2465..1cee9be56077b524b2bb71e098336701e7dd9593 100644 --- a/en/application-dev/reference/arkui-ts/ts-explicit-animation.md +++ b/en/application-dev/reference/arkui-ts/ts-explicit-animation.md @@ -6,9 +6,10 @@ You can create explicit animation with your custom settings. > > The APIs of this module are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. - animateTo(value: AnimateParam, event: () => void): void +Since API version 9, this API is supported in ArkTS widgets. + | Name | Type | Mandatory | Description | | ---------------- | ------------ | -------------------- | -------------------- | | value | [AnimateParam](#animateparam)| Yes| Animation settings.| @@ -18,13 +19,13 @@ animateTo(value: AnimateParam, event: () => void): void | Name| Type| Description| | -------- | -------- | -------- | -| duration | number | Animation duration, in ms.
Default value: **1000**| +| duration | number | Animation duration, in ms.
Default value: **1000**
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
- The maximum animation duration on an ArkTS widget is 1000 ms. If the set value exceeds the limit, the value **1000** will be used.| | tempo | number | Animation playback speed. A larger value indicates faster animation playback, and a smaller value indicates slower animation playback. The value **0** means that there is no animation.
Default value: **1.0**| -| curve | [Curve](ts-appendix-enums.md#curve) \| [ICurve](../apis/js-apis-curve.md#icurve) \| string | Animation curve.
Default value: **Curve.Linear**| +| curve | [Curve](ts-appendix-enums.md#curve) \| [ICurve](../apis/js-apis-curve.md#icurve) \| string | Animation curve.
Default value: **Curve.Linear**
Since API version 9, this API is supported in ArkTS widgets.| | delay | number | Delay of animation playback, in ms. By default, the playback is not delayed.
Default value: **0**| | iterations | number | Number of times that the animation is played. By default, the animation is played once. The value **-1** indicates that the animation is played for an unlimited number of times.
Default value: **1**| -| playMode | [PlayMode](ts-appendix-enums.md#playmode) | Animation playback mode. By default, the animation is played from the beginning after the playback is complete.
Default value: **PlayMode.Normal**| -| onFinish | () => void | Callback invoked when the animation playback is complete.| +| playMode | [PlayMode](ts-appendix-enums.md#playmode) | Animation playback mode. By default, the animation is played from the beginning after the playback is complete.
Default value: **PlayMode.Normal**
Since API version 9, this API is supported in ArkTS widgets.| +| onFinish | () => void | Callback invoked when the animation playback is complete.
Since API version 9, this API is supported in ArkTS widgets.| ## Example diff --git a/en/application-dev/reference/arkui-ts/ts-pixel-units.md b/en/application-dev/reference/arkui-ts/ts-pixel-units.md index 2256aa963c944561e69ccbf110a656347afd448a..4f7099cc28fffbe5b72c6fa3ddd5fe0cfa1b969f 100644 --- a/en/application-dev/reference/arkui-ts/ts-pixel-units.md +++ b/en/application-dev/reference/arkui-ts/ts-pixel-units.md @@ -8,21 +8,21 @@ The framework provides four pixel units, with vp as the reference data unit. | px | Physical pixel unit of the screen. | | vp | Pixel unit specific to the screen density. Pixels in this unit are converted into physical pixels of the screen based on the screen pixel density. This unit is used for values whose unit is not specified.| | fp | Font pixel, which is similar to vp and varies according to the system font size. | -| lpx | Logical pixel unit of the window. It is the ratio of the actual screen width to the logical width (configured by **designWidth**). For example, if **designWidth** is set to **720** (default value), then 1lpx is equal to 2px for a screen with an actual width of 1440 physical pixels. | +| lpx | Logical pixel unit of the window. It is the ratio of the actual screen width to the logical width (configured by **designWidth**). For example, if **designWidth** is set to **720** (default value), then 1lpx is equal to 2px for a screen with an actual width of 1440 physical pixels.| ## Pixel Unit Conversion Conversion between px and other pixel units is supported. -| API | Description | -| ---------------------------------------- | ---------------------- | -| vp2px(value : number) : number | Converts a value in units of vp to a value in units of px. | -| px2vp(value : number) : number | Converts a value in units of px to a value in units of vp. | -| fp2px(value : number) : number | Converts a value in units of fp to a value in units of px. | -| px2fp(value : number) : number | Converts a value in units of px to a value in units of fp. | -| lpx2px(value : number) : number | Converts a value in units of lpx to a value in units of px.| -| px2lpx(value : number) : number | Converts a value in units of px to a value in units of lpx.| +| API | Description | +| --------------------------------------------------- | ------------------------------------------------------------ | +| vp2px(value : number) : number | Converts a value in units of vp to a value in units of px.
Since API version 9, this API is supported in ArkTS widgets.| +| px2vp(value : number) : number | Converts a value in units of px to a value in units of vp.
Since API version 9, this API is supported in ArkTS widgets.| +| fp2px(value : number) : number | Converts a value in units of fp to a value in units of px.
Since API version 9, this API is supported in ArkTS widgets.| +| px2fp(value : number) : number | Converts a value in units of px to a value in units of fp.
Since API version 9, this API is supported in ArkTS widgets.| +| lpx2px(value : number) : number | Converts a value in units of lpx to a value in units of px.
Since API version 9, this API is supported in ArkTS widgets.| +| px2lpx(value : number) : number | Converts a value in units of px to a value in units of lpx.
Since API version 9, this API is supported in ArkTS widgets.| ## Example diff --git a/en/application-dev/ui/ui-ts-custom-component-lifecycle-callbacks.md b/en/application-dev/ui/ui-ts-custom-component-lifecycle-callbacks.md index 22e3a6d598b8fdd0aa986c15c0671e191be2da7a..1ac564f253d1c361d6aeb00ffacbe37716f921b1 100644 --- a/en/application-dev/ui/ui-ts-custom-component-lifecycle-callbacks.md +++ b/en/application-dev/ui/ui-ts-custom-component-lifecycle-callbacks.md @@ -15,12 +15,16 @@ aboutToAppear?(): void Invoked after a new instance of the custom component is created and before its **build** function is executed. You can change state variables in the **aboutToAppear** function. The change will take effect when you execute the **build** function next time. +Since API version 9, this API is supported in ArkTS widgets. + ## aboutToDisappear aboutToDisappear?(): void Invoked before the destructor of the custom component is consumed. Do not change state variables in the **aboutToDisappear** function as doing this can cause unexpected errors. For example, the modification of the **@Link** decorated variable may cause unstable application running. +Since API version 9, this API is supported in ArkTS widgets. + **Example 1:** ```ts @@ -122,6 +126,8 @@ onLayout?(children: Array\, constraint: ConstraintSizeOptions): vo Invoked when the custom component lays out its child components. Through this callback the component receives its child component layout information and size constraint from the framework. The state variable cannot be changed in the **onLayout** function. +This API is supported in ArkTS widgets. + **Parameters** | Name | Type | Description | @@ -135,6 +141,8 @@ onMeasure?(children: Array\, constraint: ConstraintSizeOptions): v Invoked when the custom component needs to determine its size. Through this callback the component receives its child component layout information and size constraint from the framework. The state variable cannot be changed in the onMeasure function. +This API is supported in ArkTS widgets. + **Parameters** | Name | Type | Description | @@ -146,6 +154,8 @@ Invoked when the custom component needs to determine its size. Through this call Provides the child component layout information. +This API is supported in ArkTS widgets. + | Name | Type | Description | | ---------- | ----------------------------------------------------------------------------------------------------------- | -------------------------------------- | | name | string | Name of the child component. | @@ -160,6 +170,8 @@ Provides the child component layout information. Provides the border information of the child component. +This API is supported in ArkTS widgets. + | Name | Type | Description | | ----------- | ---------------------------------------------------------- | ---------------------------------------------- | | borderWidth | [EdgeWidths](../reference/arkui-ts/ts-types.md#edgewidths) | Edge widths in different directions of the child component.| @@ -170,6 +182,8 @@ Provides the border information of the child component. Provides the layout information of the child component. +This API is supported in ArkTS widgets. + | Name | Type | Description | | ---------- | -------------------------------------------------------------------------------- | ---------------- | | position | [Position](../reference/arkui-ts/ts-types.md#position) | Position coordinates of the child component.|