未验证 提交 40cff1e2 编写于 作者: O openharmony_ci 提交者: Gitee

!2233 1946 处理完成:ts-basic-components-button.md 刷新及 arkui-ts 文件夹下转义符等问题的修改

Merge pull request !2233 from ester.zhou/TR-1946
......@@ -50,13 +50,17 @@
- Basic Components
- [Blank](ts-basic-components-blank.md)
- [Button](ts-basic-components-button.md)
- [Checkbox](ts-basic-components-checkbox.md)
- [CheckboxGroup](ts-basic-components-checkboxgroup.md)
- [DataPanel](ts-basic-components-datapanel.md)
- [DatePicker](ts-basic-components-datepicker.md)
- [Divider](ts-basic-components-divider.md)
- [Gauge](ts-basic-components-gauge.md)
- [Image](ts-basic-components-image.md)
- [ImageAnimator](ts-basic-components-imageanimator.md)
- [Progress](ts-basic-components-progress.md)
- [QRCode](ts-basic-components-qrcode.md)
- [Radio](ts-basic-components-radio.md)
- [Rating](ts-basic-components-rating.md)
- [Select](ts-basic-components-rating.md)
- [Span](ts-basic-components-span.md)
......@@ -68,6 +72,7 @@
- [TextTimer](ts-basic-components-texttimer.md)
- [Toggle](ts-basic-components-toggle.md)
- [TextClock](ts-basic-components-textclock.md)
- [PluginComponent](ts-basic-components-plugincomponent.md)
- Container Components
- [AlphabetIndexer](ts-container-alphabet-indexer.md)
- [Badge](ts-container-badge.md)
......@@ -91,6 +96,9 @@
- [Swiper](ts-container-swiper.md)
- [Tabs](ts-container-tabs.md)
- [TabContent](ts-container-tabcontent.md)
- [Refresh](ts-container-refresh.md)
- [Stepper](ts-basic-components-stepper.md)
- [StepperItem](ts-basic-components-stepperitem.md)
- Media Components
- [Video](ts-media-components-video.md)
- Drawing Components
......@@ -123,10 +131,12 @@
- [Interpolation Calculation](ts-interpolation-calculation.md)
- Global UI Methods
- [Image Cache](ts-methods-image-cache.md)
- [Media Query](ts-methods-media-query.md)
- Pop-up Window
- [Alert Dialog Box](ts-methods-alert-dialog-box.md)
- [Action Sheet](ts-methods-action-sheet.md)
- [Custom Dialog Box](ts-methods-custom-dialog-box.md)
- [Date Picker Dialog Box](ts-methods-datepicker-dialog.md)
- [Text Picker Dialog Box](ts-methods-textpicker-dialog.md)
- [Menu](ts-methods-menu.md)
- Appendix
- [Built-in Enums](ts-appendix-enums.md)
# AnimatorProperty
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> This animation is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
When the universal attributes of a component change, you can create an **AnimatorProperty** for gradient to improve user experience.
| Name | Type | Default Value | Description |
| Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- |
| duration | number | 1000 | Animation duration, in ms. The default duration is 1000 ms. |
| curve | Curve | Curve.Linear | Animation curve. The default curve is linear. |
| delay | number | 0 | Delay of animation playback, in ms. By default, the playback is not delayed. |
| iterations | number | 1 | 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. |
| playMode | [PlayMode](ts-appendix-enums.md#playmode-enums) | PlayMode.Normal | Playback mode. By default, the animation is played from the beginning after the playback is complete. |
| duration | number | 1000 | Animation duration, in ms. The default duration is 1000 ms. |
| curve | Curve | Curve.Linear | Animation curve. The default curve is linear. |
| delay | number | 0 | Delay of animation playback, in ms. By default, the playback is not delayed. |
| iterations | number | 1 | 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. |
| playMode | [PlayMode](ts-appendix-enums.md#playmode-enums) | PlayMode.Normal | Playback mode. By default, the animation is played from the beginning after the playback is complete. |
- Curve enums
| Name | Description |
| -------- | -------- |
| Linear | The animation speed keeps unchanged. |
| Ease | The animation starts at a low speed and then accelerates. It slows down before the animation ends. The cubic-bezier curve (0.25, 0.1, 0.25, 1.0) is used. |
| EaseIn | The animation starts at a low speed. The cubic-bezier curve (0.42, 0.0, 1.0, 1.0) is used. |
| EaseOut | The animation ends at a low speed. The cubic-bezier curve (0.0, 0.0, 0.58, 1.0) is used. |
| EaseInOut | The animation starts and ends at a low speed. The cubic-bezier curve (0.42, 0.0, 0.58, 1.0) is used. |
| FastOutSlowIn | The animation uses the standard cubic-bezier curve (0.4, 0.0, 0.2, 1.0). |
| LinearOutSlowIn | The animation uses the deceleration cubic-bezier curve (0.0, 0.0, 0.2, 1.0). |
| FastOutLinearIn | The animation uses the acceleration cubic-bezier curve (0.4, 0.0, 1.0, 1.0). |
| ExtremeDeceleration | The animation uses the extreme deceleration cubic-bezier curve (0.0, 0.0, 0.0, 1.0). |
| Sharp | The animation uses the sharp cubic-bezier curve (0.33, 0.0, 0.67, 1.0). |
| Rhythm | The animation uses the rhythm cubic-bezier curve (0.7, 0.0, 0.2, 1.0). |
| Smooth | The animation uses the smooth cubic-bezier curve (0.4, 0.0, 0.4, 1.0). |
| Friction | Damping curve. The cubic-bezier curve (0.2, 0.0, 0.2, 1.0) is used. |
| Linear | The animation speed keeps unchanged. |
| Ease | The animation starts at a low speed and then accelerates. It slows down before the animation ends. The cubic-bezier curve (0.25, 0.1, 0.25, 1.0) is used. |
| EaseIn | The animation starts at a low speed. The cubic-bezier curve (0.42, 0.0, 1.0, 1.0) is used. |
| EaseOut | The animation ends at a low speed. The cubic-bezier curve (0.0, 0.0, 0.58, 1.0) is used. |
| EaseInOut | The animation starts and ends at a low speed. The cubic-bezier curve (0.42, 0.0, 0.58, 1.0) is used. |
| FastOutSlowIn | The animation uses the standard cubic-bezier curve (0.4, 0.0, 0.2, 1.0). |
| LinearOutSlowIn | The animation uses the deceleration cubic-bezier curve (0.0, 0.0, 0.2, 1.0). |
| FastOutLinearIn | The animation uses the acceleration cubic-bezier curve (0.4, 0.0, 1.0, 1.0). |
| ExtremeDeceleration | The animation uses the extreme deceleration cubic-bezier curve (0.0, 0.0, 0.0, 1.0). |
| Sharp | The animation uses the sharp cubic-bezier curve (0.33, 0.0, 0.67, 1.0). |
| Rhythm | The animation uses the rhythm cubic-bezier curve (0.7, 0.0, 0.2, 1.0). |
| Smooth | The animation uses the smooth cubic-bezier curve (0.4, 0.0, 0.4, 1.0). |
| Friction | Damping curve. The cubic-bezier curve (0.2, 0.0, 0.2, 1.0) is used. |
## Example
......
......@@ -5,83 +5,83 @@
| Name | Description |
| -------- | -------- |
| TopStart | Top start. |
| Top | Horizontally centered on the top. |
| TopEnd | Top end. |
| Start | Vertically centered start. |
| Center | Horizontally and vertically centered. |
| End | Vertically centered end. |
| BottomStart | Bottom start. |
| Bottom | Horizontally centered on the bottom. |
| BottomEnd | Bottom end. |
| TopStart | Top start. |
| Top | Horizontally centered on the top. |
| TopEnd | Top end. |
| Start | Vertically centered start. |
| Center | Horizontally and vertically centered. |
| End | Vertically centered end. |
| BottomStart | Bottom start. |
| Bottom | Horizontally centered on the bottom. |
| BottomEnd | Bottom end. |
## Axis Enums
| Name | Description |
| -------- | -------- |
| Vertical | Vertical direction. |
| Horizontal | Horizontal direction. |
| Vertical | Vertical direction. |
| Horizontal | Horizontal direction. |
## ItemAlign Enums
| Name | Description |
| -------- | -------- |
| Auto | The default configuration in the Flex container is used. |
| Start | The elements are in the Flex container, top-aligned in the cross-axis direction |
| Center | The elements are in the Flex container, centered in the cross-axis direction. |
| End | The elements are in the Flex container, bottom-aligned in the cross-axis direction. |
| Stretch | The elements are in the Flex container, stretched and padded in the cross-axis direction. If the size is not set, the elements are stretched to the container size. |
| Baseline | The elements are in the Flex container, text baseline aligned in the cross-axis direction. |
| Auto | The default configuration in the Flex container is used. |
| Start | The elements are in the Flex container, top-aligned in the cross-axis direction |
| Center | The elements are in the Flex container, centered in the cross-axis direction. |
| End | The elements are in the Flex container, bottom-aligned in the cross-axis direction. |
| Stretch | The elements are in the Flex container, stretched and padded in the cross-axis direction. If the size is not set, the elements are stretched to the container size. |
| Baseline | The elements are in the Flex container, text baseline aligned in the cross-axis direction. |
## LineCapStyle Enums
| Name | Description |
| -------- | -------- |
| Butt | The ends of dividing lines are square. |
| Round | The ends of dividing lines are rounded. |
| Square | The ends of dividing lines are square. |
| Butt | The ends of dividing lines are square. |
| Round | The ends of dividing lines are rounded. |
| Square | The ends of dividing lines are square. |
## PlayMode Enums
| Name | Description |
| -------- | -------- |
| Normal | The animation is played normally. |
| Reverse | The animation is played reversely. |
| Alternate | The animation is played normally for an odd number of times (1, 3, 5...) and reversely for an even number of times (2, 4, 6...). |
| AlternateReverse | The animation is played reversely for an odd number of times (1, 3, 5...) and normally for an even number of times (2, 4, 6...). |
| Normal | The animation is played normally. |
| Reverse | The animation is played reversely. |
| Alternate | The animation is played normally for an odd number of times (1, 3, 5...) and reversely for an even number of times (2, 4, 6...). |
| AlternateReverse | The animation is played reversely for an odd number of times (1, 3, 5...) and normally for an even number of times (2, 4, 6...). |
## ImageRepeat Enums
| Name | Description |
| -------- | -------- |
| X | Images are repeatedly drawn only on the horizontal axis. |
| Y | Images are repeatedly drawn only on the vertical axis. |
| XY | Images are repeatedly drawn on both axes. |
| NoRepeat | Images are not repeatedly drawn. |
| X | Images are repeatedly drawn only on the horizontal axis. |
| Y | Images are repeatedly drawn only on the vertical axis. |
| XY | Images are repeatedly drawn on both axes. |
| NoRepeat | Images are not repeatedly drawn. |
## TextDecorationType Enums
| Name | Description |
| -------- | -------- |
| Underline | Line under the text. |
| LineThrough | Line through the text. |
| Overline | Line over the text. |
| None | No decorative lines. |
| Underline | Line under the text. |
| LineThrough | Line through the text. |
| Overline | Line over the text. |
| None | No decorative lines. |
## TextCase Enums
| Name | Description |
| -------- | -------- |
| Normal | Normal case. |
| LowerCase | All lowercase. |
| UpperCase | All uppercase. |
| Normal | Normal case. |
| LowerCase | All lowercase. |
| UpperCase | All uppercase. |
## BarState Enums
......@@ -90,7 +90,7 @@
| -------- | -------- |
| Off | Hide. |
| On | Display. |
| Auto | Display on demand (displays when the screen is touched and disappears after 2s). |
| Auto | Display on demand (displays when the screen is touched and disappears after 2s). |
## LayoutDirection Enums
......
# Blank
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
......@@ -23,18 +23,18 @@ None
Blank(min?: Length)
- Parameters
| Name | Type | Mandatory | Default Value | Description |
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| min | Length | No | 0 | Minimum size of the **<Blank>** component in the container along the main axis. |
| min | Length | No | 0 | Minimum size of the **<Blank>** component in the container along the main axis. |
## Attributes
| Name | Type | Default Value | Description |
| Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- |
| color | Color | 0x00000000 | Color to fill the blank. |
| color | Color | 0x00000000 | Color to fill the blank. |
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> - Universal attribute methods are not supported.
......
# Button
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
......@@ -13,9 +13,9 @@ The **<Button>** component represents a component that can trigger actions
None
## Child Component
## Child Components
This component can contain child components.
Supported
## APIs
......@@ -23,40 +23,41 @@ This component can contain child components.
- Button(options?: {type?: ButtonType, stateEffect?: boolean})
**Table1** options parameters
| Name | Type | Mandatory | Default Value | Description |
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| type | ButtonType | No | Capsule | Button type. |
| stateEffect | boolean | No | true | Whether to enable the state switchover effect when a button is pressed. When the state is set to **false**, the state switchover effect is disabled. |
| type | ButtonType | No | Capsule | Button type. |
| stateEffect | boolean | No | true | Whether to enable the state switchover effect when a button is pressed. When the state is set to **false**, the state switchover effect is disabled. |
- Button(label?: string, options?: { type?: ButtonType, stateEffect?: boolean })
Creates a button component based on text content. In this case, the **<Button>** component cannot contain subcomponents.
Creates a button component based on text content. In this case, the **<Button>** component cannot contain child components.
**Table2** value parameters
| Name | Type | Mandatory | Default Value | Description |
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| label | string | No | - | Button text. |
| options | Object | No | - | For details, see the **options** parameters. |
| label | string | No | - | Button text. |
| options | Object | No | - | For details, see the **options** parameters. |
## Attributes
| Name | Type | Default Value | Description |
| Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- |
| type | ButtonType | Capsule | Button type. |
| stateEffect | boolean | true | Whether to enable the state switchover effect. When the state is set to **false**, the state switchover effect is disabled. |
| type | ButtonType | Capsule | Button type. |
| stateEffect | boolean | true | Whether to enable the state switchover effect. When the state is set to **false**, the state switchover effect is disabled. |
- ButtonType enums
| Name | Description |
| Name | Description |
| -------- | -------- |
| Capsule | Capsule-type button (the round corner is half of the height by default). |
| Circle | Circle button. |
| Normal | Normal button (without rounded corners by default). |
| Capsule | Capsule-type button (the round corner is half of the height by default). |
| Circle | Circle button. |
| Normal | Normal button (without rounded corners by default). |
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> - The rounded corner of a button is set by using [Border](ts-universal-attributes-border.md). (The rounded corner cannot be set by using a border API.)
>
> - When the button type is **Capsule**, the **borderRadius** settings do not take effect, and the rounded corner of the button is always half of the button height.
> - When the button type is **Circle**, the value of **borderRadius** is used as the button radius. If **borderRadius** is not set, the button radius is half of the width or height, whichever is smaller.
> - The button text is set using the [common text style](ts-universal-attributes-text-style.md).
......
......@@ -35,14 +35,14 @@ Checkbox( name?: string, group?: string )
## Events
| Name | Description|
| Name | Description|
| ----------| -------- |
|onChange(callback: (value: boolean) => void) | Triggered when the selection status of the check box changes.<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 selection status of the check box changes.<br>- The value **true** means that the check box is selected.<br>- The value **false** means that the check box is not selected.|
## Example
```
@Entry'
@Entry
@Component
struct CheckboxExample {
......
# DataPanel
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
......@@ -23,18 +23,18 @@ None
DataPanel(value:{values: number[], max?: number, type?: DataPanelType})
- Parameters
| Name | Type | Mandatory | Default&nbsp;Value | Description |
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| values | number[] | Yes | - | Value&nbsp;list.&nbsp;A&nbsp;maximum&nbsp;of&nbsp;nine&nbsp;values&nbsp;are&nbsp;supported. |
| max | number | No | 100 | -&nbsp;When&nbsp;set&nbsp;to&nbsp;a&nbsp;value&nbsp;greater&nbsp;than&nbsp;0,&nbsp;this&nbsp;parameter&nbsp;indicates&nbsp;the&nbsp;maximum&nbsp;value&nbsp;in&nbsp;the&nbsp;**values**&nbsp;list.<br/>-&nbsp;When&nbsp;set&nbsp;to&nbsp;a&nbsp;value&nbsp;equal&nbsp;to&nbsp;or&nbsp;smaller&nbsp;than&nbsp;0,&nbsp;this&nbsp;parameter&nbsp;indicates&nbsp;the&nbsp;sum&nbsp;of&nbsp;values&nbsp;in&nbsp;the&nbsp;**values**&nbsp;list.&nbsp;The&nbsp;values&nbsp;are&nbsp;displayed&nbsp;in&nbsp;proportion. |
| type<sup>8+</sup> | DataPanelType | No | DataPanelType.Circle | Type&nbsp;of&nbsp;the&nbsp;data&nbsp;panel. |
| values | number[] | Yes | - | Value list. A maximum of nine values are supported. |
| max | number | No | 100 | - 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. |
| type<sup>8+</sup> | DataPanelType | No | DataPanelType.Circle | Type of the data panel. |
- DataPanelType enums
| Name | Description |
| -------- | -------- |
| Line | Line&nbsp;data&nbsp;panel. |
| Circle | Circle&nbsp;data&nbsp;panel. |
| Line | Line data panel. |
| Circle | Circle data panel. |
## Example
......
# Divider
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
......@@ -25,12 +25,12 @@ Divider()
## Attributes
| Name | Type | Default&nbsp;Value | Description |
| Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- |
| vertical | boolean | false | Whether&nbsp;a&nbsp;vertical&nbsp;divider&nbsp;is&nbsp;used.&nbsp;The&nbsp;value&nbsp;**true**&nbsp;means&nbsp;that&nbsp;a&nbsp;vertical&nbsp;divider&nbsp;is&nbsp;used,&nbsp;and&nbsp;**false**&nbsp;means&nbsp;that&nbsp;a&nbsp;horizontal&nbsp;divider&nbsp;is&nbsp;used. |
| color | Color | - | Color&nbsp;of&nbsp;the&nbsp;divider. |
| strokeWidth | Length | 1 | Width&nbsp;of&nbsp;the&nbsp;divider. |
| lineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle-enums) | LineCapStyle.Butt | Cap&nbsp;style&nbsp;of&nbsp;the&nbsp;divider. |
| vertical | boolean | false | Whether a vertical divider is used. The value **true** means that a vertical divider is used, and **false** means that a horizontal divider is used. |
| color | Color | - | Color of the divider. |
| strokeWidth | Length | 1 | Width of the divider. |
| lineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle-enums) | LineCapStyle.Butt | Cap style of the divider. |
## Events
......
# Gauge
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
......@@ -13,9 +13,9 @@ Data gauge chart widget, which is used to display data in a ring chart.
None
## Child Component
## Child Components
N/A
None
## APIs
......@@ -23,22 +23,22 @@ N/A
Gauge(value:{value: number, min?: number, max?: number})
- Parameter
| Name | Type | Mandatory | Default&nbsp;Value | Description |
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| value | number | Yes | - | Current&nbsp;data&nbsp;value. |
| min | number | No | 0 | Minimum&nbsp;value&nbsp;of&nbsp;the&nbsp;current&nbsp;data&nbsp;segment. |
| max | number | No | 100 | Maximum&nbsp;value&nbsp;of&nbsp;the&nbsp;current&nbsp;data&nbsp;segment. |
| value | number | Yes | - | Current data value. |
| min | number | No | 0 | Minimum value of the current data segment. |
| max | number | No | 100 | Maximum value of the current data segment. |
## Attributes
| Name | Type | Default&nbsp;Value | Description |
| Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- |
| value | number | 0 | Sets&nbsp;the&nbsp;value&nbsp;of&nbsp;the&nbsp;current&nbsp;data&nbsp;chart. |
| startAngle | Angle | -150 | Set&nbsp;the&nbsp;start&nbsp;angle.&nbsp;Clock&nbsp;0&nbsp;indicates&nbsp;0&nbsp;degree,&nbsp;and&nbsp;the&nbsp;clockwise&nbsp;direction&nbsp;indicates&nbsp;the&nbsp;positive&nbsp;angle. |
| endAngle | Angle | 150 | Sets&nbsp;the&nbsp;end&nbsp;angle&nbsp;position.&nbsp;The&nbsp;clock&nbsp;0&nbsp;point&nbsp;is&nbsp;0&nbsp;degree,&nbsp;and&nbsp;the&nbsp;clockwise&nbsp;direction&nbsp;is&nbsp;the&nbsp;positive&nbsp;angle. |
| colors | Color&nbsp;\|&nbsp;Array&lt;ColorStop&gt; | - | Set&nbsp;the&nbsp;color&nbsp;of&nbsp;the&nbsp;chart.&nbsp;You&nbsp;can&nbsp;set&nbsp;the&nbsp;pure&nbsp;color&nbsp;or&nbsp;segmental&nbsp;gradient&nbsp;color. |
| strokeWidth | Length | - | Sets&nbsp;the&nbsp;ring&nbsp;thickness&nbsp;of&nbsp;a&nbsp;ring&nbsp;chart. |
| value | number | 0 | Sets the value of the current data chart. |
| startAngle | Angle | -150 | Set the start angle. Clock 0 indicates 0 degree, and the clockwise direction indicates the positive angle. |
| endAngle | Angle | 150 | Sets the end angle position. The clock 0 point is 0 degree, and the clockwise direction is the positive angle. |
| colors | Color \| Array&lt;ColorStop&gt; | - | Set the color of the chart. You can set the pure color or segmental gradient color. |
| strokeWidth | Length | - | Sets the ring thickness of a ring chart. |
## Example
......
# Image
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
......@@ -23,54 +23,54 @@ None
Image(value: {uri: string | PixelMap})
- Parameters
| Name | Type | Mandatory | Default&nbsp;Value | Description |
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| uri | string | Yes | - | Image&nbsp;URI.&nbsp;Both&nbsp;local&nbsp;and&nbsp;Internal&nbsp;URIs&nbsp;are&nbsp;supported. |
| uri | string | Yes | - | Image URI. Both local and Internal URIs are supported. |
## Attributes
| Name | Type | Default&nbsp;Value | Description |
| Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- |
| alt | string | - | Placeholder&nbsp;image&nbsp;displayed&nbsp;during&nbsp;loading.&nbsp;Both&nbsp;local&nbsp;and&nbsp;Internal&nbsp;URIs&nbsp;are&nbsp;supported. |
| objectFit | ImageFit | ImageFit.Cover | Image&nbsp;scale&nbsp;type. |
| objectRepeat | [ImageRepeat](ts-appendix-enums.md#imagerepeat enums) | ImageRepeat.NoRepeat | Whether&nbsp;the&nbsp;image&nbsp;is&nbsp;repeated.<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**NOTE:**<br/>>&nbsp;-&nbsp;This&nbsp;attribute&nbsp;is&nbsp;not&nbsp;applicable&nbsp;to&nbsp;SVG&nbsp;images. |
| interpolation | ImageInterpolation | ImageInterpolation.None | Interpolation&nbsp;effect&nbsp;of&nbsp;the&nbsp;image.&nbsp;This&nbsp;attribute&nbsp;is&nbsp;valid&nbsp;only&nbsp;when&nbsp;the&nbsp;image&nbsp;is&nbsp;zoomed&nbsp;in.<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**NOTE:**<br/>>&nbsp;-&nbsp;This&nbsp;attribute&nbsp;is&nbsp;not&nbsp;applicable&nbsp;to&nbsp;SVG&nbsp;images.<br/>>&nbsp;<br/>>&nbsp;-&nbsp;This&nbsp;attribute&nbsp;is&nbsp;not&nbsp;applicable&nbsp;to&nbsp;a&nbsp;**PixelMap**&nbsp;object. |
| renderMode | ImageRenderMode | ImageRenderMode.Original | Rendering&nbsp;mode&nbsp;of&nbsp;the&nbsp;image.<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**NOTE:**<br/>>&nbsp;-&nbsp;This&nbsp;attribute&nbsp;is&nbsp;not&nbsp;applicable&nbsp;to&nbsp;SVG&nbsp;images. |
| sourceSize | {<br/>width:&nbsp;number,<br/>height:&nbsp;number<br/>} | - | Decoding&nbsp;size&nbsp;of&nbsp;the&nbsp;image.&nbsp;The&nbsp;original&nbsp;image&nbsp;is&nbsp;decoded&nbsp;into&nbsp;an&nbsp;image&nbsp;of&nbsp;the&nbsp;specified&nbsp;size.&nbsp;If&nbsp;the&nbsp;value&nbsp;is&nbsp;of&nbsp;the&nbsp;number&nbsp;type,&nbsp;the&nbsp;unit&nbsp;px&nbsp;is&nbsp;used.<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**NOTE:**<br/>>&nbsp;This&nbsp;attribute&nbsp;is&nbsp;not&nbsp;applicable&nbsp;to&nbsp;a&nbsp;**PixelMap**&nbsp;object. |
| syncLoad<sup>8+</sup> | boolean | false | Whether&nbsp;to&nbsp;load&nbsp;images&nbsp;synchronously.&nbsp;By&nbsp;default,&nbsp;images&nbsp;are&nbsp;loaded&nbsp;asynchronously.&nbsp;During&nbsp;synchronous&nbsp;loading,&nbsp;the&nbsp;UI&nbsp;thread&nbsp;is&nbsp;blocked&nbsp;and&nbsp;the&nbsp;placeholder&nbsp;diagram&nbsp;is&nbsp;not&nbsp;displayed. |
| alt | string | - | Placeholder image displayed during loading. Both local and Internal URIs are supported. |
| objectFit | ImageFit | ImageFit.Cover | Image scale type. |
| objectRepeat | [ImageRepeat](ts-appendix-enums.md#imagerepeat enums) | ImageRepeat.NoRepeat | Whether the image is repeated.<br/>> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**<br/>> - This attribute is not applicable to SVG images. |
| interpolation | ImageInterpolation | ImageInterpolation.None | Interpolation effect of the image. This attribute is valid only when the image is zoomed in.<br/>> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**<br/>> - This attribute is not applicable to SVG images.<br/>> <br/>> - This attribute is not applicable to a **PixelMap** object. |
| renderMode | ImageRenderMode | ImageRenderMode.Original | Rendering mode of the image.<br/>> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**<br/>> - This attribute is not applicable to SVG images. |
| sourceSize | {<br/>width: number,<br/>height: number<br/>} | - | Decoding size of the image. The original image is decoded into an image of the specified size. If the value is of the number type, the unit px is used.<br/>> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**<br/>> This attribute is not applicable to a **PixelMap** object. |
| syncLoad<sup>8+</sup> | boolean | false | Whether to load images synchronously. By default, images are loaded asynchronously. During synchronous loading, the UI thread is blocked and the placeholder diagram is not displayed. |
- ImageFit enums
| Name | Description |
| -------- | -------- |
| Cover | The&nbsp;image&nbsp;is&nbsp;scaled&nbsp;with&nbsp;its&nbsp;aspect&nbsp;ratio&nbsp;retained&nbsp;for&nbsp;both&nbsp;sides&nbsp;to&nbsp;be&nbsp;greater&nbsp;than&nbsp;or&nbsp;equal&nbsp;to&nbsp;the&nbsp;display&nbsp;boundaries. |
| Contain | The&nbsp;image&nbsp;is&nbsp;scaled&nbsp;with&nbsp;its&nbsp;aspect&nbsp;ratio&nbsp;retained&nbsp;for&nbsp;the&nbsp;content&nbsp;to&nbsp;be&nbsp;completely&nbsp;displayed&nbsp;within&nbsp;the&nbsp;display&nbsp;boundaries. |
| Fill | The&nbsp;video&nbsp;content&nbsp;is&nbsp;resized&nbsp;to&nbsp;fill&nbsp;the&nbsp;display&nbsp;area&nbsp;while&nbsp;retaining&nbsp;its&nbsp;aspect&nbsp;ratio. |
| None | The&nbsp;original&nbsp;size&nbsp;is&nbsp;retained.&nbsp;Generally,&nbsp;this&nbsp;enum&nbsp;is&nbsp;used&nbsp;together&nbsp;with&nbsp;the&nbsp;**objectRepeat**&nbsp;attribute. |
| ScaleDown | The&nbsp;image&nbsp;content&nbsp;is&nbsp;displayed&nbsp;with&nbsp;its&nbsp;aspect&nbsp;ratio&nbsp;retained.&nbsp;The&nbsp;size&nbsp;is&nbsp;smaller&nbsp;than&nbsp;or&nbsp;equal&nbsp;to&nbsp;the&nbsp;original&nbsp;size. |
| Cover | The image is scaled with its aspect ratio retained for both sides to be greater than or equal to the display boundaries. |
| Contain | The image is scaled with its aspect ratio retained for the content to be completely displayed within the display boundaries. |
| Fill | The video content is resized to fill the display area while retaining its aspect ratio. |
| None | The original size is retained. Generally, this enum is used together with the **objectRepeat** attribute. |
| ScaleDown | The image content is displayed with its aspect ratio retained. The size is smaller than or equal to the original size. |
- ImageInterpolation enums
| Name | Description |
| -------- | -------- |
| None | Interpolation&nbsp;image&nbsp;data&nbsp;is&nbsp;not&nbsp;used. |
| High | The&nbsp;interpolation&nbsp;image&nbsp;data&nbsp;is&nbsp;used&nbsp;at&nbsp;the&nbsp;high&nbsp;level.&nbsp;The&nbsp;use&nbsp;of&nbsp;the&nbsp;interpolation&nbsp;image&nbsp;data&nbsp;may&nbsp;affect&nbsp;the&nbsp;image&nbsp;rendering&nbsp;speed. |
| Medium | The&nbsp;interpolation&nbsp;image&nbsp;data&nbsp;is&nbsp;used&nbsp;at&nbsp;the&nbsp;medium&nbsp;level. |
| Low | The&nbsp;interpolation&nbsp;image&nbsp;data&nbsp;is&nbsp;used&nbsp;at&nbsp;the&nbsp;low&nbsp;level. |
| None | Interpolation image data is not used. |
| High | The interpolation image data is used at the high level. The use of the interpolation image data may affect the image rendering speed. |
| Medium | The interpolation image data is used at the medium level. |
| Low | The interpolation image data is used at the low level. |
- ImageRenderMode enums
| Name | Description |
| -------- | -------- |
| Original | The&nbsp;image&nbsp;is&nbsp;rendered&nbsp;based&nbsp;on&nbsp;the&nbsp;original&nbsp;image,&nbsp;including&nbsp;the&nbsp;color. |
| Template | The&nbsp;image&nbsp;is&nbsp;rendered&nbsp;as&nbsp;a&nbsp;template&nbsp;image,&nbsp;and&nbsp;its&nbsp;color&nbsp;is&nbsp;ignored. |
| Original | The image is rendered based on the original image, including the color. |
| Template | The image is rendered as a template image, and its color is ignored. |
## Events
| Name | Description |
| -------- | -------- |
| onComplete(callback:&nbsp;(event?:&nbsp;{&nbsp;width:&nbsp;number,&nbsp;height:&nbsp;number,&nbsp;componentWidth:&nbsp;number,&nbsp;componentHeight:&nbsp;number,&nbsp;loadingStatus:&nbsp;number&nbsp;})&nbsp;=&gt;&nbsp;void) | Triggered&nbsp;when&nbsp;an&nbsp;image&nbsp;is&nbsp;successfully&nbsp;loaded.&nbsp;The&nbsp;loaded&nbsp;image&nbsp;is&nbsp;returned. |
| onError(callback:&nbsp;(event?:&nbsp;{&nbsp;componentWidth:&nbsp;number,&nbsp;componentHeight:&nbsp;number&nbsp;})&nbsp;=&gt;&nbsp;void) | An&nbsp;exception&nbsp;occurs&nbsp;during&nbsp;image&nbsp;loading. |
| onFinish(callback:&nbsp;()&nbsp;=&gt;&nbsp;void) | If&nbsp;the&nbsp;source&nbsp;file&nbsp;to&nbsp;be&nbsp;loaded&nbsp;is&nbsp;an&nbsp;SVG&nbsp;image,&nbsp;this&nbsp;callback&nbsp;is&nbsp;invoked&nbsp;when&nbsp;the&nbsp;SVG&nbsp;animation&nbsp;playback&nbsp;is&nbsp;complete.&nbsp;If&nbsp;the&nbsp;animation&nbsp;is&nbsp;an&nbsp;infinite&nbsp;loop,&nbsp;this&nbsp;callback&nbsp;is&nbsp;not&nbsp;triggered. |
| onComplete(callback: (event?: { width: number, height: number, componentWidth: number, componentHeight: number, loadingStatus: number }) =&gt; void) | Triggered when an image is successfully loaded. The loaded image is returned. |
| onError(callback: (event?: { componentWidth: number, componentHeight: number }) =&gt; void) | An exception occurs during image loading. |
| onFinish(callback: () =&gt; void) | If the source file to be loaded is an SVG image, this callback is invoked when the SVG animation playback is complete. If the animation is an infinite loop, this callback is not triggered. |
## Example
......
# ImageAnimator
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
......@@ -25,41 +25,41 @@ ImageAnimator()
## Attributes
| Name | Type | Default&nbsp;Value | Mandatory | Description |
| Name | Type | Default Value | Mandatory | Description |
| -------- | -------- | -------- | -------- | -------- |
| images | Array&lt;{<br/>src:string,<br/>width?:Length,<br/>height?:Length,<br/>top?:Length,<br/>left?:Length,<br/>duration?:number<br/>}&gt; | [] | Yes | Image&nbsp;frame&nbsp;information.&nbsp;The&nbsp;information&nbsp;of&nbsp;each&nbsp;frame&nbsp;includes&nbsp;the&nbsp;image&nbsp;path,&nbsp;image&nbsp;size,&nbsp;image&nbsp;position,&nbsp;and&nbsp;image&nbsp;playback&nbsp;duration.&nbsp;The&nbsp;detailed&nbsp;description&nbsp;is&nbsp;as&nbsp;follows:<br/>**src**:&nbsp;image&nbsp;path.&nbsp;The&nbsp;image&nbsp;format&nbsp;can&nbsp;be&nbsp;SVG,&nbsp;PNG,&nbsp;or&nbsp;JPG.<br/>**width**:&nbsp;image&nbsp;width.<br/>**height**:&nbsp;image&nbsp;height.<br/>**top**:&nbsp;vertical&nbsp;coordinate&nbsp;of&nbsp;the&nbsp;image&nbsp;relative&nbsp;to&nbsp;the&nbsp;upper&nbsp;left&nbsp;corner&nbsp;of&nbsp;the&nbsp;component.<br/>**left**:&nbsp;horizontal&nbsp;coordinate&nbsp;of&nbsp;the&nbsp;image&nbsp;relative&nbsp;to&nbsp;the&nbsp;upper&nbsp;left&nbsp;corner&nbsp;of&nbsp;the&nbsp;component.<br/>**duration**:&nbsp;playback&nbsp;duration&nbsp;of&nbsp;the&nbsp;image,&nbsp;in&nbsp;ms. |
| state | AnimationStatus | AnimationStatus.Initial | No | Playback&nbsp;status&nbsp;of&nbsp;the&nbsp;animation.&nbsp;The&nbsp;default&nbsp;status&nbsp;is&nbsp;**Initial**. |
| duration | number | 1000 | No | Playback&nbsp;duration,&nbsp;in&nbsp;ms.&nbsp;The&nbsp;default&nbsp;duration&nbsp;is&nbsp;1000&nbsp;ms.&nbsp;When&nbsp;the&nbsp;duration&nbsp;is&nbsp;**0**,&nbsp;no&nbsp;image&nbsp;is&nbsp;played.&nbsp;The&nbsp;value&nbsp;change&nbsp;takes&nbsp;effect&nbsp;only&nbsp;at&nbsp;the&nbsp;beginning&nbsp;of&nbsp;the&nbsp;next&nbsp;cycle.&nbsp;When&nbsp;a&nbsp;separate&nbsp;duration&nbsp;is&nbsp;set&nbsp;in&nbsp;images,&nbsp;the&nbsp;setting&nbsp;of&nbsp;this&nbsp;attribute&nbsp;is&nbsp;invalid. |
| reverse | boolean | false | No | Playback&nbsp;sequence.&nbsp;The&nbsp;value&nbsp;**false**&nbsp;indicates&nbsp;that&nbsp;images&nbsp;are&nbsp;played&nbsp;from&nbsp;the&nbsp;first&nbsp;one&nbsp;to&nbsp;the&nbsp;last&nbsp;one,&nbsp;and&nbsp;**true**&nbsp;indicates&nbsp;that&nbsp;images&nbsp;are&nbsp;played&nbsp;from&nbsp;the&nbsp;last&nbsp;one&nbsp;to&nbsp;the&nbsp;first&nbsp;one. |
| fixedSize | boolean | true | No | Whether&nbsp;the&nbsp;image&nbsp;size&nbsp;is&nbsp;the&nbsp;same&nbsp;as&nbsp;the&nbsp;component&nbsp;size.&nbsp;**true**:&nbsp;The&nbsp;image&nbsp;size&nbsp;is&nbsp;the&nbsp;same&nbsp;as&nbsp;the&nbsp;component&nbsp;size.&nbsp;In&nbsp;this&nbsp;case,&nbsp;the&nbsp;width,&nbsp;height,&nbsp;top,&nbsp;and&nbsp;left&nbsp;attributes&nbsp;of&nbsp;the&nbsp;image&nbsp;are&nbsp;invalid.&nbsp;**false**:&nbsp;The&nbsp;width,&nbsp;height,&nbsp;top,&nbsp;and&nbsp;left&nbsp;attributes&nbsp;of&nbsp;each&nbsp;image&nbsp;must&nbsp;be&nbsp;set&nbsp;separately. |
| preDecode | number | 0 | No | Whether&nbsp;to&nbsp;enable&nbsp;pre-decoding.&nbsp;The&nbsp;default&nbsp;value&nbsp;**0**&nbsp;indicates&nbsp;that&nbsp;pre-decoding&nbsp;is&nbsp;disabled.&nbsp;If&nbsp;this&nbsp;attribute&nbsp;is&nbsp;set&nbsp;to&nbsp;**2**,&nbsp;two&nbsp;images&nbsp;following&nbsp;the&nbsp;currently&nbsp;playing&nbsp;frame&nbsp;will&nbsp;be&nbsp;cached&nbsp;in&nbsp;advance&nbsp;to&nbsp;improve&nbsp;performance. |
| fillMode | FillMode | FillMode.Forwards | No | Status&nbsp;before&nbsp;and&nbsp;after&nbsp;the&nbsp;animation&nbsp;starts.&nbsp;For&nbsp;details&nbsp;about&nbsp;the&nbsp;options,&nbsp;see&nbsp;**FillMode**. |
| iterations | number | 1 | No | By&nbsp;default,&nbsp;the&nbsp;animation&nbsp;is&nbsp;played&nbsp;once.&nbsp;The&nbsp;value&nbsp;**-1**&nbsp;indicates&nbsp;that&nbsp;the&nbsp;animation&nbsp;is&nbsp;played&nbsp;for&nbsp;an&nbsp;unlimited&nbsp;number&nbsp;of&nbsp;times. |
| images | Array&lt;{<br/>src:string,<br/>width?:Length,<br/>height?:Length,<br/>top?:Length,<br/>left?:Length,<br/>duration?:number<br/>}&gt; | [] | Yes | Image frame information. The information of each frame includes the image path, image size, image position, and image playback duration. The detailed description is as follows:<br/>**src**: image path. The image format can be SVG, PNG, or JPG.<br/>**width**: image width.<br/>**height**: image height.<br/>**top**: vertical coordinate of the image relative to the upper left corner of the component.<br/>**left**: horizontal coordinate of the image relative to the upper left corner of the component.<br/>**duration**: playback duration of the image, in ms. |
| state | AnimationStatus | AnimationStatus.Initial | No | Playback status of the animation. The default status is **Initial**. |
| duration | number | 1000 | No | Playback duration, in ms. The default duration is 1000 ms. When the duration is **0**, no image is played. The value change takes effect only at the beginning of the next cycle. When a separate duration is set in images, the setting of this attribute is invalid. |
| reverse | boolean | false | No | Playback sequence. The value **false** indicates that images are played from the first one to the last one, and **true** indicates that images are played from the last one to the first one. |
| fixedSize | boolean | true | No | Whether the image size is the same as the component size. **true**: The image size is the same as the component size. In this case, the width, height, top, and left attributes of the image are invalid. **false**: The width, height, top, and left attributes of each image must be set separately. |
| preDecode | number | 0 | No | Whether to enable pre-decoding. The default value **0** indicates that pre-decoding is disabled. If this attribute is set to **2**, two images following the currently playing frame will be cached in advance to improve performance. |
| fillMode | FillMode | FillMode.Forwards | No | Status before and after the animation starts. For details about the options, see **FillMode**. |
| iterations | number | 1 | No | By default, the animation is played once. The value **-1** indicates that the animation is played for an unlimited number of times. |
- AnimationStatus enums
| Name | Description |
| -------- | -------- |
| Initial | The&nbsp;animation&nbsp;is&nbsp;in&nbsp;the&nbsp;initial&nbsp;state. |
| Running | The&nbsp;animation&nbsp;is&nbsp;being&nbsp;played. |
| Paused | The&nbsp;animation&nbsp;is&nbsp;paused. |
| Stopped | The&nbsp;animation&nbsp;is&nbsp;stopped. |
| Initial | The animation is in the initial state. |
| Running | The animation is being played. |
| Paused | The animation is paused. |
| Stopped | The animation is stopped. |
- FillMode enums
| Name | Description |
| -------- | -------- |
| None | After&nbsp;the&nbsp;playback&nbsp;is&nbsp;complete,&nbsp;the&nbsp;animation&nbsp;restores&nbsp;to&nbsp;the&nbsp;initial&nbsp;state. |
| Forwards | After&nbsp;the&nbsp;playback&nbsp;is&nbsp;complete,&nbsp;the&nbsp;animation&nbsp;remains&nbsp;in&nbsp;the&nbsp;end&nbsp;state. |
| None | After the playback is complete, the animation restores to the initial state. |
| Forwards | After the playback is complete, the animation remains in the end state. |
## Events
| Name | Description |
| -------- | -------- | -------- |
| onStart()&nbsp;=&gt;&nbsp;void | Triggered&nbsp;when&nbsp;the&nbsp;animation&nbsp;starts&nbsp;to&nbsp;play. |
| onPause()&nbsp;=&gt;&nbsp;void | Triggered&nbsp;when&nbsp;the&nbsp;animation&nbsp;playback&nbsp;is&nbsp;paused. |
| onRepeat()&nbsp;=&gt;&nbsp;void | Triggered&nbsp;when&nbsp;the&nbsp;animation&nbsp;playback&nbsp;is&nbsp;repeated. |
| onCancel()&nbsp;=&gt;&nbsp;void | Triggered&nbsp;when&nbsp;the&nbsp;animation&nbsp;playback&nbsp;is&nbsp;canceled. |
| onFinish()&nbsp;=&gt;&nbsp;void | Triggered&nbsp;when&nbsp;the&nbsp;animation&nbsp;playback&nbsp;is&nbsp;complete. |
| onStart() =&gt; void | Triggered when the animation starts to play. |
| onPause() =&gt; void | Triggered when the animation playback is paused. |
| onRepeat() =&gt; void | Triggered when the animation playback is repeated. |
| onCancel() =&gt; void | Triggered when the animation playback is canceled. |
| onFinish() =&gt; void | Triggered when the animation playback is complete. |
## Example
......
# Navigation
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
......@@ -13,9 +13,9 @@ The **&lt;Navigation&gt;** component typically functions as the root container o
None
## Child Component
## Child Components
It can contain subcomponents.
Supported
## APIs
......@@ -27,47 +27,47 @@ Creates a component that can automatically display the navigation bar, title, an
## Attributes
| Name | Type | Default&nbsp;Value | Description |
| Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- |
| title | string&nbsp;\|&nbsp;[Custom Builder](../../ui/ts-types.md) | - | Page&nbsp;title. |
| subtitle | string | - | Subtitle&nbsp;of&nbsp;the&nbsp;page. |
| menus | Array&lt;NavigationMenuItem&gt;&nbsp;\|&nbsp;[Custom Builder](../../ui/ts-types.md) | - | Menu&nbsp;in&nbsp;the&nbsp;upper&nbsp;right&nbsp;corner&nbsp;of&nbsp;the&nbsp;page. |
| titleMode | NavigationTitleMode | NavigationTitleMode.Free | Display&nbsp;mode&nbsp;of&nbsp;the&nbsp;page&nbsp;title&nbsp;bar. |
| toolBar | {<br/>items:[<br/>Object<br/>]&nbsp;}<br/>\|&nbsp;[Custom Builder](../../ui/ts-types.md) | - | Content&nbsp;of&nbsp;the&nbsp;toolbar.<br/>**items**:&nbsp;all&nbsp;items&nbsp;on&nbsp;the&nbsp;toolbar. |
| hideToolBar | boolean | false | Whether&nbsp;to&nbsp;hide&nbsp;the&nbsp;toolbar.<br/>**true**:&nbsp;Hide&nbsp;the&nbsp;toolbar.<br/>**false**:&nbsp;Show&nbsp;the&nbsp;toolbar. |
| hideTitleBar | boolean | false | Whether&nbsp;to&nbsp;hide&nbsp;the&nbsp;title&nbsp;bar. |
| hideBackButton | boolean | false | Whether&nbsp;to&nbsp;hide&nbsp;the&nbsp;back&nbsp;button. |
| title | string \| [Custom Builder](../../ui/ts-types.md) | - | Page title. |
| subtitle | string | - | Subtitle of the page. |
| menus | Array&lt;NavigationMenuItem&gt; \| [Custom Builder](../../ui/ts-types.md) | - | Menu in the upper right corner of the page. |
| titleMode | NavigationTitleMode | NavigationTitleMode.Free | Display mode of the page title bar. |
| toolBar | {<br/>items:[<br/>Object<br/>] }<br/>\| [Custom Builder](../../ui/ts-types.md) | - | Content of the toolbar.<br/>**items**: all items on the toolbar. |
| hideToolBar | boolean | false | Whether to hide the toolbar.<br/>**true**: Hide the toolbar.<br/>**false**: Show the toolbar. |
| hideTitleBar | boolean | false | Whether to hide the title bar. |
| hideBackButton | boolean | false | Whether to hide the back button. |
- NavigationMenuItem attributes
| Name | Type | Mandatory | Default&nbsp;Value | Description |
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| value | string | Yes | - | Text&nbsp;of&nbsp;an&nbsp;option&nbsp;on&nbsp;the&nbsp;menu&nbsp;bar. |
| icon | string | No | - | Icon&nbsp;path&nbsp;of&nbsp;an&nbsp;option&nbsp;on&nbsp;the&nbsp;menu&nbsp;bar. |
| action | ()&nbsp;=&gt;&nbsp;void | No | - | Callback&nbsp;invoked&nbsp;when&nbsp;an&nbsp;option&nbsp;is&nbsp;selected. |
| value | string | Yes | - | Text of an option on the menu bar. |
| icon | string | No | - | Icon path of an option on the menu bar. |
| action | () =&gt; void | No | - | Callback invoked when an option is selected. |
- Object attributes
| Name | Type | Mandatory | Default&nbsp;Value | Description |
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| value | string | Yes | - | Text&nbsp;of&nbsp;an&nbsp;option&nbsp;on&nbsp;the&nbsp;toolbar. |
| icon | string | No | - | Icon&nbsp;path&nbsp;of&nbsp;an&nbsp;option&nbsp;on&nbsp;the&nbsp;toolbar. |
| action | ()&nbsp;=&gt;&nbsp;void | No | - | Callback&nbsp;invoked&nbsp;when&nbsp;an&nbsp;option&nbsp;is&nbsp;selected. |
| value | string | Yes | - | Text of an option on the toolbar. |
| icon | string | No | - | Icon path of an option on the toolbar. |
| action | () =&gt; void | No | - | Callback invoked when an option is selected. |
- NavigationTitleMode enums
| Name | Description |
| Name | Description |
| -------- | -------- |
| Free | When&nbsp;the&nbsp;content&nbsp;is&nbsp;a&nbsp;scrollable&nbsp;component,&nbsp;the&nbsp;title&nbsp;shrinks&nbsp;as&nbsp;the&nbsp;content&nbsp;scrolls&nbsp;up&nbsp;(the&nbsp;subtitle&nbsp;fades&nbsp;out&nbsp;with&nbsp;its&nbsp;size&nbsp;remaining&nbsp;unchanged)&nbsp;and&nbsp;restores&nbsp;as&nbsp;the&nbsp;content&nbsp;scrolls&nbsp;down. |
| Mini | The&nbsp;mode&nbsp;is&nbsp;fixed&nbsp;at&nbsp;mini&nbsp;mode&nbsp;(icon&nbsp;+&nbsp;main&nbsp;title&nbsp;and&nbsp;subtitle). |
| Full | The&nbsp;mode&nbsp;is&nbsp;fixed&nbsp;at&nbsp;full&nbsp;mode&nbsp;(main&nbsp;title&nbsp;and&nbsp;subtitle). |
| Free | When the content is a scrollable component, the title shrinks as the content scrolls up (the subtitle fades out with its size remaining unchanged) and restores as the content scrolls down. |
| Mini | The mode is fixed at mini mode (icon + main title and subtitle). |
| Full | The mode is fixed at full mode (main title and subtitle). |
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> Currently, only the scrollable component **&lt;List&gt;** is supported.
## Events
| Name | Description |
| Name | Description |
| -------- | -------- |
| onTitleModeChanged(callback:&nbsp;(titleMode:&nbsp;NavigationTitleMode)&nbsp;=&gt;&nbsp;void) | Triggered&nbsp;when&nbsp;**titleMode**&nbsp;is&nbsp;set&nbsp;to&nbsp;**NavigationTitleMode.Free**&nbsp;and&nbsp;the&nbsp;title&nbsp;bar&nbsp;mode&nbsp;changes&nbsp;as&nbsp;content&nbsp;scrolls. |
| onTitleModeChanged(callback: (titleMode: NavigationTitleMode) =&gt; void) | Triggered when **titleMode** is set to **NavigationTitleMode.Free** and the title bar mode changes as content scrolls. |
## Example
......
# PluginComponent
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> - This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
>
> - The APIs of this module are system APIs and cannot be called by third-party applications.
......@@ -27,23 +27,23 @@ PluginComponent(value: { template: PluginComponentTemplate, data: any })
Creates a **PluginComponent** to display the UI provided by an external application.
- Parameters
| Name | Type | Mandatory | Default&nbsp;Value | Description |
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| value | {<br/>template:&nbsp;PluginComponentTemplate,<br/>data:&nbsp;KVObject<br/>} | Yes | - | **template**:&nbsp;template&nbsp;of&nbsp;the&nbsp;**PluginComponent**,&nbsp;which&nbsp;is&nbsp;bound&nbsp;to&nbsp;the&nbsp;component&nbsp;defined&nbsp;by&nbsp;the&nbsp;provider.<br/>**data**:&nbsp;data&nbsp;passed&nbsp;to&nbsp;the&nbsp;**PluginComponent**&nbsp;provider. |
| value | {<br/>template: PluginComponentTemplate,<br/>data: KVObject<br/>} | Yes | - | **template**: template of the **PluginComponent**, which is bound to the component defined by the provider.<br/>**data**: data passed to the **PluginComponent** provider. |
- PluginComponentTemplate parameters
| Name | Type | Description |
| -------- | -------- | -------- |
| source | string | Component&nbsp;template&nbsp;name. |
| ability | string | Name&nbsp;of&nbsp;the&nbsp;provider&nbsp;ability. |
| source | string | Component template name. |
| ability | string | Name of the provider ability. |
## Events
| Name | Description |
| -------- | -------- |
| onComplete(callback:&nbsp;()&nbsp;=&gt;&nbsp;void) | Triggered&nbsp;when&nbsp;the&nbsp;component&nbsp;loading&nbsp;is&nbsp;complete. |
| onError(callback:&nbsp;(info:&nbsp;{&nbsp;errcode:&nbsp;number,&nbsp;msg:&nbsp;string&nbsp;})&nbsp;=&gt;&nbsp;void) | Triggered&nbsp;when&nbsp;an&nbsp;error&nbsp;occurs&nbsp;during&nbsp;component&nbsp;loading.<br/>**errcode**:&nbsp;error&nbsp;code.<br/>**msg**:&nbsp;error&nbsp;information. |
| onComplete(callback: () =&gt; void) | Triggered when the component loading is complete. |
| onError(callback: (info: { errcode: number, msg: string }) =&gt; void) | Triggered when an error occurs during component loading.<br/>**errcode**: error code.<br/>**msg**: error information. |
## PluginComponentManager
......@@ -74,16 +74,16 @@ Used by the component provider to send the component and data to the component c
- Parameters
| Name | Type | Mandatory | Description |
| -------- | -------- | -------- | -------- |
| param | PushParameters | Yes | Information&nbsp;about&nbsp;the&nbsp;component&nbsp;consumer.&nbsp;For&nbsp;details,&nbsp;see description of PushParameters. |
| callback | AsyncCallback&lt;void&gt; | Yes | Asynchronous&nbsp;callback&nbsp;used&nbsp;to&nbsp;return&nbsp;the&nbsp;result. |
| param | PushParameters | Yes | Information about the component consumer. For details, see description of PushParameters. |
| callback | AsyncCallback&lt;void&gt; | Yes | Asynchronous callback used to return the result. |
- Description of PushParameters
| Name | Type | Mandatory | Description |
| -------- | -------- | -------- | -------- |
| want | Want | Yes | Ability&nbsp;information&nbsp;of&nbsp;the&nbsp;component&nbsp;consumer. |
| name | string | Yes | Component&nbsp;name. |
| data | KVObject | No | Component&nbsp;data&nbsp;value. |
| extraData | KVObject | No | Additional&nbsp;data&nbsp;value. |
| want | Want | Yes | Ability information of the component consumer. |
| name | string | Yes | Component name. |
| data | KVObject | No | Component data value. |
| extraData | KVObject | No | Additional data value. |
- Example
For details, see [APIs Called by Component Consumers](#apis-called-by-component-consumers).
......@@ -98,27 +98,27 @@ Used by the component consumer to request the component from the component provi
- Parameters
| Name | Type | Mandatory | Description |
| -------- | -------- | -------- | -------- |
| param | RequestParameters | Yes | Information&nbsp;about&nbsp;the&nbsp;component&nbsp;request.&nbsp;For&nbsp;details,&nbsp;see&nbsp; description of RequestParameters. |
| callback | AsyncCallback<RequestCallbackParameters&nbsp;\|&nbsp;void&gt; | | Asynchronous&nbsp;callback&nbsp;used&nbsp;to&nbsp;return&nbsp;the&nbsp;requested&nbsp;data. |
| param | RequestParameters | Yes | Information about the component request. For details, see  description of RequestParameters. |
| callback | AsyncCallback<RequestCallbackParameters \| void&gt; | | Asynchronous callback used to return the requested data. |
- Description of RequestParameters
| Name | Type | Mandatory | Description |
| -------- | -------- | -------- | -------- |
| want | Want | Yes | Ability&nbsp;information&nbsp;of&nbsp;the&nbsp;component&nbsp;provider. |
| name | string | Yes | Name&nbsp;of&nbsp;the&nbsp;requested&nbsp;component. |
| data | KVObject | Yes | Additional&nbsp;data. |
| want | Want | Yes | Ability information of the component provider. |
| name | string | Yes | Name of the requested component. |
| data | KVObject | Yes | Additional data. |
- Description of RequestCallbackParameters
| Name | Type | Description |
| -------- | -------- | -------- |
| componentTemplate | PluginComponentTemplate | Component&nbsp;template. |
| data | KVObject | Component&nbsp;data. |
| extraData | KVObject | Additional&nbsp;data. |
| componentTemplate | PluginComponentTemplate | Component template. |
| data | KVObject | Component data. |
| extraData | KVObject | Additional data. |
- Description of KVObject
| Name | Type | Description |
| -------- | -------- | -------- |
| key | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;boolean&nbsp;\|&nbsp;Array&nbsp;\|&nbsp;KVObject | **KVObject**&nbsp;uses&nbsp;**key**&nbsp;and&nbsp;**value**&nbsp;to&nbsp;store&nbsp;data.&nbsp;**key**&nbsp;is&nbsp;of&nbsp;the&nbsp;string&nbsp;type,&nbsp;and&nbsp;**value**&nbsp;can&nbsp;be&nbsp;of&nbsp;the&nbsp;number,&nbsp;string,&nbsp;boolean,&nbsp;array&nbsp;type&nbsp;or&nbsp;another&nbsp;**KVObject**. |
| key | number \| string \| boolean \| Array \| KVObject | **KVObject** uses **key** and **value** to store data. **key** is of the string type, and **value** can be of the number, string, boolean, array type or another **KVObject**. |
- Example
......@@ -134,21 +134,21 @@ Listens for events of the request type and returns the requested data, or listen
- Parameters
| Name | Type | Mandatory | Description |
| -------- | -------- | -------- | -------- |
| eventType | string | Yes | Type&nbsp;of&nbsp;the&nbsp;event&nbsp;to&nbsp;listen&nbsp;for.&nbsp;The&nbsp;options&nbsp;are&nbsp;**"push"**&nbsp;and&nbsp;**"request"**.<br/>**"push"**:&nbsp;The&nbsp;component&nbsp;provider&nbsp;pushes&nbsp;data&nbsp;to&nbsp;the&nbsp;component&nbsp;consumer.<br/>**"request"**:&nbsp;The&nbsp;component&nbsp;consumer&nbsp;proactively&nbsp;requests&nbsp;data&nbsp;from&nbsp;the&nbsp;component&nbsp;provider. |
| callback | OnPushEventCallback&nbsp;\|&nbsp;OnRequestEventCallback | Yes | Callback&nbsp;used&nbsp;to&nbsp;return&nbsp;the&nbsp;result.&nbsp;For&nbsp;details,&nbsp;see&nbsp;description of callback. |
| eventType | string | Yes | Type of the event to listen for. The options are **"push"** and **"request"**.<br/>**"push"**: The component provider pushes data to the component consumer.<br/>**"request"**: The component consumer proactively requests data from the component provider. |
| callback | OnPushEventCallback \| OnRequestEventCallback | Yes | Callback used to return the result. For details, see description of callback. |
- Description of callback
| Name | Type | Description |
| -------- | -------- | -------- |
| OnRequestEventCallback | (source:&nbsp;Want,<br/>name:&nbsp;string,<br/>data:&nbsp;KVObject&nbsp;)&nbsp;=>RequestEventResult | Callback&nbsp;for&nbsp;the&nbsp;data&nbsp;request&nbsp;event.<br/>**source**:&nbsp;ability&nbsp;information&nbsp;of&nbsp;the&nbsp;component&nbsp;requester.<br/>**name**:&nbsp;name&nbsp;of&nbsp;the&nbsp;requested&nbsp;component.<br/>**data**:&nbsp;additional&nbsp;data.<br/>Return&nbsp;value:&nbsp;request&nbsp;data&nbsp;and&nbsp;result. |
| OnPushEventCallback | (source:&nbsp;Want,<br/>template:&nbsp;PluginComponentTemplate,<br/>data:&nbsp;KVObject,<br/>extraData:&nbsp;KVObject<br/>)&nbsp;=&gt;&nbsp;void | Callback&nbsp;used&nbsp;to&nbsp;receive&nbsp;the&nbsp;data&nbsp;pushed&nbsp;by&nbsp;the&nbsp;component&nbsp;provider.<br/>**source**:&nbsp;ability&nbsp;information&nbsp;of&nbsp;the&nbsp;component&nbsp;provider.<br/>**template**:&nbsp;component&nbsp;template.<br/>**data**:&nbsp;component&nbsp;update&nbsp;data.<br/>**extraData**:&nbsp;additional&nbsp;data. |
| OnRequestEventCallback | (source: Want,<br/>name: string,<br/>data: KVObject ) =>RequestEventResult | Callback for the data request event.<br/>**source**: ability information of the component requester.<br/>**name**: name of the requested component.<br/>**data**: additional data.<br/>Return value: request data and result. |
| OnPushEventCallback | (source: Want,<br/>template: PluginComponentTemplate,<br/>data: KVObject,<br/>extraData: KVObject<br/>) =&gt; void | Callback used to receive the data pushed by the component provider.<br/>**source**: ability information of the component provider.<br/>**template**: component template.<br/>**data**: component update data.<br/>**extraData**: additional data. |
- Description of RequestEventResult
| Name | Type | Description |
| -------- | -------- | -------- |
| template | string | Component&nbsp;name. |
| data | KVObject | Component&nbsp;data. |
| extraData | KVObject | Additional&nbsp;data. |
| template | string | Component name. |
| data | KVObject | Component data. |
| extraData | KVObject | Additional data. |
- Example
For details, see [APIs Called by Component Consumers](#apis-called-by-component-consumers).
......
# QRCode
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
......@@ -23,16 +23,16 @@ None
QRCode(value: string)
- Parameters
| Name | Type | Mandatory | Default&nbsp;Value | Description |
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| value | string | Yes | - | QR&nbsp;code&nbsp;content&nbsp;string. |
| value | string | Yes | - | QR code content string. |
## Attributes
| Name | Type | Default&nbsp;Value | Description |
| Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- |
| color | Color | Black | QR&nbsp;code&nbsp;color. |
| color | Color | Black | QR code color. |
## Events
......
# Rating
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
......@@ -23,26 +23,26 @@ None
Rating(options?: { rating: number, indicator?: boolean })
- Parameters
| Name | Type | Mandatory | Default&nbsp;Value | Description |
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| rating | number | Yes | 0 | Value&nbsp;to&nbsp;rate. |
| indicator | boolean | No | false | Used&nbsp;only&nbsp;as&nbsp;an&nbsp;indicator&nbsp;and&nbsp;cannot&nbsp;be&nbsp;operated. |
| rating | number | Yes | 0 | Value to rate. |
| indicator | boolean | No | false | Used only as an indicator and cannot be operated. |
## Attributes
| Name | Type | Default&nbsp;Value | Description |
| Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- |
| stars | number | 5 | Total&nbsp;number&nbsp;of&nbsp;stars. |
| stepSize | number | 0.5 | Step&nbsp;of&nbsp;an&nbsp;operation. |
| starStyle | {<br/>backgroundUri:&nbsp;string,<br/>foregroundUri:&nbsp;string,<br/>secondaryUri?:&nbsp;string<br/>} | - | **backgroundSrc**:&nbsp;image&nbsp;link&nbsp;of&nbsp;the&nbsp;unselected&nbsp;star.&nbsp;You&nbsp;can&nbsp;customize&nbsp;the&nbsp;image&nbsp;or&nbsp;use&nbsp;the&nbsp;default&nbsp;image.&nbsp;Only&nbsp;local&nbsp;images&nbsp;are&nbsp;supported.<br/>**foregroundSrc**:&nbsp;image&nbsp;path&nbsp;of&nbsp;the&nbsp;selected&nbsp;star.&nbsp;You&nbsp;can&nbsp;customize&nbsp;the&nbsp;image&nbsp;or&nbsp;use&nbsp;the&nbsp;default&nbsp;image.&nbsp;Only&nbsp;local&nbsp;images&nbsp;are&nbsp;supported.<br/>**secondarySrc**:&nbsp;image&nbsp;path&nbsp;of&nbsp;the&nbsp;partially&nbsp;selected&nbsp;star.&nbsp;You&nbsp;can&nbsp;customize&nbsp;the&nbsp;image&nbsp;or&nbsp;use&nbsp;the&nbsp;default&nbsp;image.&nbsp;Only&nbsp;local&nbsp;images&nbsp;are&nbsp;supported. |
| stars | number | 5 | Total number of stars. |
| stepSize | number | 0.5 | Step of an operation. |
| starStyle | {<br/>backgroundUri: string,<br/>foregroundUri: string,<br/>secondaryUri?: string<br/>} | - | **backgroundSrc**: image link of the unselected star. You can customize the image or use the default image. Only local images are supported.<br/>**foregroundSrc**: image path of the selected star. You can customize the image or use the default image. Only local images are supported.<br/>**secondarySrc**: image path of the partially selected star. You can customize the image or use the default image. Only local images are supported. |
## Events
| Name | Description |
| -------- | -------- |
| onChange(callback:(value:&nbsp;number)&nbsp;=&gt;&nbsp;void) | Triggered&nbsp;when&nbsp;the&nbsp;rating&nbsp;value&nbsp;changes. |
| onChange(callback:(value: number) =&gt; void) | Triggered when the rating value changes. |
## Example
......
......@@ -53,17 +53,16 @@ RichText\(content:string\)
@Entry
@Component
struct RichTextExample {
@State data: string =' <h1 style='text-align: center;'>h1 heading</h1>
<h1 style='text-align: center;'><i>h1 italic</i></h1>
<h1 style='text-align: center;'><u>h1 underlined</u></h1>
<h2 style='text-align: center;'>h2 heading</h2>
<h3 style='text-align: center;'>h3 heading</h3>
<p style='text-align: center;'>Regular paragraph</p> <hr/>
<div style='width: 500px;height: 500px;border: 1px solid;margin: 0auto;'>
<p style='font-size: 35px;text-align: center;font-weight: bold; color: rgb(24,78,228)'>Font size: 35px; line height: 45px</p>
<p style='background-color: #e5e5e5;line-height: 45px;font-size: 35px;text-indent: 2em;'>
This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.
This is a paragraph.</p></div>'
@State data: string = "<h1 style='text-align: center;'>h1 heading</h1>" +
"<h1 style='text-align: center;'><i>h1 italic</i></h1>" +
"<h1 style='text-align: center;'><u>h1 underlined</u></h1>" +
"<h2 style='text-align: center;'>h2 heading</h2>" +
"<h3 style='text-align: center;'>h3 heading</h3>" +
"<p style='text-align: center;'>Regular paragraph</p><hr/>" +
"<div style='width: 500px;height: 500px;border: 1px solid;margin: 0auto;'>" +
"<p style='font-size: 35px;text-align: center;font-weight: bold; color: rgb(24,78,228)'>Font size: 35px; line height: 45px</p>" +
"<p style='background-color: #e5e5e5;line-height: 45px;font-size: 35px;text-indent: 2em;'>" +
"<p>This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.</p>"
build() {
Flex({direction: FlexDirection.Column,alignItems: ItemAlign.Center,
......
# ScrollBar
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
......@@ -23,13 +23,13 @@ This component can contain a single child component.
ScrollBar(value: ScrollBarOption)
- ScrollBarOption parameters
| Name | Type | Mandatory | Default&nbsp;Value | Description |
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| scroller | [Scroller](ts-container-scroll.md#scroller) | Yes | - | Scroller,&nbsp;which&nbsp;can&nbsp;be&nbsp;bound&nbsp;to&nbsp;and&nbsp;control&nbsp;scrollable&nbsp;components. |
| direction | ScrollBarDirection | No | ScrollBarDirection.Vertical | Scrollbar&nbsp;direction&nbsp;in&nbsp;which&nbsp;scrollable&nbsp;components&nbsp;scroll. |
| state | BarState | No | BarState.Auto | Scrollbar&nbsp;state. |
| scroller | [Scroller](ts-container-scroll.md#scroller) | Yes | - | Scroller, which can be bound to and control scrollable components. |
| direction | ScrollBarDirection | No | ScrollBarDirection.Vertical | Scrollbar direction in which scrollable components scroll. |
| state | BarState | No | BarState.Auto | Scrollbar state. |
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> The **&lt;ScrollBar&gt;** component defines the behavior style of the scrollable area, and its subnodes define the behavior style of the scrollbar.
>
> This component is bound to a scrollable component through **scroller**, and can be used to scroll the scrollable component only when their directions are the same. The **&lt;ScrollBar&gt;** component can be bound to only one scrollable component, and vice versa.
......@@ -37,15 +37,15 @@ ScrollBar(value: ScrollBarOption)
- ScrollBarDirection enums
| Name | Description |
| -------- | -------- |
| Vertical | Vertical&nbsp;scrollbar. |
| Horizontal | Horizontal&nbsp;scrollbar. |
| Vertical | Vertical scrollbar. |
| Horizontal | Horizontal scrollbar. |
- BarState enums
| Name | Description |
| -------- | -------- |
| On | Always&nbsp;display. |
| On | Always display. |
| Off | Hide. |
| Auto | Display&nbsp;on&nbsp;demand&nbsp;(displays&nbsp;when&nbsp;the&nbsp;screen&nbsp;is&nbsp;touched&nbsp;and&nbsp;disappears&nbsp;after&nbsp;2s&nbsp;of&nbsp;inactivity). |
| Auto | Display on demand (displays when the screen is touched and disappears after 2s of inactivity). |
## Example
......
# Slider
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
......@@ -23,34 +23,34 @@ None
Slider(value:{value?: number, min?: number, max?: number, step?: number, style?: SliderStyle, direction?: Axis})
- Parameters
| Name | Type | Mandatory | Default&nbsp;Value | Description |
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| value | number | No | 0 | Current&nbsp;progress. |
| min | number | No | 0 | Minimum&nbsp;value. |
| max | number | No | 100 | Maximum&nbsp;value. |
| step | number | No | 1 | Step&nbsp;of&nbsp;the&nbsp;slider.&nbsp;When&nbsp;the&nbsp;corresponding&nbsp;step&nbsp;is&nbsp;set,&nbsp;the&nbsp;slider&nbsp;slides&nbsp;intermittently. |
| style | SliderStyle | No | SliderStyle.OutSet | Style&nbsp;of&nbsp;the&nbsp;slider. |
| direction<sup>8+</sup> | [Axis](../reference/arkui-ts/ts-appendix-enums.md#axis-enums) | No | Axis.Horizontal | Whether&nbsp;the&nbsp;slider&nbsp;moves&nbsp;horizontally&nbsp;or&nbsp;vertically. |
| reverse<sup>8+</sup> | boolean | No | false | Whether&nbsp;the&nbsp;slider&nbsp;values&nbsp;are&nbsp;reversed. |
| value | number | No | 0 | Current progress. |
| min | number | No | 0 | Minimum value. |
| max | number | No | 100 | Maximum value. |
| step | number | No | 1 | Step of the slider. When the corresponding step is set, the slider slides intermittently. |
| style | SliderStyle | No | SliderStyle.OutSet | Style of the slider. |
| direction<sup>8+</sup> | [Axis](../reference/arkui-ts/ts-appendix-enums.md#axis-enums) | No | Axis.Horizontal | Whether the slider moves horizontally or vertically. |
| reverse<sup>8+</sup> | boolean | No | false | Whether the slider values are reversed. |
- SliderStyle enums
| Name | Description |
| -------- | -------- |
| OutSet | The&nbsp;slider&nbsp;is&nbsp;on&nbsp;the&nbsp;slider&nbsp;rail. |
| InSet | The&nbsp;slider&nbsp;is&nbsp;in&nbsp;the&nbsp;slider&nbsp;rail. |
| OutSet | The slider is on the slider rail. |
| InSet | The slider is in the slider rail. |
## Attributes
Touch target configuration is not supported.
| Name | Type | Default&nbsp;Value | Description |
| Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- |
| blockColor | Color | - | Color&nbsp;of&nbsp;the&nbsp;slider. |
| trackColor | Color | - | Background&nbsp;color&nbsp;of&nbsp;the&nbsp;slider. |
| selectedColor | Color | - | Color&nbsp;of&nbsp;the&nbsp;slider&nbsp;rail&nbsp;that&nbsp;has&nbsp;been&nbsp;slid. |
| showSteps | boolean | false | Whether&nbsp;to&nbsp;display&nbsp;the&nbsp;current&nbsp;step. |
| showTips | boolean | false | Whether&nbsp;to&nbsp;display&nbsp;a&nbsp;bubble&nbsp;to&nbsp;indicate&nbsp;the&nbsp;percentage&nbsp;when&nbsp;sliding. |
| blockColor | Color | - | Color of the slider. |
| trackColor | Color | - | Background color of the slider. |
| selectedColor | Color | - | Color of the slider rail that has been slid. |
| showSteps | boolean | false | Whether to display the current step. |
| showTips | boolean | false | Whether to display a bubble to indicate the percentage when sliding. |
## Events
......@@ -59,14 +59,14 @@ Among all the universal events, only **OnAppear** and **OnDisAppear** are suppor
| Name | Description |
| -------- | -------- |
| onChange(callback:&nbsp;(value:&nbsp;number,&nbsp;mode: SliderChangeMode)&nbsp;=&gt;&nbsp;void) | Callback&nbsp;invoked&nbsp;when&nbsp;the&nbsp;slider&nbsp;slides.<br/>**value**:&nbsp;current&nbsp;progress.<br/>**mode**:&nbsp;dragging&nbsp;state. |
| onChange(callback: (value: number, mode: SliderChangeMode) =&gt; void) | Callback invoked when the slider slides.<br/>**value**: current progress.<br/>**mode**: dragging state. |
- SliderChangeMode enums
| Name | Description |
| -------- | -------- |
| Begin | The&nbsp;user&nbsp;starts&nbsp;to&nbsp;drag&nbsp;the&nbsp;slider. |
| Moving | The&nbsp;user&nbsp;is&nbsp;dragging&nbsp;the&nbsp;slider. |
| End | The&nbsp;user&nbsp;stops&nbsp;dragging&nbsp;the&nbsp;slider. |
| Begin | The user starts to drag the slider. |
| Moving | The user is dragging the slider. |
| End | The user stops dragging the slider. |
## Example
......
# Span
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
......@@ -23,26 +23,26 @@ None
Span(content: string)
- Parameters
| Name | Type | Mandatory | Default&nbsp;Value | Description |
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| content | string | Yes | - | Text&nbsp;content. |
| content | string | Yes | - | Text content. |
## Attributes
In addition to the text style attributes, the attributes below are supported.
| Name | Type | Default&nbsp;Value | Description |
| Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- |
| decoration | {<br/>type:&nbsp;[TextDecorationType](ts-appendix-enums.md#textdecorationtype-enums),<br/>color?:&nbsp;Color<br/>} | {<br/>type:&nbsp;TextDecorationType.None<br/>} | Style&nbsp;and&nbsp;color&nbsp;of&nbsp;the&nbsp;text&nbsp;decorative&nbsp;line. |
| textCase | [TextCase](ts-appendix-enums.md#textcase-enums) | Normal | Text&nbsp;case. |
| decoration | {<br/>type: [TextDecorationType](ts-appendix-enums.md#textdecorationtype-enums),<br/>color?: Color<br/>} | {<br/>type: TextDecorationType.None<br/>} | Style and color of the text decorative line. |
| textCase | [TextCase](ts-appendix-enums.md#textcase-enums) | Normal | Text case. |
## Events
Among all the universal events, only the click event is supported.
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> As the **&lt;Span&gt;** component does not have size information, the **target** attribute of the **ClickEvent** object returned by the click event is invalid.
......
# Stepper
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
......@@ -24,9 +24,9 @@ Stepper(value?: { index?: number })
- Parameters
| Name | Type | Mandatory | Default&nbsp;Value | Description |
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| index | number | No | 0 | Index&nbsp;of&nbsp;the&nbsp;**&lt;StepperItem&gt;**&nbsp;that&nbsp;is&nbsp;currently&nbsp;displayed. |
| index | number | No | 0 | Index of the **&lt;StepperItem&gt;** that is currently displayed. |
## Attributes
......@@ -38,9 +38,9 @@ None
| Name | Description |
| -------- | -------- |
| onFinish(callback:&nbsp;()&nbsp;=&gt;&nbsp;void) | Triggered&nbsp;when&nbsp;the&nbsp;**nextLabel**&nbsp;of&nbsp;the&nbsp;last&nbsp;**&lt;StepperItem&gt;**&nbsp;in&nbsp;the&nbsp;**&lt;Stepper&gt;**&nbsp;is&nbsp;clicked. |
| onSkip(callback:&nbsp;()&nbsp;=&gt;&nbsp;void) | Triggered&nbsp;when&nbsp;the&nbsp;current&nbsp;**&lt;StepperItem&gt;**&nbsp;is&nbsp;**ItemState.Skip**&nbsp;and&nbsp;the&nbsp;**nextLabel**&nbsp;is&nbsp;clicked. |
| onChange(callback:&nbsp;(prevIndex?:&nbsp;number,&nbsp;index?:&nbsp;number)&nbsp;=&gt;&nbsp;void) | Triggered&nbsp;when&nbsp;the&nbsp;text&nbsp;button&nbsp;on&nbsp;the&nbsp;left&nbsp;or&nbsp;right&nbsp;is&nbsp;clicked&nbsp;to&nbsp;switch&nbsp;between&nbsp;steps.<br/>-&nbsp;**prevIndex**:&nbsp;index&nbsp;of&nbsp;the&nbsp;step&nbsp;page&nbsp;before&nbsp;the&nbsp;switching.<br/>-&nbsp;**index**:&nbsp;index&nbsp;of&nbsp;the&nbsp;step&nbsp;page&nbsp;after&nbsp;the&nbsp;switching,&nbsp;that&nbsp;is,&nbsp;index&nbsp;of&nbsp;the&nbsp;previous&nbsp;or&nbsp;next&nbsp;page. |
| onFinish(callback: () =&gt; void) | Triggered when the **nextLabel** of the last **&lt;StepperItem&gt;** in the **&lt;Stepper&gt;** is clicked. |
| onSkip(callback: () =&gt; void) | Triggered when the current **&lt;StepperItem&gt;** is **ItemState.Skip** and the **nextLabel** is clicked. |
| onChange(callback: (prevIndex?: number, index?: number) =&gt; void) | Triggered when the text button on the left or right is clicked to switch between steps.<br/>- **prevIndex**: index of the step page before the switching.<br/>- **index**: index of the step page after the switching, that is, index of the previous or next page. |
## Example
......
# StepperItem
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
......@@ -25,19 +25,19 @@ StepperItem()
## Attributes
| Name | Type | Default&nbsp;Value | Description |
| Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- |
| prevLabel | string | - | When&nbsp;the&nbsp;**&lt;Stepper&gt;**&nbsp;contains&nbsp;more&nbsp;than&nbsp;one&nbsp;page,&nbsp;the&nbsp;default&nbsp;value&nbsp;for&nbsp;all&nbsp;pages&nbsp;except&nbsp;the&nbsp;first&nbsp;page&nbsp;is&nbsp;**Back**. |
| nextLabel | string | - | When&nbsp;the&nbsp;stepper&nbsp;contains&nbsp;more&nbsp;than&nbsp;one&nbsp;page,&nbsp;the&nbsp;default&nbsp;value&nbsp;for&nbsp;the&nbsp;last&nbsp;page&nbsp;is&nbsp;**Start**,&nbsp;and&nbsp;the&nbsp;default&nbsp;value&nbsp;for&nbsp;other&nbsp;pages&nbsp;is&nbsp;**Next**. |
| status | ItemState | ItemState.Normal | Status&nbsp;of&nbsp;the&nbsp;**&lt;StepperItem&gt;**. |
| prevLabel | string | - | When the **&lt;Stepper&gt;** contains more than one page, the default value for all pages except the first page is **Back**. |
| nextLabel | string | - | When the stepper contains more than one page, the default value for the last page is **Start**, and the default value for other pages is **Next**. |
| status | ItemState | ItemState.Normal | Status of the **&lt;StepperItem&gt;**. |
- ItemState enums
| Name | Description |
| -------- | -------- |
| Normal | The&nbsp;right&nbsp;button&nbsp;is&nbsp;clickable&nbsp;and&nbsp;can&nbsp;navigate&nbsp;users&nbsp;to&nbsp;the&nbsp;next&nbsp;**&lt;StepperItem&gt;**&nbsp;when&nbsp;it&nbsp;is&nbsp;clicked.. |
| Disabled | The&nbsp;right&nbsp;button&nbsp;is&nbsp;grayed&nbsp;out&nbsp;and&nbsp;unavailable. |
| Waiting | The&nbsp;right&nbsp;button&nbsp;is&nbsp;not&nbsp;displayed,&nbsp;and&nbsp;a&nbsp;progress&nbsp;bar&nbsp;is&nbsp;displayed&nbsp;instead. |
| Skip | The&nbsp;current&nbsp;**&lt;StepperItem&gt;**&nbsp;is&nbsp;skipped,&nbsp;and&nbsp;the&nbsp;next&nbsp;**&lt;StepperItem&gt;**&nbsp;is&nbsp;displayed. |
| Normal | The right button is clickable and can navigate users to the next **&lt;StepperItem&gt;** when it is clicked.. |
| Disabled | The right button is grayed out and unavailable. |
| Waiting | The right button is not displayed, and a progress bar is displayed instead. |
| Skip | The current **&lt;StepperItem&gt;** is skipped, and the next **&lt;StepperItem&gt;** is displayed. |
## Example
......
# Text
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
......@@ -15,7 +15,7 @@ None
## Child Components
The **&lt;Text&gt;** component can contain the child component [<Span>](../reference/arkui-ts/ts-basic-components-span.md).
The **&lt;Text&gt;** component can contain the child component [<Span>](ts-basic-components-span.md).
## APIs
......@@ -23,53 +23,53 @@ The **&lt;Text&gt;** component can contain the child component [<Span>](../refer
Text(content?: string)
- Parameters
| Name | Type | Mandatory | Default&nbsp;Value | Description |
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| content | string | No | '' | Text&nbsp;content,&nbsp;which&nbsp;is&nbsp;the&nbsp;content&nbsp;of&nbsp;the&nbsp;child&nbsp;component&nbsp;**&lt;Span&gt;**.&nbsp;This&nbsp;parameter&nbsp;does&nbsp;not&nbsp;take&nbsp;effect&nbsp;when&nbsp;the&nbsp;child&nbsp;component&nbsp;**&lt;Span&gt;**&nbsp;is&nbsp;contained. |
| content | string | No | '' | Text content, which is the content of the child component **&lt;Span&gt;**. This parameter does not take effect when the child component **&lt;Span&gt;** is contained. |
## Attributes
| Name | Type | Default&nbsp;Value | Description |
| Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- |
| textAlign | TextAlign | TextAlign.Start | Text&nbsp;alignment&nbsp;mode&nbsp;of&nbsp;multiple&nbsp;lines&nbsp;of&nbsp;text. |
| textOverflow | {overflow:&nbsp;TextOverflow} | {overflow:&nbsp;TextOverflow.Clip} | Display&nbsp;mode&nbsp;when&nbsp;the&nbsp;text&nbsp;is&nbsp;too&nbsp;long. |
| maxLines | number | Infinity | Maximum&nbsp;number&nbsp;of&nbsp;lines&nbsp;in&nbsp;the&nbsp;text. |
| lineHeight | Length | - | Text&nbsp;line&nbsp;height.&nbsp;If&nbsp;the&nbsp;value&nbsp;is&nbsp;less&nbsp;than&nbsp;or&nbsp;equal&nbsp;to&nbsp;**0**,&nbsp;the&nbsp;line&nbsp;height&nbsp;is&nbsp;not&nbsp;limited&nbsp;and&nbsp;the&nbsp;font&nbsp;size&nbsp;is&nbsp;adaptive.&nbsp;If&nbsp;the&nbsp;value&nbsp;of&nbsp;the&nbsp;number&nbsp;type,&nbsp;the&nbsp;unit&nbsp;fp&nbsp;is&nbsp;used. |
| decoration | {<br/>type:&nbsp;TextDecorationType,<br/>color?:&nbsp;Color<br/>} | {<br/>type:&nbsp;TextDecorationType.None,<br/>color:&nbsp;Color.Black<br/>} | Style&nbsp;and&nbsp;color&nbsp;of&nbsp;the&nbsp;text&nbsp;decorative&nbsp;line. |
| baselineOffset | Length | - | Offset&nbsp;of&nbsp;the&nbsp;text&nbsp;baseline. |
| textCase | TextCase | TextCase.Normal | Text&nbsp;case. |
| textAlign | TextAlign | TextAlign.Start | Text alignment mode of multiple lines of text. |
| textOverflow | {overflow: TextOverflow} | {overflow: TextOverflow.Clip} | Display mode when the text is too long. |
| maxLines | number | Infinity | Maximum number of lines in the text. |
| lineHeight | Length | - | Text line height. If the value is less than or equal to **0**, the line height is not limited and the font size is adaptive. If the value of the number type, the unit fp is used. |
| decoration | {<br/>type: TextDecorationType,<br/>color?: Color<br/>} | {<br/>type: TextDecorationType.None,<br/>color: Color.Black<br/>} | Style and color of the text decorative line. |
| baselineOffset | Length | - | Offset of the text baseline. |
| textCase | TextCase | TextCase.Normal | Text case. |
- TextAlign enums
| Name | Description |
| Name | Description |
| -------- | -------- |
| Center | The&nbsp;text&nbsp;is&nbsp;center-aligned. |
| Start | The&nbsp;text&nbsp;is&nbsp;aligned&nbsp;with&nbsp;the&nbsp;direction&nbsp;in&nbsp;which&nbsp;the&nbsp;text&nbsp;is&nbsp;written. |
| End | The&nbsp;text&nbsp;is&nbsp;aligned&nbsp;with&nbsp;the&nbsp;opposite&nbsp;direction&nbsp;in&nbsp;which&nbsp;the&nbsp;text&nbsp;is&nbsp;written. |
| Center | The text is center-aligned. |
| Start | The text is aligned with the direction in which the text is written. |
| End | The text is aligned with the opposite direction in which the text is written. |
- TextOverflow enums
| Name | Description |
| Name | Description |
| -------- | -------- |
| Clip | Extra&nbsp;text&nbsp;is&nbsp;truncated. |
| Ellipsis | The&nbsp;ellipsis&nbsp;(...)&nbsp;is&nbsp;used&nbsp;for&nbsp;extra-long&nbsp;text. |
| None | No&nbsp;truncation&nbsp;or&nbsp;ellipsis&nbsp;is&nbsp;used&nbsp;for&nbsp;extra-long&nbsp;text. |
| Clip | Extra text is truncated. |
| Ellipsis | The ellipsis (...) is used for extra-long text. |
| None | No truncation or ellipsis is used for extra-long text. |
- TextDecorationType enums
| Name | Description |
| Name | Description |
| -------- | -------- |
| Underline | An&nbsp;underline&nbsp;is&nbsp;used. |
| LineThrough | A&nbsp;strikethrough&nbsp;is&nbsp;used. |
| Overline | An&nbsp;overline&nbsp;is&nbsp;used. |
| None | No&nbsp;decorative&nbsp;line&nbsp;is&nbsp;used. |
| Underline | An underline is used. |
| LineThrough | A strikethrough is used. |
| Overline | An overline is used. |
| None | No decorative line is used. |
- TextCase enums
| Name | Description |
| Name | Description |
| -------- | -------- |
| Normal | The&nbsp;original&nbsp;case&nbsp;of&nbsp;the&nbsp;text&nbsp;is&nbsp;retained. |
| LowerCase | All&nbsp;letters&nbsp;in&nbsp;the&nbsp;text&nbsp;are&nbsp;in&nbsp;lowercase. |
| UpperCase | All&nbsp;letters&nbsp;in&nbsp;the&nbsp;text&nbsp;are&nbsp;in&nbsp;uppercase. |
| Normal | The original case of the text is retained. |
| LowerCase | All letters in the text are in lowercase. |
| UpperCase | All letters in the text are in uppercase. |
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> The **&lt;Text&gt;** component cannot contain both the text and the child component **&lt;Span&gt;**. If both of them exist, only the content in **&lt;Span&gt;** is displayed.
......
# TextArea
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
......@@ -13,9 +13,9 @@ The **&lt;TextArea&gt;** component provides multi-line text input.
None
## Child Component
## Child Components
N/A
None
## APIs
......@@ -23,49 +23,49 @@ N/A
TextArea(value?:{placeholder?: string controller?: TextAreaController})
- Parameters
| Name | Type | Mandatory | Default&nbsp;Value | Description |
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| placeholder | string | No | - | Text&nbsp;displayed&nbsp;when&nbsp;there&nbsp;is&nbsp;no&nbsp;input. |
| controller<sup>8+</sup> | [TextAreaController](#textareacontroller8) | No | - | Text&nbsp;area&nbsp;controller. |
| placeholder | string | No | - | Text displayed when there is no input. |
| controller<sup>8+</sup> | [TextAreaController](#textareacontroller8) | No | - | Text area controller. |
## Attributes
In addition to [universal attributes](ts-universal-attributes.md), the following attributes are supported.
| Name | Type | Default&nbsp;Value | Description |
| Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- |
| placeholderColor | Color | - | Placeholder&nbsp;text&nbsp;color. |
| placeholderFont | {<br/>size?:&nbsp;number,<br/>weight?:number&nbsp;\|&nbsp;[FontWeight](ts-universal-attributes-text-style.md),<br/>family?:&nbsp;string,<br/>style?:&nbsp;[FontStyle](ts-universal-attributes-text-style.md)<br/>} | - | Placeholder&nbsp;text&nbsp;style.<br/>-&nbsp;**size**:&nbsp;font&nbsp;size.&nbsp;If&nbsp;the&nbsp;value&nbsp;is&nbsp;of&nbsp;the&nbsp;number&nbsp;type,&nbsp;the&nbsp;unit&nbsp;fp&nbsp;is&nbsp;used.<br/>-&nbsp;**weight**:&nbsp;font&nbsp;weight.&nbsp;For&nbsp;the&nbsp;number&nbsp;type,&nbsp;the&nbsp;value&nbsp;ranges&nbsp;from&nbsp;100&nbsp;to&nbsp;900,&nbsp;at&nbsp;an&nbsp;interval&nbsp;of&nbsp;100.&nbsp;The&nbsp;default&nbsp;value&nbsp;is&nbsp;**400**.&nbsp;A&nbsp;larger&nbsp;value&nbsp;indicates&nbsp;a&nbsp;larger&nbsp;font&nbsp;weight.<br/>-&nbsp;**family**:&nbsp;font&nbsp;family.&nbsp;Use&nbsp;commas&nbsp;(,)&nbsp;to&nbsp;separate&nbsp;multiple&nbsp;fonts,&nbsp;for&nbsp;example,&nbsp;**'Arial,&nbsp;sans-serif'**.&nbsp;The&nbsp;priority&nbsp;of&nbsp;the&nbsp;fonts&nbsp;is&nbsp;the&nbsp;sequence&nbsp;in&nbsp;which&nbsp;they&nbsp;are&nbsp;placed.<br/>-&nbsp;**style**:&nbsp;font&nbsp;style. |
| textAlign | TextAlign | Start | Sets&nbsp;the&nbsp;text&nbsp;horizontal&nbsp;alignment&nbsp;mode. |
| caretColor | Color | - | Sets&nbsp;the&nbsp;color&nbsp;of&nbsp;the&nbsp;cursor&nbsp;in&nbsp;the&nbsp;text&nbsp;box. |
| inputFilter<sup>8+</sup> | {<br/>value:&nbsp;[ResourceStr](../../ui/ts-types.md),<br/>error?:&nbsp;(value:&nbsp;string)<br/>} | - | Regular&nbsp;expression&nbsp;for&nbsp;input&nbsp;filtering.&nbsp;Only&nbsp;inputs&nbsp;that&nbsp;comply&nbsp;with&nbsp;the&nbsp;regular&nbsp;expression&nbsp;can&nbsp;be&nbsp;displayed.&nbsp;Other&nbsp;inputs&nbsp;are&nbsp;ignored.&nbsp;The&nbsp;specified&nbsp;regular&nbsp;expression&nbsp;can&nbsp;match&nbsp;single&nbsp;characters,&nbsp;but&nbsp;not&nbsp;strings.&nbsp;Example:&nbsp;^(?&nbsp;=.\*\d)(?&nbsp;=.\*[a-z])(?&nbsp;=.\*[A-Z]).{8,10}$.&nbsp;Strong&nbsp;passwords&nbsp;containing&nbsp;8&nbsp;to&nbsp;10&nbsp;characters&nbsp;cannot&nbsp;be&nbsp;filtered.<br/>-&nbsp;**value**:&nbsp;indicates&nbsp;the&nbsp;regular&nbsp;expression&nbsp;to&nbsp;set.<br/>-&nbsp;**error**:&nbsp;returns&nbsp;the&nbsp;ignored&nbsp;content&nbsp;when&nbsp;regular&nbsp;expression&nbsp;matching&nbsp;fails. |
| placeholderColor | Color | - | Placeholder text color. |
| placeholderFont | {<br/>size?: number,<br/>weight?:number \| [FontWeight](ts-universal-attributes-text-style.md),<br/>family?: string,<br/>style?: [FontStyle](ts-universal-attributes-text-style.md)<br/>} | - | Placeholder text style.<br/>- **size**: font size. If the value is of the number type, the unit fp is used.<br/>- **weight**: font weight. For the number type, the value ranges from 100 to 900, at an interval of 100. The default value is **400**. A larger value indicates a larger font weight.<br/>- **family**: font family. Use commas (,) to separate multiple fonts, for example, **'Arial, sans-serif'**. The priority of the fonts is the sequence in which they are placed.<br/>- **style**: font style. |
| textAlign | TextAlign | Start | Sets the text horizontal alignment mode. |
| caretColor | Color | - | Sets the color of the cursor in the text box. |
| inputFilter<sup>8+</sup> | {<br/>value: [ResourceStr](../../ui/ts-types.md),<br/>error?: (value: string)<br/>} | - | Regular expression for input filtering. Only inputs that comply with the regular expression can be displayed. Other inputs are ignored. The specified regular expression can match single characters, but not strings. Example: ^(? =.\*\d)(? =.\*[a-z])(? =.\*[A-Z]).{8,10}$. Strong passwords containing 8 to 10 characters cannot be filtered.<br/>- **value**: indicates the regular expression to set.<br/>- **error**: returns the ignored content when regular expression matching fails. |
- TextAlign enums
| Name | Description |
| Name | Description |
| -------- | -------- |
| Start | Aligns&nbsp;the&nbsp;header&nbsp;horizontally. |
| Center | Horizontal&nbsp;center&nbsp;alignment. |
| End | Align&nbsp;the&nbsp;tail&nbsp;horizontally. |
| Start | Aligns the header horizontally. |
| Center | Horizontal center alignment. |
| End | Align the tail horizontally. |
### TextAreaController<sup>8+</sup>
Defines the controller for controlling the **&lt;TextArea&gt;** component.
| Name | Description |
| Name | Description |
| -------- | -------- |
| caretPosition(value:&nbsp;number):&nbsp;void | Position&nbsp;of&nbsp;the&nbsp;input&nbsp;cursor.<br/>**value**:&nbsp;indicates&nbsp;the&nbsp;length&nbsp;from&nbsp;the&nbsp;start&nbsp;of&nbsp;the&nbsp;string&nbsp;to&nbsp;the&nbsp;position&nbsp;where&nbsp;the&nbsp;input&nbsp;cursor&nbsp;is&nbsp;located. |
| caretPosition(value: number): void | Position of the input cursor.<br/>**value**: indicates the length from the start of the string to the position where the input cursor is located. |
## Events
| Name | Description |
| Name | Description |
| -------- | -------- |
| onChange(callback:&nbsp;(value:&nbsp;string)&nbsp;=&gt;&nbsp;void) | Triggered&nbsp;when&nbsp;the&nbsp;input&nbsp;changes. |
| onCopy<sup>8+</sup>(callback:(value:&nbsp;string)&nbsp;=&gt;&nbsp;void) | Triggered&nbsp;when&nbsp;the&nbsp;copy&nbsp;button&nbsp;on&nbsp;the&nbsp;pasteboard,&nbsp;which&nbsp;displays&nbsp;when&nbsp;the&nbsp;text&nbsp;box&nbsp;is&nbsp;long&nbsp;pressed,&nbsp;is&nbsp;clicked.<br/>**value**:&nbsp;text&nbsp;to&nbsp;be&nbsp;copied. |
| onCut<sup>8+</sup>(callback:(value:&nbsp;string)&nbsp;=&gt;&nbsp;void) | Triggered&nbsp;when&nbsp;the&nbsp;cut&nbsp;button&nbsp;on&nbsp;the&nbsp;pasteboard,&nbsp;which&nbsp;displays&nbsp;when&nbsp;the&nbsp;text&nbsp;box&nbsp;is&nbsp;long&nbsp;pressed,&nbsp;is&nbsp;clicked.<br/>**value**:&nbsp;text&nbsp;to&nbsp;be&nbsp;cut. |
| onPaste<sup>8+</sup>(callback:(value:&nbsp;string)&nbsp;=&gt;&nbsp;void) | Triggered&nbsp;when&nbsp;the&nbsp;paste&nbsp;button&nbsp;on&nbsp;the&nbsp;pasteboard,&nbsp;which&nbsp;displays&nbsp;when&nbsp;the&nbsp;text&nbsp;box&nbsp;is&nbsp;long&nbsp;pressed,&nbsp;is&nbsp;clicked.<br/>**value**:&nbsp;text&nbsp;to&nbsp;be&nbsp;pasted. |
| onChange(callback: (value: string) =&gt; void) | Triggered when the input changes. |
| onCopy<sup>8+</sup>(callback:(value: string) =&gt; void) | Triggered when the copy button on the pasteboard, which displays when the text box is long pressed, is clicked.<br/>**value**: text to be copied. |
| onCut<sup>8+</sup>(callback:(value: string) =&gt; void) | Triggered when the cut button on the pasteboard, which displays when the text box is long pressed, is clicked.<br/>**value**: text to be cut. |
| onPaste<sup>8+</sup>(callback:(value: string) =&gt; void) | Triggered when the paste button on the pasteboard, which displays when the text box is long pressed, is clicked.<br/>**value**: text to be pasted. |
## Example
......
# TextInput
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
......@@ -23,51 +23,51 @@ None
TextInput(value?:{placeholder?: string controller?: TextInputController})
- Parameters
| Name | Type | Mandatory | Default&nbsp;Value | Description |
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| placeholder | string | No | - | Text&nbsp;displayed&nbsp;when&nbsp;there&nbsp;is&nbsp;no&nbsp;input. |
| controller<sup>8+</sup> | [TextInputController](#textinputcontroller8) | No | - | Text&nbsp;input&nbsp;controller. |
| placeholder | string | No | - | Text displayed when there is no input. |
| controller<sup>8+</sup> | [TextInputController](#textinputcontroller8) | No | - | Text input controller. |
## Attributes
In addition to [universal attributes](ts-universal-attributes.md), the following attributes are supported.
| Name | Type | Default&nbsp;Value | Description |
| Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- |
| type | InputType | InputType.Normal | Input&nbsp;box&nbsp;type. |
| placeholderColor | Color | - | Placeholder&nbsp;color. |
| placeholderFont | {<br/>size?:&nbsp;Length,<br/>weight?:&nbsp;number\|[FontWeight](ts-universal-attributes-text-style.md),<br/>family?:&nbsp;string,<br/>style?:&nbsp;[FontStyle](ts-universal-attributes-text-style.md)<br/>} | - | Placeholder&nbsp;text&nbsp;style.<br/>-&nbsp;**size**:&nbsp;font&nbsp;size.&nbsp;If&nbsp;the&nbsp;value&nbsp;is&nbsp;of&nbsp;the&nbsp;number&nbsp;type,&nbsp;the&nbsp;unit&nbsp;fp&nbsp;is&nbsp;used.<br/>-&nbsp;**weight**:&nbsp;font&nbsp;weight.&nbsp;For&nbsp;the&nbsp;number&nbsp;type,&nbsp;the&nbsp;value&nbsp;ranges&nbsp;from&nbsp;100&nbsp;to&nbsp;900,&nbsp;at&nbsp;an&nbsp;interval&nbsp;of&nbsp;100.&nbsp;The&nbsp;default&nbsp;value&nbsp;is&nbsp;**400**.&nbsp;A&nbsp;larger&nbsp;value&nbsp;indicates&nbsp;a&nbsp;larger&nbsp;font&nbsp;weight.<br/>-&nbsp;**family**:&nbsp;font&nbsp;family.&nbsp;Use&nbsp;commas&nbsp;(,)&nbsp;to&nbsp;separate&nbsp;multiple&nbsp;fonts,&nbsp;for&nbsp;example,&nbsp;**'Arial,&nbsp;sans-serif'**.&nbsp;The&nbsp;priority&nbsp;of&nbsp;the&nbsp;fonts&nbsp;is&nbsp;the&nbsp;sequence&nbsp;in&nbsp;which&nbsp;they&nbsp;are&nbsp;placed.<br/>-&nbsp;**style**:&nbsp;font&nbsp;style. |
| enterKeyType | EnterKeyType | EnterKeyType.Done | How&nbsp;the&nbsp;Enter&nbsp;key&nbsp;is&nbsp;labeled. |
| caretColor | Color | - | Color&nbsp;of&nbsp;the&nbsp;caret&nbsp;(also&nbsp;known&nbsp;as&nbsp;the&nbsp;text&nbsp;insertion&nbsp;cursor). |
| maxLength<sup>8+</sup> | number | - | Maximum&nbsp;number&nbsp;of&nbsp;characters&nbsp;in&nbsp;the&nbsp;text&nbsp;input. |
| inputFilter<sup>8+</sup> | {<br/>value:&nbsp;[ResourceStr](../../ui/ts-types.md#resourcestr8),<br/>error?:&nbsp;(value:&nbsp;string)<br/>} | - | Regular&nbsp;expression&nbsp;for&nbsp;input&nbsp;filtering.&nbsp;Only&nbsp;inputs&nbsp;that&nbsp;comply&nbsp;with&nbsp;the&nbsp;regular&nbsp;expression&nbsp;can&nbsp;be&nbsp;displayed.&nbsp;Other&nbsp;inputs&nbsp;are&nbsp;ignored.&nbsp;The&nbsp;specified&nbsp;regular&nbsp;expression&nbsp;can&nbsp;match&nbsp;single&nbsp;characters,&nbsp;but&nbsp;not&nbsp;strings.&nbsp;Example:&nbsp;^(?&nbsp;=.\*\d)(?&nbsp;=.\*[a-z])(?&nbsp;=.\*[A-Z]).{8,10}$.&nbsp;Strong&nbsp;passwords&nbsp;containing&nbsp;8&nbsp;to&nbsp;10&nbsp;characters&nbsp;cannot&nbsp;be&nbsp;filtered.<br/>-&nbsp;**value**:&nbsp;indicates&nbsp;the&nbsp;regular&nbsp;expression&nbsp;to&nbsp;set.<br/>-&nbsp;**error**:&nbsp;returns&nbsp;the&nbsp;ignored&nbsp;content&nbsp;when&nbsp;regular&nbsp;expression&nbsp;matching&nbsp;fails. |
| type | InputType | InputType.Normal | Input box type. |
| placeholderColor | Color | - | Placeholder color. |
| placeholderFont | {<br/>size?: Length,<br/>weight?: number\|[FontWeight](ts-universal-attributes-text-style.md),<br/>family?: string,<br/>style?: [FontStyle](ts-universal-attributes-text-style.md)<br/>} | - | Placeholder text style.<br/>- **size**: font size. If the value is of the number type, the unit fp is used.<br/>- **weight**: font weight. For the number type, the value ranges from 100 to 900, at an interval of 100. The default value is **400**. A larger value indicates a larger font weight.<br/>- **family**: font family. Use commas (,) to separate multiple fonts, for example, **'Arial, sans-serif'**. The priority of the fonts is the sequence in which they are placed.<br/>- **style**: font style. |
| enterKeyType | EnterKeyType | EnterKeyType.Done | How the Enter key is labeled. |
| caretColor | Color | - | Color of the caret (also known as the text insertion cursor). |
| maxLength<sup>8+</sup> | number | - | Maximum number of characters in the text input. |
| inputFilter<sup>8+</sup> | {<br/>value: [ResourceStr](../../ui/ts-types.md)<sup>8+</sup>,<br/>error?: (value: string)<br/>} | - | Regular expression for input filtering. Only inputs that comply with the regular expression can be displayed. Other inputs are ignored. The specified regular expression can match single characters, but not strings. Example: ^(? =.\*\d)(? =.\*[a-z])(? =.\*[A-Z]).{8,10}$. Strong passwords containing 8 to 10 characters cannot be filtered.<br/>- **value**: indicates the regular expression to set.<br/>- **error**: returns the ignored content when regular expression matching fails. |
- EnterKeyType enums
| Name | Description |
| Name | Description |
| -------- | -------- |
| EnterKeyType.Go | The&nbsp;Enter&nbsp;key&nbsp;is&nbsp;labeled&nbsp;"Go." |
| EnterKeyType.Search | The&nbsp;Enter&nbsp;key&nbsp;is&nbsp;labeled&nbsp;"Search." |
| EnterKeyType.Send | The&nbsp;Enter&nbsp;key&nbsp;is&nbsp;labeled&nbsp;"Send." |
| EnterKeyType.Next | The&nbsp;Enter&nbsp;key&nbsp;is&nbsp;labeled&nbsp;"Next." |
| EnterKeyType.Done | The&nbsp;Enter&nbsp;key&nbsp;is&nbsp;labeled&nbsp;"Done." |
| EnterKeyType.Go | The Enter key is labeled "Go." |
| EnterKeyType.Search | The Enter key is labeled "Search." |
| EnterKeyType.Send | The Enter key is labeled "Send." |
| EnterKeyType.Next | The Enter key is labeled "Next." |
| EnterKeyType.Done | The Enter key is labeled "Done." |
- InputType enums
| Name | Description |
| Name | Description |
| -------- | -------- |
| InputType.Normal | Normal&nbsp;input&nbsp;mode. |
| InputType.Password | Password&nbsp;input&nbsp;mode. |
| InputType.Email | Email&nbsp;address&nbsp;input&nbsp;mode. |
| InputType.Number | Digit&nbsp;input&nbsp;mode. |
| InputType.Normal | Normal input mode. |
| InputType.Password | Password input mode. |
| InputType.Email | Email address input mode. |
| InputType.Number | Digit input mode. |
### TextInputController<sup>8+</sup>
Implements the controller of the **&lt;TextInput&gt;** component.
| Name | Description |
| Name | Description |
| -------- | -------- |
| caretPosition(value:&nbsp;number):void | Position&nbsp;of&nbsp;the&nbsp;input&nbsp;cursor.<br/>**value**:&nbsp;indicates&nbsp;the&nbsp;length&nbsp;from&nbsp;the&nbsp;start&nbsp;of&nbsp;the&nbsp;string&nbsp;to&nbsp;the&nbsp;position&nbsp;where&nbsp;the&nbsp;input&nbsp;cursor&nbsp;is&nbsp;located. |
| caretPosition(value: number):void | Position of the input cursor.<br/>**value**: indicates the length from the start of the string to the position where the input cursor is located. |
### Objects to Import
......@@ -85,21 +85,21 @@ caretPosition(value: number): void
Sets the cursor in a specified position.
- Parameters
| Name | Type | Mandatory | Default&nbsp;Value | Description |
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| value | number | Yes | - | Position&nbsp;of&nbsp;the&nbsp;input&nbsp;cursor.<br/>**value**:&nbsp;indicates&nbsp;the&nbsp;length&nbsp;from&nbsp;the&nbsp;start&nbsp;of&nbsp;the&nbsp;string&nbsp;to&nbsp;the&nbsp;position&nbsp;where&nbsp;the&nbsp;input&nbsp;cursor&nbsp;is&nbsp;located. |
| value | number | Yes | - | Position of the input cursor.<br/>**value**: indicates the length from the start of the string to the position where the input cursor is located. |
## Events
| Name | Description |
| Name | Description |
| -------- | -------- |
| onChange(value:&nbsp;string)&nbsp;=&gt;&nbsp;void | Triggered&nbsp;when&nbsp;the&nbsp;input&nbsp;changes. |
| onSubmit(callback:&nbsp;(enterKey:&nbsp;EnterKeyType)&nbsp;=&gt;&nbsp;void) | Triggered&nbsp;when&nbsp;the&nbsp;Enter&nbsp;key&nbsp;on&nbsp;the&nbsp;physical&nbsp;or&nbsp;soft&nbsp;keyboard&nbsp;is&nbsp;pressed. |
| onEditChanged(callback:&nbsp;(isEditing:&nbsp;boolean)&nbsp;=&gt;&nbsp;void) | Triggered&nbsp;when&nbsp;the&nbsp;input&nbsp;status&nbsp;changes. |
| onCopy<sup>8+</sup>(callback:(value:&nbsp;string)&nbsp;=&gt;&nbsp;void) | Triggered&nbsp;when&nbsp;the&nbsp;copy&nbsp;button&nbsp;on&nbsp;the&nbsp;pasteboard,&nbsp;which&nbsp;displays&nbsp;when&nbsp;the&nbsp;text&nbsp;box&nbsp;is&nbsp;long&nbsp;pressed,&nbsp;is&nbsp;clicked.<br/>**value**:&nbsp;text&nbsp;to&nbsp;be&nbsp;copied. |
| onCut<sup>8+</sup>(callback:(value:&nbsp;string)&nbsp;=&gt;&nbsp;void) | Triggered&nbsp;when&nbsp;the&nbsp;cut&nbsp;button&nbsp;on&nbsp;the&nbsp;pasteboard,&nbsp;which&nbsp;displays&nbsp;when&nbsp;the&nbsp;text&nbsp;box&nbsp;is&nbsp;long&nbsp;pressed,&nbsp;is&nbsp;clicked.<br/>**value**:&nbsp;text&nbsp;to&nbsp;be&nbsp;cut. |
| onPaste<sup>8+</sup>(callback:(value:&nbsp;string)&nbsp;=&gt;&nbsp;void) | Triggered&nbsp;when&nbsp;the&nbsp;paste&nbsp;button&nbsp;on&nbsp;the&nbsp;pasteboard,&nbsp;which&nbsp;displays&nbsp;when&nbsp;the&nbsp;text&nbsp;box&nbsp;is&nbsp;long&nbsp;pressed,&nbsp;is&nbsp;clicked.<br/>**value**:&nbsp;text&nbsp;to&nbsp;be&nbsp;pasted. |
| onChange(value: string) =&gt; void | Triggered when the input changes. |
| onSubmit(callback: (enterKey: EnterKeyType) =&gt; void) | Triggered when the Enter key on the physical or soft keyboard is pressed. |
| onEditChanged(callback: (isEditing: boolean) =&gt; void) | Triggered when the input status changes. |
| onCopy<sup>8+</sup>(callback:(value: string) =&gt; void) | Triggered when the copy button on the pasteboard, which displays when the text box is long pressed, is clicked.<br/>**value**: text to be copied. |
| onCut<sup>8+</sup>(callback:(value: string) =&gt; void) | Triggered when the cut button on the pasteboard, which displays when the text box is long pressed, is clicked.<br/>**value**: text to be cut. |
| onPaste<sup>8+</sup>(callback:(value: string) =&gt; void) | Triggered when the paste button on the pasteboard, which displays when the text box is long pressed, is clicked.<br/>**value**: text to be pasted. |
## Example
......
# TextPicker
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
......@@ -13,7 +13,7 @@ The **&lt;TextPicker&gt;** component allows users to select text from a list of
None
## Child Component
## Child Components
None
......@@ -25,24 +25,24 @@ TextPicker(value: {range: string[], selected?: number})
Creates a text picker based on the selection range specified by **range**.
- Parameter
| Name | Type | Mandatory | Default&nbsp;Value | Description |
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| range | string[] | Yes | - | Data&nbsp;selection&nbsp;range&nbsp;of&nbsp;the&nbsp;picker. |
| selected | number | No | First&nbsp;element | Index&nbsp;value&nbsp;of&nbsp;the&nbsp;selected&nbsp;item&nbsp;in&nbsp;the&nbsp;array. |
| range | string[] | Yes | - | Data selection range of the picker. |
| selected | number | No | First element | Index value of the selected item in the array. |
## Attributes
| Name | Type | Default&nbsp;Value | Description |
| Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- |
| defaultPickerItemHeight | Length | - | Default&nbsp;height&nbsp;of&nbsp;a&nbsp;Picker&nbsp;content&nbsp;item&nbsp;element. |
| defaultPickerItemHeight | Length | - | Default height of a Picker content item element. |
## Events
| Name | Description |
| -------- | -------- |
| onChange(callback:&nbsp;(value:&nbsp;string,&nbsp;index:&nbsp;number)&nbsp;=&gt;&nbsp;void) | Triggered&nbsp;when&nbsp;an&nbsp;item&nbsp;in&nbsp;the&nbsp;picker&nbsp;is&nbsp;selected.<br/>-&nbsp;**value**:&nbsp;text&nbsp;of&nbsp;the&nbsp;selected&nbsp;item.<br/>-&nbsp;**index**:&nbsp;index&nbsp;of&nbsp;the&nbsp;selected&nbsp;item. |
| Name | Description |
| -------- | -------- |
| onChange(callback: (value: string, index: number) =&gt; void) | Triggered when an item in the picker is selected.<br/>- **value**: text of the selected item.<br/>- **index**: index of the selected item. |
## Example
......
# TextTimer
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
......@@ -23,11 +23,11 @@ None
TextTimer(options: { isCountDown?: boolean, count?: number, controller?: TextTimerController })
- Parameters
| Name | Type | Mandatory | Default&nbsp;Value | Description |
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| isCountDown | boolean | No | false | Whether&nbsp;to&nbsp;count&nbsp;down. |
| count | number | No | 60000 | Countdown&nbsp;time,&nbsp;in&nbsp;milliseconds.&nbsp;This&nbsp;parameter&nbsp;is&nbsp;valid&nbsp;only&nbsp;when&nbsp;**isCountDown**&nbsp;is&nbsp;set&nbsp;to&nbsp;**true**.<br/>-&nbsp;If&nbsp;the&nbsp;value&nbsp;of&nbsp;**count**&nbsp;is&nbsp;less&nbsp;than&nbsp;or&nbsp;equal&nbsp;to&nbsp;0,&nbsp;the&nbsp;default&nbsp;value&nbsp;is&nbsp;used.<br/>-&nbsp;If&nbsp;the&nbsp;value&nbsp;of&nbsp;**count**&nbsp;is&nbsp;greater&nbsp;than&nbsp;0,&nbsp;it&nbsp;is&nbsp;used. |
| controller | [TextTimerController](#texttimercontroller) | No | null | **&lt;TextTimer&gt;**&nbsp;controller. |
| isCountDown | boolean | No | false | Whether to count down. |
| count | number | No | 60000 | Countdown time, in milliseconds. This parameter is valid only when **isCountDown** is set to **true**.<br/>- If the value of **count** is less than or equal to 0, the default value is used.<br/>- If the value of **count** is greater than 0, it is used. |
| controller | [TextTimerController](#texttimercontroller) | No | null | **&lt;TextTimer&gt;** controller. |
### TextTimerController
......@@ -36,23 +36,23 @@ Defines the controller for controlling the **&lt;TextTimer&gt;** component.
| Name | Description |
| -------- | -------- |
| start() | Starts&nbsp;the&nbsp;timer. |
| pause() | Pauses&nbsp;the&nbsp;timer. |
| reset() | Resets&nbsp;the&nbsp;timer. |
| start() | Starts the timer. |
| pause() | Pauses the timer. |
| reset() | Resets the timer. |
## Attributes
| Name | Type | Default&nbsp;Value | Description |
| Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- |
| format | string | 'hh:mm:ss.ms' | Custom&nbsp;format.&nbsp;The&nbsp;value&nbsp;must&nbsp;contain&nbsp;at&nbsp;least&nbsp;one&nbsp;of&nbsp;the&nbsp;following&nbsp;keywords:&nbsp;**hh**,&nbsp;**mm**,&nbsp;**ss**,&nbsp;and&nbsp;**ms**. |
| format | string | 'hh:mm:ss.ms' | Custom format. The value must contain at least one of the following keywords: **hh**, **mm**, **ss**, and **ms**. |
## Events
| Name | Description |
| -------- | -------- |
| onTimer(callback:&nbsp;(utc:&nbsp;number,&nbsp;elapsedTime:&nbsp;number)&nbsp;=&gt;&nbsp;void) | Triggered&nbsp;when&nbsp;the&nbsp;time&nbsp;text&nbsp;changes.<br/>**utc**:&nbsp;currently&nbsp;displayed&nbsp;time,&nbsp;in&nbsp;milliseconds.<br/>**elapsedTime**:&nbsp;elapsed&nbsp;time&nbsp;of&nbsp;the&nbsp;timer,&nbsp;in&nbsp;milliseconds. |
| onTimer(callback: (utc: number, elapsedTime: number) =&gt; void) | Triggered when the time text changes.<br/>**utc**: currently displayed time, in milliseconds.<br/>**elapsedTime**: elapsed time of the timer, in milliseconds. |
## Example
......
# Toggle
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
......@@ -20,33 +20,33 @@ None
Toggle(options: { type: ToggleType, isOn?: boolean })
- Parameters
| Name | Type | Mandatory | Default&nbsp;Value | Description |
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| type | ToggleType | Yes | - | Type&nbsp;of&nbsp;the&nbsp;toggle. |
| isOn | boolean | No | false | Initial&nbsp;state&nbsp;of&nbsp;the&nbsp;toggle.<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**NOTE:**<br/>>&nbsp;If&nbsp;**isOn**&nbsp;is&nbsp;not&nbsp;set&nbsp;during&nbsp;component&nbsp;creation,&nbsp;the&nbsp;selected&nbsp;state&nbsp;can&nbsp;be&nbsp;retained&nbsp;during&nbsp;component&nbsp;reuse.&nbsp;If&nbsp;**isOn**&nbsp;is&nbsp;set,&nbsp;the&nbsp;selected&nbsp;state&nbsp;needs&nbsp;to&nbsp;be&nbsp;retained&nbsp;during&nbsp;component&nbsp;reuse&nbsp;after&nbsp;the&nbsp;selected&nbsp;state&nbsp;is&nbsp;recorded&nbsp;using&nbsp;an&nbsp;event&nbsp;method. |
| type | ToggleType | Yes | - | Type of the toggle. |
| isOn | boolean | No | false | Initial state of the toggle.<br/>> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**<br/>> If **isOn** is not set during component creation, the selected state can be retained during component reuse. If **isOn** is set, the selected state needs to be retained during component reuse after the selected state is recorded using an event method. |
- ToggleType enums
| Name | Description |
| -------- | -------- |
| Checkbox | A&nbsp;checkbox&nbsp;is&nbsp;provided.&nbsp;The&nbsp;text&nbsp;setting&nbsp;of&nbsp;the&nbsp;child&nbsp;component&nbsp;does&nbsp;not&nbsp;take&nbsp;effect.&nbsp;If&nbsp;the&nbsp;text&nbsp;setting&nbsp;is&nbsp;required,&nbsp;you&nbsp;can&nbsp;place&nbsp;the&nbsp;**&lt;Text&gt;**&nbsp;component&nbsp;and&nbsp;the&nbsp;current&nbsp;component&nbsp;in&nbsp;the&nbsp;layout&nbsp;component. |
| Button | A&nbsp;button&nbsp;is&nbsp;provided.&nbsp;If&nbsp;the&nbsp;text&nbsp;setting&nbsp;is&nbsp;available,&nbsp;the&nbsp;corresponding&nbsp;text&nbsp;content&nbsp;is&nbsp;displayed&nbsp;inside&nbsp;the&nbsp;button. |
| Switch | A&nbsp;switch&nbsp;is&nbsp;provided.&nbsp;The&nbsp;text&nbsp;setting&nbsp;of&nbsp;the&nbsp;child&nbsp;component&nbsp;does&nbsp;not&nbsp;take&nbsp;effect.&nbsp;If&nbsp;the&nbsp;text&nbsp;setting&nbsp;is&nbsp;required,&nbsp;you&nbsp;can&nbsp;place&nbsp;the&nbsp;**&lt;Text&gt;**&nbsp;component&nbsp;and&nbsp;the&nbsp;current&nbsp;component&nbsp;in&nbsp;the&nbsp;layout&nbsp;component. |
| Checkbox | A checkbox is provided. The text setting of the child component does not take effect. If the text setting is required, you can place the **&lt;Text&gt;** component and the current component in the layout component. |
| Button | A button is provided. If the text setting is available, the corresponding text content is displayed inside the button. |
| Switch | A switch is provided. The text setting of the child component does not take effect. If the text setting is required, you can place the **&lt;Text&gt;** component and the current component in the layout component. |
## Attributes
| Name | Type | Default&nbsp;Value | Description |
| Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- |
| selectedColor | Color | - | Background&nbsp;color&nbsp;of&nbsp;the&nbsp;toggle&nbsp;when&nbsp;it&nbsp;is&nbsp;enabled. |
| switchPointColor | Color | - | Color&nbsp;of&nbsp;the&nbsp;circular&nbsp;slider&nbsp;of&nbsp;the&nbsp;**Switch**&nbsp;type.<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**NOTE:**<br/>>&nbsp;This&nbsp;attribute&nbsp;is&nbsp;valid&nbsp;only&nbsp;when&nbsp;type&nbsp;is&nbsp;set&nbsp;to&nbsp;**ToggleType.Switch**. |
| selectedColor | Color | - | Background color of the toggle when it is enabled. |
| switchPointColor | Color | - | Color of the circular slider of the **Switch** type.<br/>> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**<br/>> This attribute is valid only when type is set to **ToggleType.Switch**. |
## Events
| Name | Description |
| -------- | -------- |
| onChange(callback:&nbsp;(isOn:&nbsp;boolean)&nbsp;=&gt;&nbsp;void) | Triggered&nbsp;when&nbsp;the&nbsp;switch&nbsp;status&nbsp;changes. |
| onChange(callback: (isOn: boolean) =&gt; void) | Triggered when the switch status changes. |
## Example
......
# LongPressGesture
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> This gesture is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
......@@ -15,25 +15,25 @@ None
LongPressGesture(options?: { fingers?: number, repeat?: boolean, duration?: number })
- Parameters
| Name | Type | Mandatory | Default&nbsp;Value | Description |
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| fingers | number | No | 1 | Minimum&nbsp;number&nbsp;of&nbsp;fingers&nbsp;to&nbsp;trigger&nbsp;a&nbsp;long&nbsp;press&nbsp;gesture.&nbsp;The&nbsp;value&nbsp;ranges&nbsp;from&nbsp;1&nbsp;to&nbsp;10. |
| repeat | boolean | No | false | Whether&nbsp;to&nbsp;continuously&nbsp;trigger&nbsp;the&nbsp;event&nbsp;callback. |
| duration | number | No | 500 | Minimum&nbsp;hold-down&nbsp;time,&nbsp;in&nbsp;ms. |
| fingers | number | No | 1 | Minimum number of fingers to trigger a long press gesture. The value ranges from 1 to 10. |
| repeat | boolean | No | false | Whether to continuously trigger the event callback. |
| duration | number | No | 500 | Minimum hold-down time, in ms. |
## Events
| Name | Description |
| -------- | -------- |
| onAction((event?:&nbsp;LongPressGestureEvent)&nbsp;=&gt;&nbsp;void) | Callback&nbsp;invoked&nbsp;when&nbsp;a&nbsp;long&nbsp;press&nbsp;gesture&nbsp;is&nbsp;recognized. |
| onActionEnd((event?:&nbsp;LongPressGestureEvent)&nbsp;=&gt;&nbsp;void) | Callback&nbsp;invoked&nbsp;when&nbsp;the&nbsp;finger&nbsp;used&nbsp;for&nbsp;a&nbsp;long&nbsp;press&nbsp;gesture&nbsp;is&nbsp;lift. |
| onActionCancel(event:&nbsp;()&nbsp;=&gt;&nbsp;void) | Callback&nbsp;invoked&nbsp;when&nbsp;a&nbsp;tap&nbsp;cancellation&nbsp;event&nbsp;is&nbsp;received&nbsp;after&nbsp;a&nbsp;long&nbsp;press&nbsp;gesture&nbsp;is&nbsp;recognized. |
| onAction((event?: LongPressGestureEvent) =&gt; void) | Callback invoked when a long press gesture is recognized. |
| onActionEnd((event?: LongPressGestureEvent) =&gt; void) | Callback invoked when the finger used for a long press gesture is lift. |
| onActionCancel(event: () =&gt; void) | Callback invoked when a tap cancellation event is received after a long press gesture is recognized. |
- LongPressGestureEvent<sup>8+</sup> attributes
| Name | Type | Description |
| -------- | -------- | -------- |
| repeat | boolean | Whether&nbsp;the&nbsp;event&nbsp;is&nbsp;repeated. |
| repeat | boolean | Whether the event is repeated. |
## Example
......
# PanGesture
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> This gesture is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
......@@ -15,23 +15,23 @@ None
PanGesture(options?: { fingers?: number, direction?: PanDirection, distance?: number } | [PanGestureOption](#pangestureoption))
- Parameters
| Name | Type | Mandatory | Default&nbsp;Value | Description |
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| fingers | number | No | 1 | Minimum&nbsp;number&nbsp;of&nbsp;fingers&nbsp;to&nbsp;trigger&nbsp;a&nbsp;long&nbsp;press&nbsp;gesture.&nbsp;The&nbsp;value&nbsp;ranges&nbsp;from&nbsp;1&nbsp;to&nbsp;10. |
| direction | PanDirection | No | All | Slide&nbsp;direction.&nbsp;The&nbsp;enumerated&nbsp;value&nbsp;supports&nbsp;the&nbsp;AND&nbsp;(&amp;)&nbsp;and&nbsp;OR&nbsp;(\|)&nbsp;operations. |
| distance | number | No | 5.0 | Minimum&nbsp;slide&nbsp;recognition&nbsp;distance,&nbsp;in&nbsp;vp. |
| fingers | number | No | 1 | Minimum number of fingers to trigger a long press gesture. The value ranges from 1 to 10. |
| direction | PanDirection | No | All | Slide direction. The enumerated value supports the AND (&amp;) and OR (\|) operations. |
| distance | number | No | 5.0 | Minimum slide recognition distance, in vp. |
- PanDirection enums
| Name | Description |
| -------- | -------- |
| All | All&nbsp;directions. |
| Horizontal | Horizontal&nbsp;slide. |
| Vertical | Vertical&nbsp;slide. |
| Left | Slide&nbsp;to&nbsp;the&nbsp;left. |
| Right | Slide&nbsp;to&nbsp;the&nbsp;right. |
| Up | Slide&nbsp;up. |
| Down | Slide&nbsp;down. |
| None | Slide&nbsp;disabled. |
| All | All directions. |
| Horizontal | Horizontal slide. |
| Vertical | Vertical slide. |
| Left | Slide to the left. |
| Right | Slide to the right. |
| Up | Slide up. |
| Down | Slide down. |
| None | Slide disabled. |
### PanGestureOption
......@@ -46,25 +46,25 @@ PanGestureOption(options?: { fingers?: number, direction?: PanDirection, distanc
- APIs
| Name | Description |
| -------- | -------- |
| setDirection(value:&nbsp;PanDirection) | Sets&nbsp;the&nbsp;direction. |
| setDistance(value:&nbsp;number) | Sets&nbsp;the&nbsp;distance. |
| setFingers(value:&nbsp;number) | Sets&nbsp;the&nbsp;number&nbsp;of&nbsp;fingers. |
| setDirection(value: PanDirection) | Sets the direction. |
| setDistance(value: number) | Sets the distance. |
| setFingers(value: number) | Sets the number of fingers. |
## Events
| Name | Description |
| -------- | -------- |
| onActionStart(callback:&nbsp;(event?:&nbsp;PanGestureEvent)&nbsp;=&gt;&nbsp;void) | Callback&nbsp;for&nbsp;the&nbsp;pan&nbsp;gestures&nbsp;reorganization&nbsp;event. |
| onActionUpdate(callback:&nbsp;(event?:&nbsp;PanGestureEvent)&nbsp;=&gt;&nbsp;void) | Callback&nbsp;invoked&nbsp;when&nbsp;a&nbsp;pan&nbsp;gesture&nbsp;is&nbsp;recognized. |
| onActionEnd(callback:&nbsp;(event?:&nbsp;PanGestureEvent)&nbsp;=&gt;&nbsp;void) | Callback&nbsp;invoked&nbsp;when&nbsp;the&nbsp;finger&nbsp;used&nbsp;for&nbsp;a&nbsp;pan&nbsp;gesture&nbsp;is&nbsp;lift. |
| onActionCancel(callback:&nbsp;()&nbsp;=&gt;&nbsp;void) | Callback&nbsp;invoked&nbsp;when&nbsp;a&nbsp;tap&nbsp;cancellation&nbsp;event&nbsp;is&nbsp;received&nbsp;after&nbsp;a&nbsp;pan&nbsp;gesture&nbsp;is&nbsp;recognized. |
| onActionStart(callback: (event?: PanGestureEvent) =&gt; void) | Callback for the pan gestures reorganization event. |
| onActionUpdate(callback: (event?: PanGestureEvent) =&gt; void) | Callback invoked when a pan gesture is recognized. |
| onActionEnd(callback: (event?: PanGestureEvent) =&gt; void) | Callback invoked when the finger used for a pan gesture is lift. |
| onActionCancel(callback: () =&gt; void) | Callback invoked when a tap cancellation event is received after a pan gesture is recognized. |
- PanGestureEvent<sup>8+</sup> attributes
| Name | Type | Description |
| -------- | -------- | -------- |
| offsetX | number | Offset&nbsp;of&nbsp;the&nbsp;gesture&nbsp;event,&nbsp;in&nbsp;vp. |
| offsetY | number | Offset&nbsp;of&nbsp;the&nbsp;gesture&nbsp;event,&nbsp;in&nbsp;vp. |
| offsetX | number | Offset of the gesture event, in vp. |
| offsetY | number | Offset of the gesture event, in vp. |
## Example
......
# PinchGesture
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> This gesture is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
......@@ -15,27 +15,27 @@ None
PinchGesture(options?: { fingers?: number, distance?: number })
- Parameters
| Name | Type | Mandatory | Default&nbsp;Value | Description |
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| fingers | number | No | 2 | Minimum&nbsp;number&nbsp;of&nbsp;fingers&nbsp;to&nbsp;trigger&nbsp;a&nbsp;pinch.&nbsp;The&nbsp;value&nbsp;ranges&nbsp;from&nbsp;2&nbsp;to&nbsp;5. |
| distance | number | No | 3.0 | Minimum&nbsp;recognition&nbsp;distance,&nbsp;in&nbsp;vp. |
| fingers | number | No | 2 | Minimum number of fingers to trigger a pinch. The value ranges from 2 to 5. |
| distance | number | No | 3.0 | Minimum recognition distance, in vp. |
## Events
| Name | Description |
| -------- | -------- |
| onActionStart((event?:&nbsp;PinchGestureEvent)&nbsp;=&gt;&nbsp;void) | Callback&nbsp;invoked&nbsp;when&nbsp;a&nbsp;pinch&nbsp;gesture&nbsp;is&nbsp;recognized. |
| onActionUpdate((event?:&nbsp;PinchGestureEvent)&nbsp;=&gt;&nbsp;void) | Callback&nbsp;invoked&nbsp;during&nbsp;the&nbsp;movement&nbsp;of&nbsp;a&nbsp;pinch&nbsp;gesture. |
| onActionEnd((event?:&nbsp;PinchGestureEvent)&nbsp;=&gt;&nbsp;void) | Callback&nbsp;invoked&nbsp;when&nbsp;the&nbsp;finger&nbsp;used&nbsp;for&nbsp;a&nbsp;pinch&nbsp;gesture&nbsp;is&nbsp;lift. |
| onActionCancel(event:&nbsp;()&nbsp;=&gt;&nbsp;void) | Callback&nbsp;invoked&nbsp;when&nbsp;a&nbsp;tap&nbsp;cancellation&nbsp;event&nbsp;is&nbsp;received&nbsp;after&nbsp;a&nbsp;pinch&nbsp;gesture&nbsp;is&nbsp;recognized. |
| onActionStart((event?: PinchGestureEvent) =&gt; void) | Callback invoked when a pinch gesture is recognized. |
| onActionUpdate((event?: PinchGestureEvent) =&gt; void) | Callback invoked during the movement of a pinch gesture. |
| onActionEnd((event?: PinchGestureEvent) =&gt; void) | Callback invoked when the finger used for a pinch gesture is lift. |
| onActionCancel(event: () =&gt; void) | Callback invoked when a tap cancellation event is received after a pinch gesture is recognized. |
- PinchGestureEvent<sup>8+</sup> attributes
| Name | Type | Description |
| -------- | -------- | -------- |
| scale | number | Scale&nbsp;ratio.&nbsp;This&nbsp;attribute&nbsp;is&nbsp;used&nbsp;for&nbsp;the&nbsp;pinch&nbsp;gesture. |
| pinchCenterX | number | X-coordinate&nbsp;of&nbsp;the&nbsp;center&nbsp;of&nbsp;the&nbsp;pinch&nbsp;gesture,&nbsp;in&nbsp;px. |
| pinchCenterY | number | Y-coordinate&nbsp;of&nbsp;the&nbsp;center&nbsp;of&nbsp;the&nbsp;pinch&nbsp;gesture,&nbsp;in&nbsp;px. |
| scale | number | Scale ratio. This attribute is used for the pinch gesture. |
| pinchCenterX | number | X-coordinate of the center of the pinch gesture, in px. |
| pinchCenterY | number | Y-coordinate of the center of the pinch gesture, in px. |
## Example
......
# RotationGesture
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> This gesture is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
......@@ -15,25 +15,25 @@ None
RotationGesture(options?: { fingers?: number, angle?: number })
- Parameters
| Name | Type | Mandatory | Default&nbsp;Value | Description |
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| fingers | number | No | 2 | Minimum&nbsp;number&nbsp;of&nbsp;fingers&nbsp;to&nbsp;trigger&nbsp;a&nbsp;rotation.&nbsp;The&nbsp;value&nbsp;ranges&nbsp;from&nbsp;2&nbsp;to&nbsp;5. |
| angle | number | No | 1.0 | Minimum&nbsp;degree&nbsp;that&nbsp;can&nbsp;trigger&nbsp;the&nbsp;rotation&nbsp;gesture. |
| fingers | number | No | 2 | Minimum number of fingers to trigger a rotation. The value ranges from 2 to 5. |
| angle | number | No | 1.0 | Minimum degree that can trigger the rotation gesture. |
## Events
| Name | Description |
| -------- | -------- |
| onActionStart((event?:&nbsp;RotationGestureEvent)&nbsp;=&gt;&nbsp;void) | Callback&nbsp;invoked&nbsp;when&nbsp;a&nbsp;rotation&nbsp;gesture&nbsp;is&nbsp;recognized. |
| onActionUpdate((event?:&nbsp;RotationGestureEvent)&nbsp;=&gt;&nbsp;void) | Callback&nbsp;invoked&nbsp;during&nbsp;the&nbsp;movement&nbsp;of&nbsp;the&nbsp;rotation&nbsp;gesture. |
| onActionEnd((event?:&nbsp;RotationGestureEvent)&nbsp;=&gt;&nbsp;void) | Callback&nbsp;invoked&nbsp;when&nbsp;the&nbsp;finger&nbsp;used&nbsp;for&nbsp;the&nbsp;rotation&nbsp;gesture&nbsp;is&nbsp;lift. |
| onActionCancel(event:&nbsp;()&nbsp;=&gt;&nbsp;void) | Callback&nbsp;invoked&nbsp;when&nbsp;a&nbsp;tap&nbsp;cancellation&nbsp;event&nbsp;is&nbsp;received&nbsp;after&nbsp;the&nbsp;rotation&nbsp;gesture&nbsp;is&nbsp;recognized. |
| onActionStart((event?: RotationGestureEvent) =&gt; void) | Callback invoked when a rotation gesture is recognized. |
| onActionUpdate((event?: RotationGestureEvent) =&gt; void) | Callback invoked during the movement of the rotation gesture. |
| onActionEnd((event?: RotationGestureEvent) =&gt; void) | Callback invoked when the finger used for the rotation gesture is lift. |
| onActionCancel(event: () =&gt; void) | Callback invoked when a tap cancellation event is received after the rotation gesture is recognized. |
- RotationGestureEvent<sup>8+</sup> attributes
| Name | Type | Description |
| -------- | -------- | -------- |
| angle | number | Rotation&nbsp;angle. |
| angle | number | Rotation angle. |
## Example
......
# SwipeGesture
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> This gesture is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
......@@ -15,32 +15,32 @@ None
SwipeGesture(value?: { fingers?: number; direction?: SwipeDirection; speed?: number })
- Parameters
| Name | Type | Mandatory | Default&nbsp;Value | Description |
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| fingers | number | No | 1 | Minimum&nbsp;number&nbsp;of&nbsp;fingers&nbsp;to&nbsp;trigger&nbsp;a&nbsp;swipe&nbsp;gesture.&nbsp;The&nbsp;value&nbsp;ranges&nbsp;from&nbsp;1&nbsp;to&nbsp;10. |
| direction | SwipeDirection | No | SwipeDirection.All | Swipe&nbsp;direction. |
| speed | number | No | 100 | Minimum&nbsp;speed&nbsp;of&nbsp;the&nbsp;swipe&nbsp;gesture&nbsp;(100&nbsp;vp/s). |
| fingers | number | No | 1 | Minimum number of fingers to trigger a swipe gesture. The value ranges from 1 to 10. |
| direction | SwipeDirection | No | SwipeDirection.All | Swipe direction. |
| speed | number | No | 100 | Minimum speed of the swipe gesture (100 vp/s). |
- SwipeDirection enums
| Name | Description |
| -------- | -------- |
| All | All&nbsp;directions. |
| Horizontal | Horizontal&nbsp;direction. |
| Vertical | Vertical&nbsp;direction. |
| All | All directions. |
| Horizontal | Horizontal direction. |
| Vertical | Vertical direction. |
## Events
| Name | Description |
| -------- | -------- |
| onAction(callback:(event?:&nbsp;SwipeGestureEvent)&nbsp;=&gt;&nbsp;void) | Callback&nbsp;invoked&nbsp;when&nbsp;a&nbsp;swipe&nbsp;gesture&nbsp;is&nbsp;recognized. |
| onAction(callback:(event?: SwipeGestureEvent) =&gt; void) | Callback invoked when a swipe gesture is recognized. |
- SwipeGestureEvent attributes
| Name | Type | Description |
| -------- | -------- | -------- |
| angle | number | Angle&nbsp;of&nbsp;the&nbsp;swipe&nbsp;gesture. |
| speed | number | Speed&nbsp;of&nbsp;the&nbsp;swipe&nbsp;gesture. |
| angle | number | Angle of the swipe gesture. |
| speed | number | Speed of the swipe gesture. |
## Example
......
# TapGesture
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> This gesture is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
......@@ -15,17 +15,17 @@ None
TapGesture(options?: { count?: number, fingers?: number })
- Parameters
| Name | Type | Mandatory | Default&nbsp;Value | Description |
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| count | number | No | 1 | Number&nbsp;of&nbsp;consecutive&nbsp;taps.&nbsp;If&nbsp;this&nbsp;parameter&nbsp;is&nbsp;set&nbsp;to&nbsp;a&nbsp;value&nbsp;less&nbsp;than&nbsp;**1**,&nbsp;the&nbsp;default&nbsp;value&nbsp;will&nbsp;be&nbsp;used.<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**NOTE:**<br/>>&nbsp;If&nbsp;multi-tap&nbsp;is&nbsp;configured,&nbsp;the&nbsp;timeout&nbsp;interval&nbsp;between&nbsp;a&nbsp;lift&nbsp;and&nbsp;the&nbsp;next&nbsp;tap&nbsp;is&nbsp;300&nbsp;ms. |
| fingers | number | No | 1 | Minimum&nbsp;number&nbsp;of&nbsp;fingers&nbsp;to&nbsp;trigger&nbsp;a&nbsp;tap.&nbsp;The&nbsp;value&nbsp;ranges&nbsp;from&nbsp;1&nbsp;to&nbsp;10.<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**NOTE:**<br/>>&nbsp;1.&nbsp;When&nbsp;multi-finger&nbsp;is&nbsp;configured,&nbsp;if&nbsp;the&nbsp;number&nbsp;of&nbsp;fingers&nbsp;used&nbsp;for&nbsp;tap&nbsp;does&nbsp;not&nbsp;reach&nbsp;the&nbsp;specified&nbsp;number&nbsp;within&nbsp;300&nbsp;ms&nbsp;after&nbsp;the&nbsp;first&nbsp;finger&nbsp;is&nbsp;tapped,&nbsp;the&nbsp;gesture&nbsp;fails&nbsp;to&nbsp;be&nbsp;recognized.<br/>>&nbsp;<br/>>&nbsp;2.&nbsp;Gesture&nbsp;recognition&nbsp;fails&nbsp;if&nbsp;the&nbsp;number&nbsp;of&nbsp;fingers&nbsp;used&nbsp;for&nbsp;tap&nbsp;exceeds&nbsp;the&nbsp;configured&nbsp;number. |
| count | number | No | 1 | Number of consecutive taps. If this parameter is set to a value less than **1**, the default value will be used.<br/>> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**<br/>> If multi-tap is configured, the timeout interval between a lift and the next tap is 300 ms. |
| fingers | number | No | 1 | Minimum number of fingers to trigger a tap. The value ranges from 1 to 10.<br/>> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**<br/>> 1. When multi-finger is configured, if the number of fingers used for tap does not reach the specified number within 300 ms after the first finger is tapped, the gesture fails to be recognized.<br/>> <br/>> 2. Gesture recognition fails if the number of fingers used for tap exceeds the configured number. |
## Events
| Name | Description |
| -------- | -------- |
| onAction((event?:&nbsp;GestureEvent)&nbsp;=&gt;&nbsp;void) | Callback&nbsp;invoked&nbsp;when&nbsp;a&nbsp;tap&nbsp;gesture&nbsp;is&nbsp;recognized. |
| onAction((event?: GestureEvent) =&gt; void) | Callback invoked when a tap gesture is recognized. |
## Example
......
# Combined Gestures
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> Combined gestures are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
......@@ -15,24 +15,24 @@ None
GestureGroup(mode: GestureMode, ...gesture: GestureType[])
- Parameters
| Name | Type | Mandatory | Default&nbsp;Value | Description |
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| mode | GestureMode | Yes | - | Recognition&nbsp;mode&nbsp;of&nbsp;combined&nbsp;gestures. |
| gesture | [TapGesture](ts-basic-gestures-tapgesture.md)<br/>\|&nbsp;[LongPressGesture](ts-basic-gestures-longpressgesture.md)<br/>\|&nbsp;[PanGesture](ts-basic-gestures-pangesture.md)<br/>\|&nbsp;[PinchGesture](ts-basic-gestures-pinchgesture.md)<br/>\|&nbsp;[RotationGesture](ts-basic-gestures-rotationgesture.md) | Yes | - | Variable-length&nbsp;parameter,&nbsp;indicating&nbsp;one&nbsp;or&nbsp;more&nbsp;basic&nbsp;gesture&nbsp;types.&nbsp;These&nbsp;gestures&nbsp;are&nbsp;recognized&nbsp;in&nbsp;combination. |
| mode | GestureMode | Yes | - | Recognition mode of combined gestures. |
| gesture | [TapGesture](ts-basic-gestures-tapgesture.md)<br/>\| [LongPressGesture](ts-basic-gestures-longpressgesture.md)<br/>\| [PanGesture](ts-basic-gestures-pangesture.md)<br/>\| [PinchGesture](ts-basic-gestures-pinchgesture.md)<br/>\| [RotationGesture](ts-basic-gestures-rotationgesture.md) | Yes | - | Variable-length parameter, indicating one or more basic gesture types. These gestures are recognized in combination. |
- GestureMode enums
| Name | Description |
| -------- | -------- |
| Sequence | Sequential&nbsp;recognition:&nbsp;Gestures&nbsp;are&nbsp;recognized&nbsp;in&nbsp;the&nbsp;registration&nbsp;sequence&nbsp;until&nbsp;all&nbsp;gestures&nbsp;are&nbsp;recognized&nbsp;successfully.&nbsp;When&nbsp;one&nbsp;gesture&nbsp;fails&nbsp;to&nbsp;be&nbsp;recognized,&nbsp;all&nbsp;gestures&nbsp;fail&nbsp;to&nbsp;be&nbsp;recognized. |
| Parallel | Parallel&nbsp;recognition.&nbsp;Registered&nbsp;gestures&nbsp;are&nbsp;recognized&nbsp;concurrently&nbsp;until&nbsp;all&nbsp;gestures&nbsp;are&nbsp;recognized.&nbsp;The&nbsp;recognition&nbsp;result&nbsp;of&nbsp;each&nbsp;gesture&nbsp;does&nbsp;not&nbsp;affect&nbsp;each&nbsp;other. |
| Exclusive | Exclusive&nbsp;recognition.&nbsp;Registered&nbsp;gestures&nbsp;are&nbsp;identified&nbsp;concurrently.&nbsp;If&nbsp;one&nbsp;gesture&nbsp;is&nbsp;successfully&nbsp;recognized,&nbsp;gesture&nbsp;recognition&nbsp;ends. |
| Sequence | Sequential recognition: Gestures are recognized in the registration sequence until all gestures are recognized successfully. When one gesture fails to be recognized, all gestures fail to be recognized. |
| Parallel | Parallel recognition. Registered gestures are recognized concurrently until all gestures are recognized. The recognition result of each gesture does not affect each other. |
| Exclusive | Exclusive recognition. Registered gestures are identified concurrently. If one gesture is successfully recognized, gesture recognition ends. |
## Events
| Name | Description |
| -------- | -------- |
| onCancel(event:&nbsp;()&nbsp;=&gt;&nbsp;void) | Callback&nbsp;for&nbsp;the&nbsp;GestureMode.Sequence&nbsp;cancellation&nbsp;event. |
| onCancel(event: () =&gt; void) | Callback for the GestureMode.Sequence cancellation event. |
## Example
......
# Canvas
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
......@@ -23,9 +23,9 @@ None
Canvas(context: CanvasRenderingContext2D)
- Parameters
| Name | Type | Mandatory | Default&nbsp;Value | Description |
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| context | [CanvasRenderingContext2D](ts-canvasrenderingcontext2d.md) | Yes | - | For&nbsp;details,&nbsp;see&nbsp;CanvasRenderingContext2D. |
| context | [CanvasRenderingContext2D](ts-canvasrenderingcontext2d.md) | Yes | - | For details, see CanvasRenderingContext2D. |
## Attributes
......@@ -39,7 +39,7 @@ In addition to [universal events](ts-universal-events-click.md), the following e
| Name | Parameter | Description |
| -------- | -------- | -------- |
| onReady(callback:&nbsp;()&nbsp;=&gt;&nbsp;void) | None | Triggered&nbsp;when&nbsp;. |
| onReady(callback: () =&gt; void) | None | Triggered when . |
## Example
......
# CanvasGradient
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
......@@ -15,10 +15,10 @@ addColorStop(offset: number, color: string): void
Adds a color stop for the **CanvasGradient** object based on the specified offset and gradient color.
- Parameters
| Name | Type | Mandatory | Default&nbsp;Value | Description |
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| offset | number | Yes | 0 | Proportion&nbsp;of&nbsp;the&nbsp;distance&nbsp;between&nbsp;the&nbsp;color&nbsp;stop&nbsp;and&nbsp;the&nbsp;start&nbsp;point&nbsp;to&nbsp;the&nbsp;total&nbsp;length.&nbsp;The&nbsp;value&nbsp;ranges&nbsp;from&nbsp;0&nbsp;to&nbsp;1. |
| color | string | Yes | 'ffffff' | Gradient&nbsp;color&nbsp;to&nbsp;set. |
| offset | number | Yes | 0 | Proportion of the distance between the color stop and the start point to the total length. The value ranges from 0 to 1. |
| color | string | Yes | 'ffffff' | Gradient color to set. |
- Example
......
# ImageBitmap
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
......@@ -12,6 +12,6 @@
| Name | Type | Description |
| -------- | -------- | -------- |
| width | number | Actual&nbsp;width&nbsp;of&nbsp;the&nbsp;rectangle&nbsp;on&nbsp;the&nbsp;canvas,&nbsp;in&nbsp;pixels. |
| height | number | Actual&nbsp;height&nbsp;of&nbsp;the&nbsp;rectangle&nbsp;on&nbsp;the&nbsp;canvas,&nbsp;in&nbsp;pixels. |
| data | &lt;Uint8ClampedArray&gt; | A&nbsp;one-dimensional&nbsp;array&nbsp;of&nbsp;color&nbsp;values.&nbsp;The&nbsp;values&nbsp;range&nbsp;from&nbsp;0&nbsp;to&nbsp;255. |
| width | number | Actual width of the rectangle on the canvas, in pixels. |
| height | number | Actual height of the rectangle on the canvas, in pixels. |
| data | &lt;Uint8ClampedArray&gt; | A one-dimensional array of color values. The values range from 0 to 255. |
# ImageData
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
......@@ -12,6 +12,6 @@
| Name | Type | Description |
| -------- | -------- | -------- |
| width | number | Actual&nbsp;width&nbsp;of&nbsp;the&nbsp;rectangle&nbsp;on&nbsp;the&nbsp;canvas,&nbsp;in&nbsp;pixels. |
| height | number | Actual&nbsp;height&nbsp;of&nbsp;the&nbsp;rectangle&nbsp;on&nbsp;the&nbsp;canvas,&nbsp;in&nbsp;pixels. |
| data | &lt;Uint8ClampedArray&gt; | A&nbsp;one-dimensional&nbsp;array&nbsp;of&nbsp;color&nbsp;values.&nbsp;The&nbsp;values&nbsp;range&nbsp;from&nbsp;0&nbsp;to&nbsp;255. |
| width | number | Actual width of the rectangle on the canvas, in pixels. |
| height | number | Actual height of the rectangle on the canvas, in pixels. |
| data | &lt;Uint8ClampedArray&gt; | A one-dimensional array of color values. The values range from 0 to 255. |
# Path2D
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
......@@ -15,9 +15,9 @@ addPath(path: Object): void
Adds a path to this path.
- Parameters
| Name | Type | Mandatory | Default&nbsp;Value | Description |
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| path | Object | Yes | null | Path&nbsp;to&nbsp;be&nbsp;added&nbsp;to&nbsp;this&nbsp;path. |
| path | Object | Yes | null | Path to be added to this path. |
- Example
......@@ -97,10 +97,10 @@ 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.
- Parameters
| Name | Type | Mandatory | Default&nbsp;Value | Description |
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| x | number | Yes | 0 | X-coordinate&nbsp;of&nbsp;the&nbsp;target&nbsp;point. |
| y | number | Yes | 0 | Y-coordinate&nbsp;of&nbsp;the&nbsp;target&nbsp;point. |
| x | number | Yes | 0 | X-coordinate of the target point. |
| y | number | Yes | 0 | Y-coordinate of the target point. |
- Example
......@@ -142,10 +142,10 @@ lineTo(x: number, y: number): void
Draws a straight line from the current point to the target point.
- Parameters
| Name | Type | Mandatory | Default&nbsp;Value | Description |
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| x | number | Yes | 0 | X-coordinate&nbsp;of&nbsp;the&nbsp;target&nbsp;point. |
| y | number | Yes | 0 | Y-coordinate&nbsp;of&nbsp;the&nbsp;target&nbsp;point. |
| x | number | Yes | 0 | X-coordinate of the target point. |
| y | number | Yes | 0 | Y-coordinate of the target point. |
- Example
......@@ -188,14 +188,14 @@ bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number,
Draws a cubic bezier curve on the canvas.
- Parameters
| Name | Type | Mandatory | Default&nbsp;Value | Description |
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| cp1x | number | Yes | 0 | X-coordinate&nbsp;of&nbsp;the&nbsp;first&nbsp;parameter&nbsp;of&nbsp;the&nbsp;bezier&nbsp;curve. |
| cp1y | number | Yes | 0 | Y-coordinate&nbsp;of&nbsp;the&nbsp;first&nbsp;parameter&nbsp;of&nbsp;the&nbsp;bezier&nbsp;curve. |
| cp2x | number | Yes | 0 | X-coordinate&nbsp;of&nbsp;the&nbsp;second&nbsp;parameter&nbsp;of&nbsp;the&nbsp;bezier&nbsp;curve. |
| cp2y | number | Yes | 0 | Y-coordinate&nbsp;of&nbsp;the&nbsp;second&nbsp;parameter&nbsp;of&nbsp;the&nbsp;bezier&nbsp;curve. |
| x | number | Yes | 0 | X-coordinate&nbsp;of&nbsp;the&nbsp;end&nbsp;point&nbsp;on&nbsp;the&nbsp;bezier&nbsp;curve. |
| y | number | Yes | 0 | Y-coordinate&nbsp;of&nbsp;the&nbsp;end&nbsp;point&nbsp;on&nbsp;the&nbsp;bezier&nbsp;curve. |
| cp1x | number | Yes | 0 | X-coordinate of the first parameter of the bezier curve. |
| cp1y | number | Yes | 0 | Y-coordinate of the first parameter of the bezier curve. |
| cp2x | number | Yes | 0 | X-coordinate of the second parameter of the bezier curve. |
| cp2y | number | Yes | 0 | Y-coordinate of the second parameter of the bezier curve. |
| x | number | Yes | 0 | X-coordinate of the end point on the bezier curve. |
| y | number | Yes | 0 | Y-coordinate of the end point on the bezier curve. |
- Example
......@@ -234,12 +234,12 @@ quadraticCurveTo(cpx: number, cpy: number, x: number ,y: number): void
Draws a quadratic curve on the canvas.
- Parameters
| Name | Type | Mandatory | Default&nbsp;Value | Description |
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| cpx | number | Yes | 0 | X-coordinate&nbsp;of&nbsp;the&nbsp;bezier&nbsp;curve&nbsp;parameter. |
| cpy | number | Yes | 0 | Y-coordinate&nbsp;of&nbsp;the&nbsp;bezier&nbsp;curve&nbsp;parameter. |
| x | number | Yes | 0 | X-coordinate&nbsp;of&nbsp;the&nbsp;end&nbsp;point&nbsp;on&nbsp;the&nbsp;bezier&nbsp;curve. |
| y | number | Yes | 0 | Y-coordinate&nbsp;of&nbsp;the&nbsp;end&nbsp;point&nbsp;on&nbsp;the&nbsp;bezier&nbsp;curve. |
| cpx | number | Yes | 0 | X-coordinate of the bezier curve parameter. |
| cpy | number | Yes | 0 | Y-coordinate of the bezier curve parameter. |
| x | number | Yes | 0 | X-coordinate of the end point on the bezier curve. |
| y | number | Yes | 0 | Y-coordinate of the end point on the bezier curve. |
- Example
......@@ -279,14 +279,14 @@ arc(x: number, y: number, radius: number, startAngle: number, endAngle: number,
Draws an arc on the canvas.
- Parameters
| Name | Type | Mandatory | Default&nbsp;Value | Description |
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| x | number | Yes | 0 | X-coordinate&nbsp;of&nbsp;the&nbsp;center&nbsp;point&nbsp;of&nbsp;the&nbsp;arc. |
| y | number | Yes | 0 | Y-coordinate&nbsp;of&nbsp;the&nbsp;center&nbsp;point&nbsp;of&nbsp;the&nbsp;arc. |
| radius | number | Yes | 0 | Radius&nbsp;of&nbsp;the&nbsp;arc. |
| startAngle | number | Yes | 0 | Start&nbsp;radian&nbsp;of&nbsp;the&nbsp;arc. |
| endAngle | number | Yes | 0 | End&nbsp;radian&nbsp;of&nbsp;the&nbsp;arc. |
| anticlockwise | boolean | No | false | Whether&nbsp;to&nbsp;draw&nbsp;the&nbsp;arc&nbsp;counterclockwise. |
| x | number | Yes | 0 | X-coordinate of the center point of the arc. |
| y | number | Yes | 0 | Y-coordinate of the center point of the arc. |
| radius | number | Yes | 0 | Radius of the arc. |
| startAngle | number | Yes | 0 | Start radian of the arc. |
| endAngle | number | Yes | 0 | End radian of the arc. |
| anticlockwise | boolean | No | false | Whether to draw the arc counterclockwise. |
- Example
......@@ -324,13 +324,13 @@ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void
Draws an arc based on the radius and points on the arc.
- Parameters
| Name | Type | Mandatory | Default&nbsp;Value | Description |
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| x1 | number | Yes | 0 | X-coordinate&nbsp;of&nbsp;the&nbsp;first&nbsp;point&nbsp;on&nbsp;the&nbsp;arc. |
| y1 | number | Yes | 0 | Y-coordinate&nbsp;of&nbsp;the&nbsp;first&nbsp;point&nbsp;on&nbsp;the&nbsp;arc. |
| x2 | number | Yes | 0 | X-coordinate&nbsp;of&nbsp;the&nbsp;second&nbsp;point&nbsp;on&nbsp;the&nbsp;arc. |
| y2 | number | Yes | 0 | Y-coordinate&nbsp;of&nbsp;the&nbsp;second&nbsp;point&nbsp;on&nbsp;the&nbsp;arc. |
| radius | number | Yes | 0 | Radius&nbsp;of&nbsp;the&nbsp;arc. |
| x1 | number | Yes | 0 | X-coordinate of the first point on the arc. |
| y1 | number | Yes | 0 | Y-coordinate of the first point on the arc. |
| x2 | number | Yes | 0 | X-coordinate of the second point on the arc. |
| y2 | number | Yes | 0 | Y-coordinate of the second point on the arc. |
| radius | number | Yes | 0 | Radius of the arc. |
- Example
......@@ -369,16 +369,16 @@ ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number
Draws an ellipse in the specified rectangular region.
- Parameters
| Name | Type | Mandatory | Default&nbsp;Value | Description |
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| x | number | Yes | 0 | X-coordinate&nbsp;of&nbsp;the&nbsp;ellipse&nbsp;center. |
| y | number | Yes | 0 | Y-coordinate&nbsp;of&nbsp;the&nbsp;ellipse&nbsp;center. |
| radiusX | number | Yes | 0 | Ellipse&nbsp;radius&nbsp;on&nbsp;the&nbsp;x-axis. |
| radiusY | number | Yes | 0 | Ellipse&nbsp;radius&nbsp;on&nbsp;the&nbsp;y-axis. |
| rotation | number | Yes | 0 | Rotation&nbsp;angle&nbsp;of&nbsp;the&nbsp;ellipse,&nbsp;in&nbsp;radians. |
| startAngle | number | Yes | 0 | Angle&nbsp;of&nbsp;the&nbsp;start&nbsp;point&nbsp;for&nbsp;drawing&nbsp;the&nbsp;ellipse,&nbsp;in&nbsp;radians. |
| endAngle | number | Yes | 0 | Angle&nbsp;of&nbsp;the&nbsp;end&nbsp;point&nbsp;for&nbsp;drawing&nbsp;the&nbsp;ellipse,&nbsp;in&nbsp;radians. |
| anticlockwise | number | No | 0 | Whether&nbsp;to&nbsp;draw&nbsp;the&nbsp;ellipse&nbsp;in&nbsp;the&nbsp;counterclockwise&nbsp;direction.&nbsp;The&nbsp;value&nbsp;**0**&nbsp;means&nbsp;to&nbsp;draw&nbsp;the&nbsp;ellipse&nbsp;in&nbsp;the&nbsp;clockwise&nbsp;direction,&nbsp;and&nbsp;**1**&nbsp;means&nbsp;to&nbsp;draw&nbsp;the&nbsp;ellipse&nbsp;in&nbsp;the&nbsp;counterclockwise&nbsp;direction.&nbsp;This&nbsp;parameter&nbsp;is&nbsp;optional.&nbsp;The&nbsp;default&nbsp;value&nbsp;is&nbsp;**0**. |
| x | number | Yes | 0 | X-coordinate of the ellipse center. |
| y | number | Yes | 0 | Y-coordinate of the ellipse center. |
| radiusX | number | Yes | 0 | Ellipse radius on the x-axis. |
| radiusY | number | Yes | 0 | Ellipse radius on the y-axis. |
| rotation | number | Yes | 0 | Rotation angle of the ellipse, in radians. |
| startAngle | number | Yes | 0 | Angle of the start point for drawing the ellipse, in radians. |
| endAngle | number | Yes | 0 | Angle of the end point for drawing the ellipse, in radians. |
| anticlockwise | number | No | 0 | Whether to draw the ellipse in the counterclockwise direction. The value **0** means to draw the ellipse in the clockwise direction, and **1** means to draw the ellipse in the counterclockwise direction. This parameter is optional. The default value is **0**. |
- Example
......@@ -417,12 +417,12 @@ rect(x: number, y: number, width: number, height: number): void
Creates a rectangle.
- Parameters
| Name | Type | Mandatory | Default&nbsp;Value | Description |
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| x | number | Yes | 0 | X-coordinate&nbsp;of&nbsp;the&nbsp;upper&nbsp;left&nbsp;corner&nbsp;of&nbsp;the&nbsp;rectangle. |
| y | number | Yes | 0 | Y-coordinate&nbsp;of&nbsp;the&nbsp;upper&nbsp;left&nbsp;corner&nbsp;of&nbsp;the&nbsp;rectangle. |
| width | number | Yes | 0 | Width&nbsp;of&nbsp;the&nbsp;rectangle. |
| height | number | Yes | 0 | Height&nbsp;of&nbsp;the&nbsp;rectangle. |
| x | number | Yes | 0 | X-coordinate of the upper left corner of the rectangle. |
| y | number | Yes | 0 | Y-coordinate of the upper left corner of the rectangle. |
| width | number | Yes | 0 | Width of the rectangle. |
| height | number | Yes | 0 | Height of the rectangle. |
- Example
......
# AlphabetIndexer
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
......@@ -23,41 +23,41 @@ None
AlphabetIndexer(value: {arrayValue : Array&lt;string&gt;, selected : number})
- Parameters
| Name | Type | Mandatory | Default&nbsp;Value | Description |
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| arrayValue | Array&lt;string&gt; | Yes | - | Array&nbsp;of&nbsp;strings&nbsp;to&nbsp;be&nbsp;displayed&nbsp;in&nbsp;the&nbsp;alphabetic&nbsp;index&nbsp;bar. |
| selected | number | Yes | - | ID&nbsp;of&nbsp;a&nbsp;selected&nbsp;item. |
| arrayValue | Array&lt;string&gt; | Yes | - | Array of strings to be displayed in the alphabetic index bar. |
| selected | number | Yes | - | ID of a selected item. |
## Attributes
| Name | Type | Description |
| -------- | -------- | -------- |
| selectedColor | Color | Font&nbsp;color&nbsp;of&nbsp;the&nbsp;selected&nbsp;text. |
| popupColor | Color | Font&nbsp;color&nbsp;of&nbsp;the&nbsp;pop-up&nbsp;text. |
| selectedBackgroundColor | Color | Background&nbsp;color&nbsp;of&nbsp;the&nbsp;selected&nbsp;text. |
| popupBackground | Color | Background&nbsp;color&nbsp;of&nbsp;the&nbsp;pop-up&nbsp;text. |
| usingPopup | boolean | Whether&nbsp;to&nbsp;use&nbsp;pop-up&nbsp;text. |
| selectedFont | {<br/>size?:&nbsp;number,<br/>weight?:&nbsp;FontWeight,<br/>family?:&nbsp;string,<br/>style?:&nbsp;FontStyle<br/>} | Font&nbsp;style&nbsp;of&nbsp;the&nbsp;selected&nbsp;text. |
| popupFont | {<br/>size?:&nbsp;number,<br/>weight?:&nbsp;FontWeight,<br/>family?:&nbsp;string,<br/>style?:&nbsp;FontStyle<br/>} | Font&nbsp;style&nbsp;of&nbsp;the&nbsp;pop-up&nbsp;text. |
| font | {<br/>size?:&nbsp;number,<br/>weight?:&nbsp;FontWeight,<br/>family?:&nbsp;string,<br/>style?:&nbsp;FontStyle<br/>} | Default&nbsp;font&nbsp;style&nbsp;of&nbsp;the&nbsp;alphabetic&nbsp;index&nbsp;bar. |
| itemSize | Length | Size&nbsp;of&nbsp;an&nbsp;item&nbsp;in&nbsp;the&nbsp;alphabetic&nbsp;index&nbsp;bar.&nbsp;The&nbsp;item&nbsp;is&nbsp;a&nbsp;square,&nbsp;and&nbsp;the&nbsp;side&nbsp;length&nbsp;needs&nbsp;to&nbsp;be&nbsp;set. |
| alignStyle | IndexerAlign | Alignment&nbsp;style&nbsp;of&nbsp;the&nbsp;alphabetic&nbsp;index&nbsp;bar.&nbsp;Left&nbsp;alignment&nbsp;and&nbsp;right&nbsp;alignment&nbsp;are&nbsp;supported.&nbsp;The&nbsp;alignment&nbsp;style&nbsp;affects&nbsp;the&nbsp;position&nbsp;of&nbsp;the&nbsp;pop-up&nbsp;window. |
| selectedColor | Color | Font color of the selected text. |
| popupColor | Color | Font color of the pop-up text. |
| selectedBackgroundColor | Color | Background color of the selected text. |
| popupBackground | Color | Background color of the pop-up text. |
| usingPopup | boolean | Whether to use pop-up text. |
| selectedFont | {<br/>size?: number,<br/>weight?: FontWeight,<br/>family?: string,<br/>style?: FontStyle<br/>} | Font style of the selected text. |
| popupFont | {<br/>size?: number,<br/>weight?: FontWeight,<br/>family?: string,<br/>style?: FontStyle<br/>} | Font style of the pop-up text. |
| font | {<br/>size?: number,<br/>weight?: FontWeight,<br/>family?: string,<br/>style?: FontStyle<br/>} | Default font style of the alphabetic index bar. |
| itemSize | Length | Size of an item in the alphabetic index bar. The item is a square, and the side length needs to be set. |
| alignStyle | IndexerAlign | Alignment style of the alphabetic index bar. Left alignment and right alignment are supported. The alignment style affects the position of the pop-up window. |
- IndexerAlign enums
| Name | Description |
| -------- | -------- |
| Left | The&nbsp;pop-up&nbsp;window&nbsp;is&nbsp;displayed&nbsp;on&nbsp;the&nbsp;right&nbsp;of&nbsp;the&nbsp;alphabetic&nbsp;indexer&nbsp;bar. |
| Right | The&nbsp;pop-up&nbsp;window&nbsp;is&nbsp;displayed&nbsp;on&nbsp;the&nbsp;left&nbsp;of&nbsp;the&nbsp;alphabetic&nbsp;indexer&nbsp;bar. |
| Left | The pop-up window is displayed on the right of the alphabetic indexer bar. |
| Right | The pop-up window is displayed on the left of the alphabetic indexer bar. |
## Events
| Name | Description |
| -------- | -------- |
| onSelected(index:&nbsp;number)&nbsp;=&gt;&nbsp;void | Callback&nbsp;invoked&nbsp;when&nbsp;an&nbsp;item&nbsp;in&nbsp;the&nbsp;alphabetic&nbsp;indexer&nbsp;bar&nbsp;is&nbsp;selected. |
| onRequestPopupData(callback:&nbsp;(index:&nbsp;number)&nbsp;=&gt;&nbsp;Array&lt;string&gt;)<sup>8+</sup> | Invoked&nbsp;when&nbsp;a&nbsp;request&nbsp;for&nbsp;displaying&nbsp;content&nbsp;in&nbsp;the&nbsp;index&nbsp;prompt&nbsp;window&nbsp;is&nbsp;sent&nbsp;when&nbsp;an&nbsp;item&nbsp;in&nbsp;the&nbsp;alphabetic&nbsp;indexer&nbsp;bar&nbsp;is&nbsp;selected.<br/>The&nbsp;return&nbsp;value&nbsp;is&nbsp;a&nbsp;string&nbsp;array&nbsp;corresponding&nbsp;to&nbsp;the&nbsp;indexes.&nbsp;The&nbsp;string&nbsp;array&nbsp;is&nbsp;displayed&nbsp;vertically&nbsp;in&nbsp;the&nbsp;pop-up&nbsp;window.&nbsp;It&nbsp;can&nbsp;display&nbsp;up&nbsp;to&nbsp;five&nbsp;strings&nbsp;at&nbsp;a&nbsp;time&nbsp;and&nbsp;allows&nbsp;scrolling. |
| onPopupSelected(callback:&nbsp;(index:&nbsp;number)&nbsp;=&gt;&nbsp;void)<sup>8+</sup> | Invoked&nbsp;when&nbsp;an&nbsp;item&nbsp;in&nbsp;the&nbsp;index&nbsp;pop-up&nbsp;window&nbsp;is&nbsp;selected. |
| onSelected(index: number) =&gt; void | Callback invoked when an item in the alphabetic indexer bar is selected. |
| onRequestPopupData(callback: (index: number) =&gt; Array&lt;string&gt;)<sup>8+</sup> | Invoked when a request for displaying content in the index prompt window is sent when an item in the alphabetic indexer bar is selected.<br/>The return value is a string array corresponding to the indexes. The string array is displayed vertically in the pop-up window. It can display up to five strings at a time and allows scrolling. |
| onPopupSelected(callback: (index: number) =&gt; void)<sup>8+</sup> | Invoked when an item in the index pop-up window is selected. |
## Example
......
# Badge
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
......@@ -23,38 +23,38 @@ This component supports only one child component.
Badge(value: {count: number, position?: BadgePosition, maxCount?: number, style?: BadgeStyle})
- Parameters
| Name | Type | Mandatory | Default&nbsp;Value | Description |
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| count | number | Yes | - | Number&nbsp;of&nbsp;prompt&nbsp;messages. |
| position | BadgePosition | No | BadgePosition.RightTop | Position&nbsp;to&nbsp;display&nbsp;the&nbsp;badge&nbsp;relative&nbsp;to&nbsp;the&nbsp;parent&nbsp;component. |
| maxCount | number | No | 99 | Maximum&nbsp;number&nbsp;of&nbsp;prompt&nbsp;messages.&nbsp;When&nbsp;the&nbsp;maximum&nbsp;number&nbsp;is&nbsp;reached,&nbsp;only&nbsp;**maxCount+**&nbsp;is&nbsp;displayed. |
| style | BadgeStyle | No | - | Style&nbsp;of&nbsp;the&nbsp;**&lt;Badge&gt;**&nbsp;component,&nbsp;including&nbsp;the&nbsp;text&nbsp;color,&nbsp;text&nbsp;size,&nbsp;badge&nbsp;color,&nbsp;and&nbsp;badge&nbsp;size. |
| count | number | Yes | - | Number of prompt messages. |
| position | BadgePosition | No | BadgePosition.RightTop | Position to display the badge relative to the parent component. |
| maxCount | number | No | 99 | Maximum number of prompt messages. When the maximum number is reached, only **maxCount+** is displayed. |
| style | BadgeStyle | No | - | Style of the **&lt;Badge&gt;** component, including the text color, text size, badge color, and badge size. |
Badge(value: {value: string, position?: BadgePosition, style?: BadgeStyle})
Creates a **&lt;Badge&gt;** component based on the string.
- Parameters
| Name | Type | Mandatory | Default&nbsp;Value | Description |
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| value | string | Yes | - | String&nbsp;of&nbsp;the&nbsp;content&nbsp;to&nbsp;prompt. |
| position | BadgePosition | No | BadgePosition.RightTop | Display&nbsp;position&nbsp;of&nbsp;the&nbsp;badge. |
| style | BadgeStyle | No | - | Style&nbsp;of&nbsp;the&nbsp;**&lt;Badge&gt;**&nbsp;component,&nbsp;including&nbsp;the&nbsp;text&nbsp;color,&nbsp;text&nbsp;size,&nbsp;badge&nbsp;color,&nbsp;and&nbsp;badge&nbsp;size. |
| value | string | Yes | - | String of the content to prompt. |
| position | BadgePosition | No | BadgePosition.RightTop | Display position of the badge. |
| style | BadgeStyle | No | - | Style of the **&lt;Badge&gt;** component, including the text color, text size, badge color, and badge size. |
- BadgeStyle object
| Name | Type | Mandatory | Default&nbsp;Value | Description |
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| color | Color | No | Color.White | Text&nbsp;color. |
| fontSize | number&nbsp;\|&nbsp;string | No | 10 | Text&nbsp;size. |
| badgeSize | number&nbsp;\|&nbsp;string | Yes | - | Size&nbsp;of&nbsp;the&nbsp;badge. |
| badgeColor | Color | No | Color.Red | Color&nbsp;of&nbsp;the&nbsp;badge. |
| color | Color | No | Color.White | Text color. |
| fontSize | number \| string | No | 10 | Text size. |
| badgeSize | number \| string | Yes | - | Size of the badge. |
| badgeColor | Color | No | Color.Red | Color of the badge. |
- BadgePosition enums
| Name | Description |
| -------- | -------- |
| Right | The&nbsp;badge&nbsp;is&nbsp;vertically&nbsp;centered&nbsp;on&nbsp;the&nbsp;right&nbsp;of&nbsp;the&nbsp;parent&nbsp;component. |
| RightTop | The&nbsp;badge&nbsp;is&nbsp;displayed&nbsp;in&nbsp;the&nbsp;upper&nbsp;right&nbsp;corner&nbsp;of&nbsp;the&nbsp;parent&nbsp;component. |
| Left | The&nbsp;badge&nbsp;is&nbsp;vertically&nbsp;centered&nbsp;on&nbsp;the&nbsp;left&nbsp;of&nbsp;the&nbsp;parent&nbsp;component. |
| Right | The badge is vertically centered on the right of the parent component. |
| RightTop | The badge is displayed in the upper right corner of the parent component. |
| Left | The badge is vertically centered on the left of the parent component. |
## Example
......
# Column
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
......@@ -24,24 +24,24 @@ Column(value:{space?: Length})
- Parameters
| Name | Type | Mandatory | Default&nbsp;Value | Description |
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| space | Length | No | 0 | Space&nbsp;between&nbsp;any&nbsp;two&nbsp;adjacent&nbsp;child&nbsp;components&nbsp;in&nbsp;the&nbsp;vertical&nbsp;layout. |
| space | Length | No | 0 | Space between any two adjacent child components in the vertical layout. |
## Attributes
| Name | Type | Default&nbsp;Value | Description |
| Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- |
| alignItems | HorizontalAlign | HorizontalAlign.Center | Alignment&nbsp;mode&nbsp;of&nbsp;child&nbsp;components&nbsp;in&nbsp;the&nbsp;horizontal&nbsp;direction. |
| alignItems | HorizontalAlign | HorizontalAlign.Center | Alignment mode of child components in the horizontal direction. |
| justifyContent<sup>8+</sup> | [FlexAlign](ts-container-flex.md) | FlexAlign.Start | Alignment mode of child components in the vertical direction. |
- HorizontalAlign enums
| Name | Description |
| -------- | -------- |
| Start | Aligned&nbsp;with&nbsp;the&nbsp;start&nbsp;edge&nbsp;in&nbsp;the&nbsp;same&nbsp;direction&nbsp;as&nbsp;the&nbsp;language&nbsp;in&nbsp;use. |
| Center | Center&nbsp;alignment.&nbsp;This&nbsp;is&nbsp;the&nbsp;default&nbsp;alignment&nbsp;mode. |
| End | Aligned&nbsp;with&nbsp;the&nbsp;end&nbsp;edge&nbsp;in&nbsp;the&nbsp;same&nbsp;direction&nbsp;as&nbsp;the&nbsp;language&nbsp;in&nbsp;use. |
| Start | Aligned with the start edge in the same direction as the language in use. |
| Center | Center alignment. This is the default alignment mode. |
| End | Aligned with the end edge in the same direction as the language in use. |
## Example
......
# ColumnSplit
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
......@@ -27,9 +27,9 @@ ColumnSplit()
| Name | Type | Description |
| -------- | -------- | -------- |
| resizeable | boolean | Whether&nbsp;the&nbsp;divider&nbsp;can&nbsp;be&nbsp;dragged.&nbsp;The&nbsp;default&nbsp;value&nbsp;is&nbsp;**false**. |
| resizeable | boolean | Whether the divider can be dragged. The default value is **false**. |
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> Similar to **&lt;RowSplit&gt;**, the divider of **&lt;ColumnSplit&gt;** can be dragged to a position that just fully holds a component.
......
# Counter
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
......@@ -29,8 +29,8 @@ Universal events and gestures are not supported. Only the events listed below ar
| Name | Description |
| -------- | -------- |
| onInc(event:&nbsp;()&nbsp;=&gt;&nbsp;void) | Event&nbsp;indicating&nbsp;that&nbsp;the&nbsp;number&nbsp;of&nbsp;monitored&nbsp;objects&nbsp;is&nbsp;increased. |
| onDec(event:&nbsp;()&nbsp;=&gt;&nbsp;void) | Event&nbsp;indicating&nbsp;that&nbsp;the&nbsp;number&nbsp;of&nbsp;monitored&nbsp;objects&nbsp;is&nbsp;decreased. |
| onInc(event: () =&gt; void) | Event indicating that the number of monitored objects is increased. |
| onDec(event: () =&gt; void) | Event indicating that the number of monitored objects is decreased. |
## Example
......
# Flex
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
......@@ -25,38 +25,38 @@ Flex(options?: { direction?: FlexDirection, wrap?: FlexWrap, justifyContent?: F
Creates a standard **&lt;Flex&gt;** component.
- Parameters
| Name | Type | Mandatory | Default&nbsp;Value | Description |
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| direction | FlexDirection | No | FlexDirection.Row | Direction&nbsp;in&nbsp;which&nbsp;child&nbsp;components&nbsp;are&nbsp;arranged&nbsp;in&nbsp;the&nbsp;**&lt;Flex&gt;**&nbsp;component,&nbsp;that&nbsp;is,&nbsp;the&nbsp;direction&nbsp;of&nbsp;the&nbsp;main&nbsp;axis. |
| wrap | FlexWrap | No | FlexWrap.NoWrap | Whether&nbsp;the&nbsp;**&lt;Flex&gt;**&nbsp;component&nbsp;has&nbsp;a&nbsp;single&nbsp;line&nbsp;or&nbsp;multiple&nbsp;lines. |
| justifyContent | FlexAlign | No | FlexAlign.Start | Alignment&nbsp;mode&nbsp;of&nbsp;the&nbsp;child&nbsp;components&nbsp;in&nbsp;the&nbsp;**&lt;Flex&gt;**&nbsp;component&nbsp;along&nbsp;the&nbsp;main&nbsp;axis. |
| alignItems | [ItemAlign](ts-appendix-enums.md#itemalign-enums) | No | ItemAlign.Stretch | Alignment&nbsp;mode&nbsp;of&nbsp;the&nbsp;child&nbsp;components&nbsp;in&nbsp;the&nbsp;**&lt;Flex&gt;**&nbsp;component&nbsp;along&nbsp;the&nbsp;cross&nbsp;axis. |
| alignContent | FlexAlign | No | FlexAlign.Start | Alignment&nbsp;mode&nbsp;of&nbsp;the&nbsp;child&nbsp;components&nbsp;in&nbsp;a&nbsp;multi-line&nbsp;**&lt;Flex&gt;**&nbsp;component&nbsp;along&nbsp;the&nbsp;cross&nbsp;axis.&nbsp;This&nbsp;parameter&nbsp;is&nbsp;valid&nbsp;only&nbsp;when&nbsp;**wrap**&nbsp;is&nbsp;set&nbsp;to&nbsp;**Wrap**&nbsp;or&nbsp;**WrapReverse**. |
| direction | FlexDirection | No | FlexDirection.Row | Direction in which child components are arranged in the **&lt;Flex&gt;** component, that is, the direction of the main axis. |
| wrap | FlexWrap | No | FlexWrap.NoWrap | Whether the **&lt;Flex&gt;** component has a single line or multiple lines. |
| justifyContent | FlexAlign | No | FlexAlign.Start | Alignment mode of the child components in the **&lt;Flex&gt;** component along the main axis. |
| alignItems | [ItemAlign](ts-appendix-enums.md#itemalign-enums) | No | ItemAlign.Stretch | Alignment mode of the child components in the **&lt;Flex&gt;** component along the cross axis. |
| alignContent | FlexAlign | No | FlexAlign.Start | Alignment mode of the child components in a multi-line **&lt;Flex&gt;** component along the cross axis. This parameter is valid only when **wrap** is set to **Wrap** or **WrapReverse**. |
- FlexDirection enums
| Name | Description |
| -------- | -------- |
| Row | The&nbsp;child&nbsp;components&nbsp;are&nbsp;arranged&nbsp;in&nbsp;the&nbsp;same&nbsp;direction&nbsp;as&nbsp;the&nbsp;main&nbsp;axis&nbsp;runs&nbsp;along&nbsp;the&nbsp;rows. |
| RowReverse | The&nbsp;child&nbsp;components&nbsp;are&nbsp;arranged&nbsp;opposite&nbsp;to&nbsp;the&nbsp;**Row**&nbsp;direction. |
| Column | The&nbsp;child&nbsp;components&nbsp;are&nbsp;arranged&nbsp;in&nbsp;the&nbsp;same&nbsp;direction&nbsp;as&nbsp;the&nbsp;main&nbsp;axis&nbsp;runs&nbsp;down&nbsp;the&nbsp;columns. |
| ColumnReverse | The&nbsp;child&nbsp;components&nbsp;are&nbsp;arranged&nbsp;opposite&nbsp;to&nbsp;the&nbsp;**Column**&nbsp;direction. |
| Row | The child components are arranged in the same direction as the main axis runs along the rows. |
| RowReverse | The child components are arranged opposite to the **Row** direction. |
| Column | The child components are arranged in the same direction as the main axis runs down the columns. |
| ColumnReverse | The child components are arranged opposite to the **Column** direction. |
- FlexWrap enums
| Name | Description |
| -------- | -------- |
| NoWrap | The&nbsp;child&nbsp;components&nbsp;in&nbsp;the&nbsp;**&lt;Flex&gt;**&nbsp;component&nbsp;are&nbsp;arranged&nbsp;in&nbsp;a&nbsp;single&nbsp;line,&nbsp;and&nbsp;they&nbsp;may&nbsp;overflow. |
| Wrap | The&nbsp;child&nbsp;components&nbsp;in&nbsp;the&nbsp;**&lt;Flex&gt;**&nbsp;component&nbsp;are&nbsp;arranged&nbsp;in&nbsp;multiple&nbsp;lines,&nbsp;and&nbsp;they&nbsp;may&nbsp;overflow. |
| WrapReverse | The&nbsp;child&nbsp;components&nbsp;in&nbsp;the&nbsp;**&lt;Flex&gt;**&nbsp;component&nbsp;are&nbsp;reversely&nbsp;arranged&nbsp;in&nbsp;multiple&nbsp;lines,&nbsp;and&nbsp;they&nbsp;may&nbsp;overflow. |
| NoWrap | The child components in the **&lt;Flex&gt;** component are arranged in a single line, and they may overflow. |
| Wrap | The child components in the **&lt;Flex&gt;** component are arranged in multiple lines, and they may overflow. |
| WrapReverse | The child components in the **&lt;Flex&gt;** component are reversely arranged in multiple lines, and they may overflow. |
- FlexAlign enums
| Name | Description |
| -------- | -------- |
| Start | The&nbsp;child&nbsp;components&nbsp;are&nbsp;aligned&nbsp;with&nbsp;the&nbsp;start&nbsp;edge&nbsp;of&nbsp;the&nbsp;main&nbsp;axis.&nbsp;The&nbsp;first&nbsp;component&nbsp;is&nbsp;aligned&nbsp;with&nbsp;the&nbsp;main-start,&nbsp;and&nbsp;subsequent&nbsp;components&nbsp;are&nbsp;aligned&nbsp;with&nbsp;the&nbsp;previous&nbsp;one. |
| Center | The&nbsp;child&nbsp;components&nbsp;are&nbsp;aligned&nbsp;in&nbsp;the&nbsp;center&nbsp;of&nbsp;the&nbsp;main&nbsp;axis.&nbsp;The&nbsp;space&nbsp;between&nbsp;the&nbsp;first&nbsp;component&nbsp;and&nbsp;the&nbsp;main-start&nbsp;is&nbsp;the&nbsp;same&nbsp;as&nbsp;that&nbsp;between&nbsp;the&nbsp;last&nbsp;component&nbsp;and&nbsp;the&nbsp;main-end. |
| End | The&nbsp;child&nbsp;components&nbsp;are&nbsp;aligned&nbsp;with&nbsp;the&nbsp;end&nbsp;edge&nbsp;of&nbsp;the&nbsp;main&nbsp;axis.&nbsp;The&nbsp;last&nbsp;component&nbsp;is&nbsp;aligned&nbsp;with&nbsp;the&nbsp;main-end,&nbsp;and&nbsp;other&nbsp;components&nbsp;are&nbsp;aligned&nbsp;with&nbsp;the&nbsp;next&nbsp;one. |
| SpaceBetween | The&nbsp;child&nbsp;components&nbsp;are&nbsp;evenly&nbsp;distributed&nbsp;along&nbsp;the&nbsp;main&nbsp;axis.&nbsp;The&nbsp;first&nbsp;component&nbsp;is&nbsp;aligned&nbsp;with&nbsp;the&nbsp;main-start,&nbsp;the&nbsp;last&nbsp;component&nbsp;is&nbsp;aligned&nbsp;with&nbsp;the&nbsp;main-end,&nbsp;and&nbsp;the&nbsp;remaining&nbsp;components&nbsp;are&nbsp;distributed&nbsp;so&nbsp;that&nbsp;the&nbsp;space&nbsp;between&nbsp;any&nbsp;two&nbsp;adjacent&nbsp;components&nbsp;is&nbsp;the&nbsp;same. |
| SpaceAround | The&nbsp;child&nbsp;components&nbsp;are&nbsp;evenly&nbsp;distributed&nbsp;along&nbsp;the&nbsp;main&nbsp;axis,&nbsp;with&nbsp;a&nbsp;half-size&nbsp;space&nbsp;on&nbsp;either&nbsp;end.&nbsp;The&nbsp;space&nbsp;between&nbsp;any&nbsp;two&nbsp;adjacent&nbsp;components&nbsp;is&nbsp;the&nbsp;same.&nbsp;The&nbsp;space&nbsp;between&nbsp;the&nbsp;first&nbsp;component&nbsp;and&nbsp;main-start,&nbsp;and&nbsp;that&nbsp;between&nbsp;the&nbsp;last&nbsp;component&nbsp;and&nbsp;cross-main&nbsp;are&nbsp;both&nbsp;half&nbsp;the&nbsp;size&nbsp;of&nbsp;the&nbsp;space&nbsp;between&nbsp;two&nbsp;adjacent&nbsp;components. |
| SpaceEvenly | The&nbsp;child&nbsp;components&nbsp;are&nbsp;equally&nbsp;distributed&nbsp;along&nbsp;the&nbsp;main&nbsp;axis.&nbsp;The&nbsp;space&nbsp;between&nbsp;the&nbsp;first&nbsp;component&nbsp;and&nbsp;main-start,&nbsp;the&nbsp;space&nbsp;between&nbsp;the&nbsp;last&nbsp;component&nbsp;and&nbsp;main-end,&nbsp;and&nbsp;the&nbsp;space&nbsp;between&nbsp;two&nbsp;adjacent&nbsp;components&nbsp;are&nbsp;the&nbsp;same. |
| 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. |
| Center | The child components are aligned in the center of the main axis. The space between the first component and the main-start is the same as that between the last component and the main-end. |
| End | The child components are aligned with the end edge of the main axis. The last component is aligned with the main-end, and other components are aligned with the next one. |
| SpaceBetween | The child components are evenly distributed along the main axis. The first component is aligned with the main-start, the last component is aligned with the main-end, and the remaining components are distributed so that the space between any two adjacent components is the same. |
| SpaceAround | The child components are evenly distributed along the main axis, with a half-size space on either end. The space between any two adjacent components is the same. The space between the first component and main-start, and that between the last component and cross-main are both half the size of the space between two adjacent components. |
| SpaceEvenly | The child components are equally distributed along the main axis. The space between the first component and main-start, the space between the last component and main-end, and the space between two adjacent components are the same. |
## Example
......
# Grid
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
......@@ -25,18 +25,18 @@ Grid()
## Attributes
| Name | Type | Default&nbsp;Value | Description |
| Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- |
| columnsTemplate | string | '1fr' | Number&nbsp;of&nbsp;columns&nbsp;in&nbsp;the&nbsp;current&nbsp;grid&nbsp;layout.&nbsp;If&nbsp;this&nbsp;parameter&nbsp;is&nbsp;not&nbsp;set,&nbsp;one&nbsp;column&nbsp;is&nbsp;used&nbsp;by&nbsp;default.&nbsp;For&nbsp;example,&nbsp;'1fr&nbsp;1fr&nbsp;2fr'&nbsp;divides&nbsp;the&nbsp;component&nbsp;into&nbsp;three&nbsp;columns,&nbsp;with&nbsp;four&nbsp;equal&nbsp;parts.&nbsp;The&nbsp;first&nbsp;column&nbsp;occupies&nbsp;one&nbsp;part,&nbsp;the&nbsp;second&nbsp;column&nbsp;occupies&nbsp;one&nbsp;part,&nbsp;and&nbsp;the&nbsp;third&nbsp;column&nbsp;occupies&nbsp;two&nbsp;parts. |
| rowsTemplate | string | '1fr' | Number&nbsp;of&nbsp;rows&nbsp;in&nbsp;the&nbsp;current&nbsp;grid&nbsp;layout.&nbsp;If&nbsp;this&nbsp;parameter&nbsp;is&nbsp;not&nbsp;set,&nbsp;one&nbsp;row&nbsp;is&nbsp;used&nbsp;by&nbsp;default.&nbsp;For&nbsp;example,&nbsp;'1fr&nbsp;1fr&nbsp;2fr'&nbsp;divides&nbsp;the&nbsp;component&nbsp;into&nbsp;three&nbsp;rows.&nbsp;The&nbsp;width&nbsp;allowed&nbsp;by&nbsp;the&nbsp;parent&nbsp;component&nbsp;is&nbsp;divided&nbsp;into&nbsp;four&nbsp;equal&nbsp;parts.&nbsp;The&nbsp;first&nbsp;row&nbsp;occupies&nbsp;one&nbsp;part,&nbsp;the&nbsp;second&nbsp;row&nbsp;occupies&nbsp;one&nbsp;part,&nbsp;and&nbsp;the&nbsp;third&nbsp;row&nbsp;occupies&nbsp;two&nbsp;parts. |
| columnsGap | Length | 0 | Spacing&nbsp;between&nbsp;columns. |
| rowsGap | Length | 0 | Spacing&nbsp;between&nbsp;rows. |
| editMode<sup>8+</sup> | boolean | false | Whether&nbsp;to&nbsp;enter&nbsp;editing&nbsp;mode.&nbsp;In&nbsp;editing&nbsp;mode,&nbsp;you&nbsp;can&nbsp;drag&nbsp;the&nbsp;**&lt;[GridItem](ts-container-griditem.md)&gt;**&nbsp;in&nbsp;the&nbsp;**&lt;Gird&gt;**&nbsp;component. |
| columnsTemplate | string | '1fr' | Number of columns in the current grid layout. If this parameter is not set, one column is used by default. For example, '1fr 1fr 2fr' divides the component into three columns, with four equal parts. The first column occupies one part, the second column occupies one part, and the third column occupies two parts. |
| rowsTemplate | string | '1fr' | Number of rows in the current grid layout. If this parameter is not set, one row is used by default. For example, '1fr 1fr 2fr' divides the component into three rows. The width allowed by the parent component is divided into four equal parts. The first row occupies one part, the second row occupies one part, and the third row occupies two parts. |
| columnsGap | Length | 0 | Spacing between columns. |
| rowsGap | Length | 0 | Spacing between rows. |
| editMode<sup>8+</sup> | boolean | false | Whether to enter editing mode. In editing mode, you can drag the **&lt;[GridItem](ts-container-griditem.md)&gt;** in the **&lt;Gird&gt;** component. |
| layoutDirection<sup>8+</sup> | [LayoutDirection](ts-appendix-enums.md#layoutdirection-enums) | LayoutDirection.Row | Main axis direction of the layout. The options are as follows:- **LayoutDirection.Row**: Horizontal layout, where the child components are arranged in the same direction as the main axis runs along the rows.- **LayoutDirection.Column**: Vertical layout, where the child components are arranged in the same direction as the main axis runs down the columns. |
| maxCount<sup>8+</sup> | number | 1 | Maximum&nbsp;number&nbsp;of&nbsp;rows&nbsp;that&nbsp;can&nbsp;be&nbsp;displayed. |
| minCount<sup>8+</sup> | number | 1 | Minimum&nbsp;number&nbsp;of&nbsp;rows&nbsp;that&nbsp;can&nbsp;be&nbsp;displayed. |
| cellLength<sup>8+</sup> | number | 0 | Fixed&nbsp;height&nbsp;per&nbsp;row. |
| multiSelectable<sup>8+</sup> | boolean | false | Whether&nbsp;to&nbsp;enable&nbsp;mouse&nbsp;frame&nbsp;selection.<br/>-&nbsp;**false**:&nbsp;The&nbsp;mouse&nbsp;frame&nbsp;selection&nbsp;is&nbsp;disabled.<br/>-&nbsp;**true**:&nbsp;The&nbsp;mouse&nbsp;frame&nbsp;selection&nbsp;is&nbsp;disabled. |
| maxCount<sup>8+</sup> | number | 1 | Maximum number of rows that can be displayed. |
| minCount<sup>8+</sup> | number | 1 | Minimum number of rows that can be displayed. |
| cellLength<sup>8+</sup> | number | 0 | Fixed height per row. |
| multiSelectable<sup>8+</sup> | boolean | false | Whether to enable mouse frame selection.<br/>- **false**: The mouse frame selection is disabled.<br/>- **true**: The mouse frame selection is disabled. |
| edgeEffection<sup>8+</sup> | EdgeEffect | EdgeEffect.Spring | Edge effect. For details, see **EdgeEffect**. |
- EdgeEffect enums
......@@ -50,7 +50,7 @@ Grid()
| Name | Description |
| -------- | -------- |
| onScrollIndex(first:&nbsp;number)&nbsp;=&gt;&nbsp;void | Triggered&nbsp;when&nbsp;the&nbsp;start&nbsp;item&nbsp;of&nbsp;the&nbsp;grid&nbsp;changes. |
| onScrollIndex(first: number) =&gt; void | Triggered when the start item of the grid changes. |
## Example
......
# GridContainer
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
......@@ -23,21 +23,21 @@ This component can contain child components.
GridContainer(options?: { columns?: number | 'auto', sizeType?: SizeType, gutter?: Length, margin?: Length})
- Parameter
| Name | Type | Mandatory | Default&nbsp;Value | Description |
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| columns | number&nbsp;\|&nbsp;'auto' | No | 'auto' | Total&nbsp;number&nbsp;of&nbsp;columns&nbsp;in&nbsp;the&nbsp;current&nbsp;layout. |
| sizeType | SizeType | No | SizeType.Auto | Device&nbsp;size&nbsp;type. |
| gutter | Length | No | - | Gutter&nbsp;of&nbsp;the&nbsp;grid&nbsp;layout. |
| margin | Length | No | - | Margin&nbsp;of&nbsp;the&nbsp;grid&nbsp;layout. |
| columns | number \| 'auto' | No | 'auto' | Total number of columns in the current layout. |
| sizeType | SizeType | No | SizeType.Auto | Device size type. |
| gutter | Length | No | - | Gutter of the grid layout. |
| margin | Length | No | - | Margin of the grid layout. |
- SizeType enums
| Name | Description |
| -------- | -------- |
| XS | Device&nbsp;of&nbsp;the&nbsp;minimum&nbsp;size. |
| SM | Small-sized&nbsp;device. |
| MD | Medium-sized&nbsp;device. |
| LG | Large-sized&nbsp;device. |
| Auto | Auto.&nbsp;The&nbsp;size&nbsp;type&nbsp;is&nbsp;selected&nbsp;based&nbsp;on&nbsp;the&nbsp;device&nbsp;type. |
| XS | Device of the minimum size. |
| SM | Small-sized device. |
| MD | Medium-sized device. |
| LG | Large-sized device. |
| Auto | Auto. The size type is selected based on the device type. |
## Attributes
......
# GridItem
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
......@@ -13,7 +13,7 @@ The **&lt;GridItem&gt;** component provides a single item in a grid.
None
## Child Component
## Child Components
This component can contain child components.
......@@ -25,26 +25,26 @@ GridItem()
## Attributes
| Name | Type | Default&nbsp;Value | Description |
| Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- |
| rowStart | number | - | Start&nbsp;row&nbsp;number&nbsp;of&nbsp;the&nbsp;component. |
| rowEnd | number | - | End&nbsp;row&nbsp;number&nbsp;of&nbsp;the&nbsp;component. |
| columnStart | number | - | Start&nbsp;column&nbsp;number&nbsp;of&nbsp;the&nbsp;component. |
| columnEnd | number | - | End&nbsp;column&nbsp;number&nbsp;of&nbsp;the&nbsp;component. |
| forceRebuild | boolean | false | Whether&nbsp;to&nbsp;re-create&nbsp;this&nbsp;node&nbsp;when&nbsp;the&nbsp;component&nbsp;is&nbsp;being&nbsp;built. |
| selectable<sup>8+</sup> | boolean | true | Whether&nbsp;the&nbsp;current&nbsp;**&lt;GridItem&gt;**&nbsp;is&nbsp;selectable&nbsp;by&nbsp;the&nbsp;mouse.<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**NOTE:**<br/>>&nbsp;This&nbsp;attribute&nbsp;takes&nbsp;effect&nbsp;only&nbsp;when&nbsp;mouse&nbsp;frame&nbsp;selection&nbsp;is&nbsp;enabled&nbsp;for&nbsp;the&nbsp;parent&nbsp;**&lt;Grid&gt;**&nbsp;container. |
| rowStart | number | - | Start row number of the component. |
| rowEnd | number | - | End row number of the component. |
| columnStart | number | - | Start column number of the component. |
| columnEnd | number | - | End column number of the component. |
| forceRebuild | boolean | false | Whether to re-create this node when the component is being built. |
| selectable<sup>8+</sup> | boolean | true | Whether the current **&lt;GridItem&gt;** is selectable by the mouse.<br/>> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**<br/>> This attribute takes effect only when mouse frame selection is enabled for the parent **&lt;Grid&gt;** container. |
## Events
| Name | Description |
| Name | Description |
| -------- | -------- |
| onSelect(callback:&nbsp;(isSelected:&nbsp;boolean)&nbsp;=&gt;&nbsp;any)<sup>8+</sup> | Triggered&nbsp;when&nbsp;the&nbsp;selected&nbsp;state&nbsp;of&nbsp;the&nbsp;**&lt;GridItem&gt;**&nbsp;changes.<br/>**isSelected**:&nbsp;Returns&nbsp;**true**&nbsp;if&nbsp;the&nbsp;**&lt;GridItem&gt;**&nbsp;is&nbsp;selected&nbsp;by&nbsp;the&nbsp;mouse;&nbsp;returns&nbsp;**false**&nbsp;otherwise. |
| onSelect(callback: (isSelected: boolean) =&gt; any)<sup>8+</sup> | Triggered when the selected state of the **&lt;GridItem&gt;** changes.<br/>**isSelected**: Returns **true** if the **&lt;GridItem&gt;** is selected by the mouse; returns **false** otherwise. |
## Example
```
@Entry
@Component
......
# List
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
......@@ -15,7 +15,7 @@ None
## Child Components
This component contains the child component [<ListItem>](../reference/arkui-ts/ts-container-listitem.md).
This component contains the child component [<ListItem>](ts-container-listitem.md).
## APIs
......@@ -23,39 +23,39 @@ This component contains the child component [<ListItem>](../reference/arkui-ts/t
List(value:{space?: number, initialIndex?: number})
- Parameters
| Name | Type | Mandatory | Default&nbsp;Value | Description |
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| space | number | No | 0 | Spacing&nbsp;between&nbsp;list&nbsp;items. |
| initialIndex | number | No | 0 | Item&nbsp;displayed&nbsp;at&nbsp;the&nbsp;beginning&nbsp;of&nbsp;the&nbsp;component&nbsp;when&nbsp;the&nbsp;current&nbsp;list&nbsp;is&nbsp;loaded&nbsp;for&nbsp;the&nbsp;first&nbsp;time,&nbsp;that&nbsp;is,&nbsp;the&nbsp;first&nbsp;item&nbsp;to&nbsp;be&nbsp;displayed.&nbsp;If&nbsp;the&nbsp;configured&nbsp;sequence&nbsp;number&nbsp;is&nbsp;greater&nbsp;than&nbsp;the&nbsp;sequence&nbsp;number&nbsp;of&nbsp;the&nbsp;last&nbsp;item,&nbsp;the&nbsp;setting&nbsp;does&nbsp;not&nbsp;take&nbsp;effect. |
| space | number | No | 0 | Spacing between list items. |
| initialIndex | number | No | 0 | Item displayed at the beginning of the component when the current list is loaded for the first time, that is, the first item to be displayed. If the configured sequence number is greater than the sequence number of the last item, the setting does not take effect. |
## Attributes
| Name | Type | Default&nbsp;Value | Description |
| Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- |
| listDirection | [Axis](ts-appendix-enums.md#axis-enums) | Vertical | Direction&nbsp;in&nbsp;which&nbsp;the&nbsp;list&nbsp;items&nbsp;are&nbsp;arranged.&nbsp;For&nbsp;details,&nbsp;see&nbsp;**Axis**&nbsp;enums. |
| divider | {<br/>strokeWidth:&nbsp;Length,<br/>color?:Color,<br/>startMargin?:&nbsp;Length,<br/>endMargin?:&nbsp;Length<br/>} | - | Style&nbsp;of&nbsp;the&nbsp;divider&nbsp;for&nbsp;the&nbsp;list&nbsp;items.&nbsp;By&nbsp;default,&nbsp;there&nbsp;is&nbsp;no&nbsp;divider.<br/>**strokeWidth**:&nbsp;stroke&nbsp;width&nbsp;of&nbsp;the&nbsp;divider.<br/>**color**:&nbsp;color&nbsp;of&nbsp;the&nbsp;divider.<br/>**startMargin**:&nbsp;distance&nbsp;between&nbsp;the&nbsp;divider&nbsp;and&nbsp;the&nbsp;start&nbsp;of&nbsp;the&nbsp;list.<br/>**endMargin**:&nbsp;distance&nbsp;between&nbsp;the&nbsp;divider&nbsp;and&nbsp;the&nbsp;end&nbsp;of&nbsp;the&nbsp;list. |
| editMode | boolean | false | Whether&nbsp;the&nbsp;**&lt;List&gt;**&nbsp;component&nbsp;is&nbsp;in&nbsp;editable&nbsp;mode. |
| edgeEffect | EdgeEffect | EdgeEffect.Spring | Sliding&nbsp;effect.&nbsp;For&nbsp;details,&nbsp;see&nbsp;EdgeEffect&nbsp;enums. |
| chainAnimation | boolean | false | Whether&nbsp;to&nbsp;display&nbsp;chained&nbsp;animations&nbsp;on&nbsp;this&nbsp;list&nbsp;when&nbsp;it&nbsp;slides&nbsp;or&nbsp;its&nbsp;top&nbsp;and&nbsp;bottom&nbsp;are&nbsp;dragged.&nbsp;The&nbsp;list&nbsp;items&nbsp;are&nbsp;separated&nbsp;with&nbsp;even&nbsp;space,&nbsp;and&nbsp;one&nbsp;item&nbsp;animation&nbsp;starts&nbsp;after&nbsp;the&nbsp;previous&nbsp;animation&nbsp;during&nbsp;basic&nbsp;sliding&nbsp;interactions.&nbsp;The&nbsp;chained&nbsp;animation&nbsp;effect&nbsp;is&nbsp;similar&nbsp;with&nbsp;spring&nbsp;physics.<br/>-&nbsp;**false**:&nbsp;No&nbsp;chained&nbsp;animations&nbsp;are&nbsp;displayed.<br/>-&nbsp;**true**:&nbsp;Chained&nbsp;animations&nbsp;are&nbsp;displayed. |
| multiSelectable<sup>8+</sup> | boolean | false | Whether&nbsp;to&nbsp;enable&nbsp;mouse&nbsp;frame&nbsp;selection.<br/>-&nbsp;**false**:&nbsp;The&nbsp;mouse&nbsp;frame&nbsp;selection&nbsp;is&nbsp;disabled.<br/>-&nbsp;**true**:&nbsp;The&nbsp;mouse&nbsp;frame&nbsp;selection&nbsp;is&nbsp;disabled. |
| restoreId<sup>8+</sup> | number | - | Migration&nbsp;ID&nbsp;of&nbsp;the&nbsp;component.&nbsp;During&nbsp;application&nbsp;migration,&nbsp;the&nbsp;status&nbsp;of&nbsp;the&nbsp;component&nbsp;is&nbsp;migrated&nbsp;to&nbsp;the&nbsp;component&nbsp;with&nbsp;the&nbsp;same&nbsp;migration&nbsp;ID&nbsp;on&nbsp;the&nbsp;peer&nbsp;end.<br/>For&nbsp;a&nbsp;**&lt;List&gt;**&nbsp;component,&nbsp;the&nbsp;status&nbsp;includes&nbsp;the&nbsp;item&nbsp;serial&nbsp;number&nbsp;displayed&nbsp;at&nbsp;the&nbsp;start&nbsp;position. |
| listDirection | [Axis](ts-appendix-enums.md#axis-enums) | Vertical | Direction in which the list items are arranged. For details, see **Axis** enums. |
| divider | {<br/>strokeWidth: Length,<br/>color?:Color,<br/>startMargin?: Length,<br/>endMargin?: Length<br/>} | - | 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 of the list.<br/>**endMargin**: distance between the divider and the end of the list. |
| editMode | boolean | false | Whether the **&lt;List&gt;** component is in editable mode. |
| edgeEffect | EdgeEffect | EdgeEffect.Spring | Sliding effect. For details, see EdgeEffect enums. |
| chainAnimation | boolean | false | Whether to display chained animations on this list when it slides or its top and bottom are 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/>- **false**: No chained animations are displayed.<br/>- **true**: Chained animations are displayed. |
| multiSelectable<sup>8+</sup> | boolean | false | Whether to enable mouse frame selection.<br/>- **false**: The mouse frame selection is disabled.<br/>- **true**: The mouse frame selection is disabled. |
| restoreId<sup>8+</sup> | number | - | Migration ID of the component. During application migration, the status of the component is migrated to the component with the same migration ID on the peer end.<br/>For a **&lt;List&gt;** component, the status includes the item serial number displayed at the start position. |
- EdgeEffect enums
| Name | Description |
| Name | Description |
| -------- | -------- |
| Spring | Similar&nbsp;to&nbsp;the&nbsp;physical&nbsp;dynamic&nbsp;effect&nbsp;of&nbsp;a&nbsp;spring.&nbsp;After&nbsp;scrolling&nbsp;to&nbsp;the&nbsp;edge,&nbsp;you&nbsp;can&nbsp;continue&nbsp;to&nbsp;scroll&nbsp;for&nbsp;a&nbsp;distance&nbsp;based&nbsp;on&nbsp;the&nbsp;initial&nbsp;speed&nbsp;or&nbsp;by&nbsp;touching&nbsp;the&nbsp;knob&nbsp;of&nbsp;the&nbsp;scrollbar.&nbsp;After&nbsp;you&nbsp;release&nbsp;your&nbsp;hand,&nbsp;the&nbsp;knob&nbsp;is&nbsp;rebounded. |
| None | No&nbsp;effect&nbsp;after&nbsp;the&nbsp;scroll&nbsp;bar&nbsp;is&nbsp;moved&nbsp;to&nbsp;the&nbsp;edge. |
| Spring | Similar to the physical dynamic effect of a spring. After scrolling to the edge, you can continue to scroll for a distance based on the initial speed or by touching the knob of the scrollbar. After you release your hand, the knob is rebounded. |
| None | No effect after the scroll bar is moved to the edge. |
## Events
| Name | Description |
| Name | Description |
| -------- | -------- |
| onItemDelete(index:&nbsp;number)&nbsp;=&gt;&nbsp;boolean | Triggered&nbsp;when&nbsp;a&nbsp;list&nbsp;item&nbsp;is&nbsp;deleted. |
| onScrollIndex(firstIndex:&nbsp;number,&nbsp;lastIndex:&nbsp;number)&nbsp;=&gt;&nbsp;void | Triggered&nbsp;when&nbsp;the&nbsp;start&nbsp;position&nbsp;and&nbsp;end&nbsp;position&nbsp;of&nbsp;the&nbsp;current&nbsp;list&nbsp;are&nbsp;changed. |
| onItemDelete(index: number) =&gt; boolean | Triggered when a list item is deleted. |
| onScrollIndex(firstIndex: number, lastIndex: number) =&gt; void | Triggered when the start position and end position of the current list are changed. |
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> To enable the editable mode for a list, the following conditions must be met:
>
> - **editMode** is set to **true**.
......
# ListItem
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
......@@ -25,24 +25,24 @@ ListItem()
## Attributes
| Name | Type | Default&nbsp;Value | Description |
| Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- |
| sticky | Sticky | Sticky.None | Sticky&nbsp;effect&nbsp;of&nbsp;the&nbsp;list&nbsp;item.&nbsp;For&nbsp;details,&nbsp;see Sticky enums. |
| editable | boolean | false | Whether&nbsp;the&nbsp;list&nbsp;item&nbsp;is&nbsp;editable.&nbsp;A&nbsp;list&nbsp;item&nbsp;can&nbsp;be&nbsp;deleted&nbsp;in&nbsp;editing&nbsp;mode. |
| selectable<sup>8+</sup> | boolean | true | Whether&nbsp;the&nbsp;current&nbsp;**&lt;ListItem&gt;**&nbsp;is&nbsp;selectable&nbsp;by&nbsp;the&nbsp;mouse.<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**NOTE:**<br/>>&nbsp;This&nbsp;attribute&nbsp;takes&nbsp;effect&nbsp;only&nbsp;when&nbsp;mouse&nbsp;frame&nbsp;selection&nbsp;is&nbsp;enabled&nbsp;for&nbsp;the&nbsp;parent&nbsp;**&lt;List&gt;**&nbsp;container. |
| sticky | Sticky | Sticky.None | Sticky effect of the list item. For details, see Sticky enums. |
| editable | boolean | false | Whether the list item is editable. A list item can be deleted in editing mode. |
| selectable<sup>8+</sup> | boolean | true | Whether the current **&lt;ListItem&gt;** is selectable by the mouse.<br/>> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**<br/>> This attribute takes effect only when mouse frame selection is enabled for the parent **&lt;List&gt;** container. |
- Sticky enums
| Name | Description |
| -------- | -------- |
| None | No&nbsp;sticky. |
| Normal | The&nbsp;list&nbsp;item&nbsp;is&nbsp;sticky. |
| None | No sticky. |
| Normal | The list item is sticky. |
## Events
| Name | Description |
| -------- | -------- |
| onSelect(callback:&nbsp;(isSelected:&nbsp;boolean)&nbsp;=&gt;&nbsp;any)<sup>8+</sup> | Triggered&nbsp;when&nbsp;the&nbsp;selected&nbsp;state&nbsp;of&nbsp;the&nbsp;**&lt;ListItem&gt;**&nbsp;changes.<br/>**isSelected**:&nbsp;Returns&nbsp;**true**&nbsp;if&nbsp;the&nbsp;**&lt;ListItem&gt;**&nbsp;is&nbsp;selected&nbsp;by&nbsp;the&nbsp;mouse;&nbsp;returns&nbsp;**false**&nbsp;otherwise. |
| onSelect(callback: (isSelected: boolean) =&gt; any)<sup>8+</sup> | Triggered when the selected state of the **&lt;ListItem&gt;** changes.<br/>**isSelected**: Returns **true** if the **&lt;ListItem&gt;** is selected by the mouse; returns **false** otherwise. |
## Example
......
# Navigator
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
......@@ -25,25 +25,25 @@ Navigator(value?: {target: string, type?: NavigationType})
Creates a navigator.
- Parameters
| Name | Type | Mandatory | Default&nbsp;Value | Description |
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| target | string | Yes | - | Path&nbsp;of&nbsp;the&nbsp;target&nbsp;page&nbsp;to&nbsp;be&nbsp;redirected&nbsp;to. |
| type | NavigationType | No | NavigationType.Push | Navigation&nbsp;type. |
| target | string | Yes | - | Path of the target page to be redirected to. |
| type | NavigationType | No | NavigationType.Push | Navigation type. |
- NavigationType enums
| Name | Description |
| -------- | -------- |
| Push | Navigates&nbsp;to&nbsp;a&nbsp;specified&nbsp;page&nbsp;in&nbsp;the&nbsp;application. |
| Replace | Replaces&nbsp;the&nbsp;current&nbsp;page&nbsp;with&nbsp;another&nbsp;one&nbsp;in&nbsp;the&nbsp;application&nbsp;and&nbsp;destroys&nbsp;the&nbsp;current&nbsp;page. |
| Back | Returns&nbsp;to&nbsp;the&nbsp;previous&nbsp;page&nbsp;or&nbsp;a&nbsp;specified&nbsp;page. |
| Push | Navigates to a specified page in the application. |
| Replace | Replaces the current page with another one in the application and destroys the current page. |
| Back | Returns to the previous page or a specified page. |
## Attributes
| Name | Parameters | Default&nbsp;Value | Description |
| Name | Parameters | Default Value | Description |
| -------- | -------- | -------- | -------- |
| active | boolean | - | Whether&nbsp;the&nbsp;**&lt;Navigator&gt;**&nbsp;component&nbsp;is&nbsp;activated.&nbsp;If&nbsp;the&nbsp;component&nbsp;is&nbsp;activated,&nbsp;the&nbsp;corresponding&nbsp;navigation&nbsp;takes&nbsp;effect. |
| params | Object | undefined | Data&nbsp;that&nbsp;needs&nbsp;to&nbsp;be&nbsp;passed&nbsp;to&nbsp;the&nbsp;target&nbsp;page&nbsp;during&nbsp;redirection.&nbsp;You&nbsp;can&nbsp;use&nbsp;**router.getParams()**&nbsp;to&nbsp;obtain&nbsp;the&nbsp;data&nbsp;on&nbsp;the&nbsp;target&nbsp;page. |
| active | boolean | - | Whether the **&lt;Navigator&gt;** component is activated. If the component is activated, the corresponding navigation takes effect. |
| params | Object | undefined | Data that needs to be passed to the target page during redirection. You can use **router.getParams()** to obtain the data on the target page. |
## Example
......
# Panel
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
......@@ -23,42 +23,42 @@ This component can contain child components.
Panel(value:{show:boolean})
- Parameter
| Name | Type | Mandatory | Default&nbsp;Value | Description |
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| show | boolean | Yes | - | Whether&nbsp;the&nbsp;panel&nbsp;is&nbsp;shown&nbsp;or&nbsp;hidden. |
| show | boolean | Yes | - | Whether the panel is shown or hidden. |
## Attributes
| Name | Type | Default&nbsp;Value | Description |
| Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- |
| type | PanelType | PanelType.Foldable | Type&nbsp;of&nbsp;the&nbsp;panel. |
| mode | PanelMode | - | Initial&nbsp;status&nbsp;of&nbsp;the&nbsp;panel. |
| dragBar | boolean | true | Whether&nbsp;to&nbsp;enable&nbsp;a&nbsp;drag&nbsp;bar.&nbsp;The&nbsp;value&nbsp;**true**&nbsp;means&nbsp;that&nbsp;the&nbsp;drag&nbsp;bar&nbsp;will&nbsp;be&nbsp;displayed,&nbsp;and&nbsp;**false**&nbsp;means&nbsp;the&nbsp;opposite. |
| fullHeight | Length | - | Panel&nbsp;height&nbsp;in&nbsp;the&nbsp;**PanelMode.Full**&nbsp;mode. |
| halfHeight | Length | - | Panel&nbsp;height&nbsp;in&nbsp;the&nbsp;**PanelMode.Half**&nbsp;mode.&nbsp;The&nbsp;default&nbsp;value&nbsp;is&nbsp;half&nbsp;of&nbsp;the&nbsp;screen&nbsp;height. |
| miniHeight | Length | - | Panel&nbsp;height&nbsp;in&nbsp;the&nbsp;**PanelMode.Mini**&nbsp;mode. |
| type | PanelType | PanelType.Foldable | Type of the panel. |
| mode | PanelMode | - | Initial status of the panel. |
| dragBar | boolean | true | Whether to enable a drag bar. The value **true** means that the drag bar will be displayed, and **false** means the opposite. |
| fullHeight | Length | - | Panel height in the **PanelMode.Full** mode. |
| halfHeight | Length | - | Panel height in the **PanelMode.Half** mode. The default value is half of the screen height. |
| miniHeight | Length | - | Panel height in the **PanelMode.Mini** mode. |
- PanelType enums
| Name | Description |
| -------- | -------- |
| Minibar | A&nbsp;minibar&nbsp;panel&nbsp;displays&nbsp;content&nbsp;in&nbsp;the&nbsp;minibar&nbsp;area&nbsp;or&nbsp;a&nbsp;large&nbsp;(fullscreen-like)&nbsp;area. |
| Foldable | A&nbsp;foldable&nbsp;panel&nbsp;displays&nbsp;permanent&nbsp;content&nbsp;in&nbsp;a&nbsp;large&nbsp;(fullscreen-like),&nbsp;medium-sized&nbsp;(halfscreen-like),&nbsp;or&nbsp;small&nbsp;area. |
| Temporary | A&nbsp;temporary&nbsp;panel&nbsp;displays&nbsp;content&nbsp;in&nbsp;a&nbsp;large&nbsp;(fullscreen-like)&nbsp;or&nbsp;medium-sized&nbsp;(halfscreen-like)&nbsp;area. |
| Minibar | A minibar panel displays content in the minibar area or a large (fullscreen-like) area. |
| Foldable | A foldable panel displays permanent content in a large (fullscreen-like), medium-sized (halfscreen-like), or small area. |
| Temporary | A temporary panel displays content in a large (fullscreen-like) or medium-sized (halfscreen-like) area. |
- PanelMode enums
| Name | Description |
| -------- | -------- |
| Mini | Displays&nbsp;a&nbsp;**minibar**&nbsp;or&nbsp;**foldable**&nbsp;panel&nbsp;in&nbsp;its&nbsp;minimum&nbsp;size.&nbsp;This&nbsp;attribute&nbsp;does&nbsp;not&nbsp;take&nbsp;effect&nbsp;for&nbsp;**temporary**&nbsp;panels. |
| Half | Displays&nbsp;a&nbsp;**foldable**&nbsp;or&nbsp;**temporary**&nbsp;panel&nbsp;in&nbsp;a&nbsp;medium-sized&nbsp;(halfscreen-like)&nbsp;area.&nbsp;This&nbsp;attribute&nbsp;does&nbsp;not&nbsp;take&nbsp;effect&nbsp;for&nbsp;**minibar**&nbsp;panels. |
| Full | Displays&nbsp;a&nbsp;panel&nbsp;in&nbsp;a&nbsp;large&nbsp;(fullscreen-like)&nbsp;area. |
| Mini | Displays a **minibar** or **foldable** panel in its minimum size. This attribute does not take effect for **temporary** panels. |
| Half | Displays a **foldable** or **temporary** panel in a medium-sized (halfscreen-like) area. This attribute does not take effect for **minibar** panels. |
| Full | Displays a panel in a large (fullscreen-like) area. |
## Events
| Name | Description |
| -------- | -------- |
| onChange(callback:&nbsp;(width:&nbsp;number,&nbsp;height:&nbsp;number,&nbsp;mode:&nbsp;PanelMode)&nbsp;=&gt;&nbsp;void) | Triggered&nbsp;when&nbsp;the&nbsp;status&nbsp;of&nbsp;the&nbsp;panel&nbsp;changes.&nbsp;The&nbsp;returned&nbsp;height&nbsp;value&nbsp;is&nbsp;the&nbsp;height&nbsp;of&nbsp;the&nbsp;content&nbsp;area.&nbsp;When&nbsp;the&nbsp;value&nbsp;of&nbsp;**dragbar**&nbsp;is&nbsp;**true**,&nbsp;the&nbsp;height&nbsp;of&nbsp;the&nbsp;panel&nbsp;is&nbsp;the&nbsp;dragbar&nbsp;height&nbsp;plus&nbsp;the&nbsp;height&nbsp;of&nbsp;the&nbsp;content&nbsp;area. |
| onChange(callback: (width: number, height: number, mode: PanelMode) =&gt; void) | Triggered when the status of the panel changes. The returned height value is the height of the content area. When the value of **dragbar** is **true**, the height of the panel is the dragbar height plus the height of the content area. |
## Example
......
......@@ -23,7 +23,7 @@ Refresh\(value: \{refreshing: boolean, offset?: Length, friction?: number\}\)
| -------- | -------- | -------- | -------- | -------- |
| refreshing | boolean | Yes| - | Whether the current component is being refreshed.|
| offset | Length | No| 16 | Distance to the top of the parent component from the **<Refresh\>** component that comes to rest after a successful pull-down gesture.|
| friction | number | No| 62 | Coefficient of friction, which indicates the **<Refresh\>** component's sensitivity to the pull-down gesture. The value ranges from 0 to 100. <br/>-&nbsp;**0** indicates that the **<Refresh\>** component is not sensitive to the pull-down gesture. <br/>-&nbsp;**100** indicates that the **<Refresh\>** component is highly sensitive to the pull-down gesture. <br/>-&nbsp;A larger value indicates a more sensitive response of the **<Refresh\>** component to the pull-down gesture.|
| friction | number | No| 62 | Coefficient of friction, which indicates the **<Refresh\>** component's sensitivity to the pull-down gesture. The value ranges from 0 to 100. <br/>- **0** indicates that the **<Refresh\>** component is not sensitive to the pull-down gesture. <br/>- **100** indicates that the **<Refresh\>** component is highly sensitive to the pull-down gesture. <br/>- A larger value indicates a more sensitive response of the **<Refresh\>** component to the pull-down gesture.|
......
# RowSplit
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
......@@ -27,9 +27,9 @@ RowSplit()
| Name | Type | Description |
| -------- | -------- | -------- |
| resizeable | boolean | Whether&nbsp;the&nbsp;divider&nbsp;can&nbsp;be&nbsp;dragged.&nbsp;The&nbsp;default&nbsp;value&nbsp;is&nbsp;**false**. |
| resizeable | boolean | Whether the divider can be dragged. The default value is **false**. |
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> Similar to **&lt;RowSplit&gt;**, the divider of **&lt;RowSplit&gt;** can be dragged to a position that just fully holds a component.
......
# Scroll
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
......@@ -25,19 +25,19 @@ Scroll(scroller?: Scroller)
## Attributes
| Name | Type | Default&nbsp;Value | Description |
| Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- |
| scrollable | ScrollDirection | ScrollDirection.Vertical | Scroll&nbsp;method. |
| scrollBar | [BarState](ts-appendix-enums.md#barstate-enums) | Auto | Scroll&nbsp;bar&nbsp;status. |
| scrollBarColor | Color | - | Color&nbsp;of&nbsp;the&nbsp;scroll&nbsp;bar. |
| scrollBarWidth | Length | - | Width&nbsp;of&nbsp;the&nbsp;scrollbar. |
| scrollable | ScrollDirection | ScrollDirection.Vertical | Scroll method. |
| scrollBar | [BarState](ts-appendix-enums.md#barstate-enums) | Auto | Scroll bar status. |
| scrollBarColor | Color | - | Color of the scroll bar. |
| scrollBarWidth | Length | - | Width of the scrollbar. |
- ScrollDirection
| Name | Description |
| -------- | -------- |
| Horizontal | Only&nbsp;horizontal&nbsp;scrolling&nbsp;is&nbsp;supported. |
| Vertical | Only&nbsp;vertical&nbsp;scrolling&nbsp;is&nbsp;supported. |
| None | Scrolling&nbsp;is&nbsp;disabled. |
| Horizontal | Only horizontal scrolling is supported. |
| Vertical | Only vertical scrolling is supported. |
| None | Scrolling is disabled. |
## Scroller
......@@ -62,11 +62,11 @@ Scrolls to the specified position.
- Parameters
| Name | Type | Mandatory | Default&nbsp;Value | Description |
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| xOffset | Length | Yes | - | Horizontal&nbsp;scrolling&nbsp;offset. |
| yOffset | Length | Yes | - | Vertical&nbsp;scrolling&nbsp;offset. |
| animation | {<br/>duration:&nbsp;number,<br/>curve:&nbsp;Curve&nbsp;\|<br/>CubicBezier&nbsp;\|<br/>SpringCurve<br/>} | No | | Animation&nbsp;configuration,&nbsp;which&nbsp;includes&nbsp;the&nbsp;following:<br/>-&nbsp;**duration**:&nbsp;scrolling&nbsp;duration.<br/>-&nbsp;**curve**:&nbsp;scrolling&nbsp;curve. |
| xOffset | Length | Yes | - | Horizontal scrolling offset. |
| yOffset | Length | Yes | - | Vertical scrolling offset. |
| animation | {<br/>duration: number,<br/>curve: Curve \|<br/>CubicBezier \|<br/>SpringCurve<br/>} | No | | Animation configuration, which includes the following:<br/>- **duration**: scrolling duration.<br/>- **curve**: scrolling curve. |
### scroller.scrollEdge
......@@ -78,9 +78,9 @@ Scrolls to the edge of the container.
- Parameters
| Name | Type | Mandatory | Default&nbsp;Value | Description |
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| value | Edge | Yes | - | Edge&nbsp;position&nbsp;to&nbsp;scroll&nbsp;to. |
| value | Edge | Yes | - | Edge position to scroll to. |
### scroller.scrollPage
......@@ -90,9 +90,9 @@ scrollPage(value: { next: boolean, direction?: Axis }): void
Scrolls to the next or previous page.
- Parameters
| Name | Type | Mandatory | Default&nbsp;Value | Description |
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| next | boolean | Yes | - | Whether&nbsp;to&nbsp;turn&nbsp;to&nbsp;the&nbsp;next&nbsp;page.&nbsp;The&nbsp;value&nbsp;**true**&nbsp;means&nbsp;to&nbsp;scroll&nbsp;to&nbsp;the&nbsp;next&nbsp;page,&nbsp;and&nbsp;the&nbsp;value&nbsp;**false**&nbsp;means&nbsp;to&nbsp;scroll&nbsp;to&nbsp;the&nbsp;previous&nbsp;page. |
| next | boolean | Yes | - | Whether to turn to the next page. The value **true** means to scroll to the next page, and the value **false** means to scroll to the previous page. |
### scroller.currentOffset
......@@ -106,7 +106,7 @@ Obtains the scrolling offset.
- Return values
| Type | Description |
| -------- | -------- |
| {<br/>xOffset:&nbsp;number,<br/>yOffset:&nbsp;number<br/>} | **xOffset**:&nbsp;horizontal&nbsp;scrolling&nbsp;offset.<br/>**yOffset**:&nbsp;vertical&nbsp;scrolling&nbsp;offset. |
| {<br/>xOffset: number,<br/>yOffset: number<br/>} | **xOffset**: horizontal scrolling offset.<br/>**yOffset**: vertical scrolling offset. |
### scroller.scrollToIndex
......@@ -117,23 +117,23 @@ scroller.scrollToIndex(value: number): void
Scrolls to the specified index.
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> Only the **&lt;List&gt;** component is supported.
- Parameters
| Name | Type | Mandatory | Default&nbsp;Value | Description |
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| value | number | Yes | - | Index&nbsp;of&nbsp;the&nbsp;item&nbsp;to&nbsp;be&nbsp;scrolled&nbsp;to&nbsp;in&nbsp;the&nbsp;list. |
| value | number | Yes | - | Index of the item to be scrolled to in the list. |
## Events
| Name | Description |
| -------- | -------- |
| onScroll(xOffset:&nbsp;number,&nbsp;yOffset:&nbsp;number)&nbsp;=&gt;&nbsp;void | Invoked&nbsp;to&nbsp;return&nbsp;the&nbsp;horizontal&nbsp;and&nbsp;vertical&nbsp;offsets&nbsp;during&nbsp;scrolling&nbsp;when&nbsp;the&nbsp;specified&nbsp;scroll&nbsp;event&nbsp;occurs. |
| onScrollEdge(side:&nbsp;Edge)&nbsp;=&gt;&nbsp;void | Callback&nbsp;for&nbsp;the&nbsp;event&nbsp;of&nbsp;scrolling&nbsp;to&nbsp;the&nbsp;edge. |
| onScrollEnd()&nbsp;=&gt;&nbsp;void | Invoked&nbsp;when&nbsp;scrolling&nbsp;stops. |
| onScroll(xOffset: number, yOffset: number) =&gt; void | Invoked to return the horizontal and vertical offsets during scrolling when the specified scroll event occurs. |
| onScrollEdge(side: Edge) =&gt; void | Callback for the event of scrolling to the edge. |
| onScrollEnd() =&gt; void | Invoked when scrolling stops. |
## Example
......
# Stack
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
......@@ -13,9 +13,9 @@ The **&lt;Stack&gt;** component provides a stack container where child component
None
## Child Component
## Child Components
The **&lt;Stack&gt;** component can contain child components.
Supported
## APIs
......@@ -23,9 +23,9 @@ The **&lt;Stack&gt;** component can contain child components.
Stack(value:{alignContent?: Alignment})
- Parameters
| Name | Type | Mandatory | Default&nbsp;Value | Description |
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| alignContent | [Alignment](ts-appendix-enums.md#alignment-enums) | No | Center | Alignment&nbsp;of&nbsp;child&nbsp;components&nbsp;in&nbsp;the&nbsp;container. |
| alignContent | [Alignment](ts-appendix-enums.md#alignment-enums) | No | Center | Alignment of child components in the container. |
## Example
......
# Swiper
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
......@@ -23,26 +23,26 @@ This component can contain child components.
Swiper(value:{controller?: SwiperController})
- Parameters
| Name | Type | Mandatory | Default&nbsp;Value | Description |
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| controller | [SwiperController](#swipercontroller) | No | null | Controller&nbsp;bound&nbsp;to&nbsp;the&nbsp;component&nbsp;to&nbsp;control&nbsp;the&nbsp;page&nbsp;switching. |
| controller | [SwiperController](#swipercontroller) | No | null | Controller bound to the component to control the page switching. |
## Attributes
| Name | Type | Default&nbsp;Value | Description |
| Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- |
| index | number | 0 | Index&nbsp;of&nbsp;the&nbsp;child&nbsp;component&nbsp;currently&nbsp;displayed&nbsp;in&nbsp;the&nbsp;container. |
| autoPlay | boolean | false | Whether&nbsp;to&nbsp;enable&nbsp;automatic&nbsp;playback&nbsp;for&nbsp;child&nbsp;component&nbsp;switching.&nbsp;If&nbsp;this&nbsp;attribute&nbsp;is&nbsp;**true**,&nbsp;the&nbsp;indicator&nbsp;dots&nbsp;do&nbsp;not&nbsp;take&nbsp;effect. |
| interval | number | 3000 | Interval&nbsp;for&nbsp;automatic&nbsp;playback,&nbsp;in&nbsp;ms. |
| indicator | boolean | true | Whether&nbsp;to&nbsp;enable&nbsp;the&nbsp;navigation&nbsp;dots. |
| loop | boolean | true | Whether&nbsp;to&nbsp;enable&nbsp;loop&nbsp;playback. |
| duration | number | 400 | Duration&nbsp;of&nbsp;the&nbsp;animation&nbsp;for&nbsp;switching&nbsp;child&nbsp;components,&nbsp;in&nbsp;ms. |
| vertical | boolean | false | Whether&nbsp;vertical&nbsp;swiping&nbsp;is&nbsp;used. |
| itemSpace | Length | 0 | Space&nbsp;between&nbsp;child&nbsp;components. |
| cachedCount<sup>8+</sup> | number | 1 | Number&nbsp;of&nbsp;child&nbsp;components&nbsp;to&nbsp;be&nbsp;cached. |
| disableSwipe<sup>8+</sup> | boolean | false | Whether&nbsp;to&nbsp;disable&nbsp;the&nbsp;swipe&nbsp;feature. |
| curve<sup>8+</sup> | [Curve](ts-animatorproperty.md)&nbsp;\|&nbsp;Curves | Curve.Ease | Animation&nbsp;curve.&nbsp;The&nbsp;ease-in/ease-out&nbsp;curve&nbsp;is&nbsp;used&nbsp;by&nbsp;default.&nbsp;For&nbsp;details&nbsp;about&nbsp;common&nbsp;curves,&nbsp;see&nbsp;[Curve&nbsp;enums](ts-animatorproperty.md).&nbsp;You&nbsp;can&nbsp;also&nbsp;create&nbsp;custom&nbsp;curves&nbsp;([interpolation&nbsp;curve&nbsp;objects](ts-interpolation-calculation.md))&nbsp;by&nbsp;using&nbsp;the&nbsp;API&nbsp;provided&nbsp;by&nbsp;the&nbsp;interpolation&nbsp;calculation&nbsp;module. |
| index | number | 0 | Index of the child component currently displayed in the container. |
| autoPlay | boolean | false | Whether to enable automatic playback for child component switching. If this attribute is **true**, the indicator dots do not take effect. |
| interval | number | 3000 | Interval for automatic playback, in ms. |
| indicator | boolean | true | Whether to enable the navigation dots. |
| loop | boolean | true | Whether to enable loop playback. |
| duration | number | 400 | Duration of the animation for switching child components, in ms. |
| vertical | boolean | false | Whether vertical swiping is used. |
| itemSpace | Length | 0 | Space between child components. |
| cachedCount<sup>8+</sup> | number | 1 | Number of child components to be cached. |
| disableSwipe<sup>8+</sup> | boolean | false | Whether to disable the swipe feature. |
| curve<sup>8+</sup> | [Curve](ts-animatorproperty.md) \| Curves | Curve.Ease | Animation curve. The ease-in/ease-out curve is used by default. For details about common curves, see [Curve enums](ts-animatorproperty.md). You can also create custom curves ([interpolation curve objects](ts-interpolation-calculation.md)) by using the API provided by the interpolation calculation module. |
### SwiperController
......@@ -51,15 +51,15 @@ Controller of the **&lt;Swiper&gt;** component. You can bind this object to the
| Name | Description |
| -------- | -------- |
| showNext():void | Turns&nbsp;to&nbsp;the&nbsp;next&nbsp;page. |
| showPrevious():void | Turns&nbsp;to&nbsp;the&nbsp;previous&nbsp;page. |
| showNext():void | Turns to the next page. |
| showPrevious():void | Turns to the previous page. |
## Events
| Name | Description |
| -------- | -------- |
| onChange(&nbsp;index:&nbsp;number)&nbsp;=&gt;&nbsp;void | Triggered&nbsp;when&nbsp;the&nbsp;index&nbsp;of&nbsp;the&nbsp;currently&nbsp;displayed&nbsp;component&nbsp;changes. |
| onChange( index: number) =&gt; void | Triggered when the index of the currently displayed component changes. |
## Example
......
# TabContent
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
......@@ -13,7 +13,7 @@ The **&lt;TabContent&gt;** component is used only in the **&lt;Tabs&gt;** compon
None
## Child Component
## Child Components
This component supports only one child component.
......@@ -27,11 +27,11 @@ TabContent()
Touch target configuration is not supported.
| Name | Type | Default&nbsp;Value | Description |
| Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- |
| tabBar | string&nbsp;\|&nbsp;{<br/>icon?:&nbsp;string,<br/>text?:&nbsp;string<br/>}<br/>\|[CustomBuilder](../../ui/ts-types.md) | - | Content&nbsp;displayed&nbsp;on&nbsp;the&nbsp;tab&nbsp;bar.<br/>**CustomBuilder**:&nbsp;builder,&nbsp;to&nbsp;which&nbsp;components&nbsp;can&nbsp;be&nbsp;passed&nbsp;(applicable&nbsp;to&nbsp;API&nbsp;version&nbsp;8&nbsp;and&nbsp;later&nbsp;versions).<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**NOTE:**<br/>>&nbsp;If&nbsp;an&nbsp;icon&nbsp;uses&nbsp;an&nbsp;SVG&nbsp;image,&nbsp;the&nbsp;width&nbsp;and&nbsp;height&nbsp;attributes&nbsp;of&nbsp;the&nbsp;SVG&nbsp;image&nbsp;must&nbsp;be&nbsp;deleted.&nbsp;Otherwise,&nbsp;the&nbsp;icon&nbsp;size&nbsp;will&nbsp;be&nbsp;determined&nbsp;by&nbsp;the&nbsp;width&nbsp;and&nbsp;height&nbsp;attributes&nbsp;of&nbsp;the&nbsp;SVG&nbsp;image. |
| tabBar | string \| {<br/>icon?: string,<br/>text?: string<br/>}<br/>\|[CustomBuilder](../../ui/ts-types.md) | - | Content displayed on the tab bar.<br/>**CustomBuilder**: builder, to which components can be passed (applicable to API version 8 and later versions).<br/>> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**<br/>> If an icon uses an SVG image, the width and height attributes of the SVG image must be deleted. Otherwise, the icon size will be determined by the width and height attributes of the SVG image. |
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> - The **&lt;TabContent&gt;** component does not support setting of the common width attribute. By default, its width is the same as that of the parent **&lt;Tabs&gt;** component.
>
> - The **&lt;TabContent&gt;** component does not support setting of the common height attribute. Its height is determined by the height of the parent **&lt;Tabs&gt;** component and the **&lt;TabBar&gt;** component.
......
# Tabs
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
......@@ -13,7 +13,7 @@ The **&lt;Tabs&gt;** component is a container component that allows users to swi
None
## Child Component
## Child Components
The **&lt;Tabs&gt;** component can contain [TabContent](ts-container-tabcontent.md) child components.
......@@ -23,53 +23,53 @@ The **&lt;Tabs&gt;** component can contain [TabContent](ts-container-tabcontent.
Tabs(value: {barPosition?: BarPosition, index?: number, controller?: [TabsController](#tabscontroller)})
- Parameters
| Name | Type | Mandatory | Default&nbsp;Value | Description |
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| barPosition | BarPosition | No | BarPosition.Start | Tab&nbsp;bar&nbsp;position&nbsp;for&nbsp;creating&nbsp;the&nbsp;**&lt;Tabs&gt;**&nbsp;container&nbsp;component. |
| index | number | No | 0 | Initial&nbsp;tab&nbsp;index. |
| controller | [TabsController](#tabscontroller) | No | - | Tab&nbsp;controller. |
| barPosition | BarPosition | No | BarPosition.Start | Tab bar position for creating the **&lt;Tabs&gt;** container component. |
| index | number | No | 0 | Initial tab index. |
| controller | [TabsController](#tabscontroller) | No | - | Tab controller. |
- BarPosition enums
| Name | Description |
| Name | Description |
| -------- | -------- |
| Start | If&nbsp;the&nbsp;**vertical**&nbsp;attribute&nbsp;is&nbsp;set&nbsp;to&nbsp;**true**,&nbsp;the&nbsp;tab&nbsp;is&nbsp;on&nbsp;the&nbsp;left&nbsp;of&nbsp;the&nbsp;container.&nbsp;If&nbsp;the&nbsp;**vertical**&nbsp;attribute&nbsp;is&nbsp;set&nbsp;to&nbsp;**false**,&nbsp;the&nbsp;tab&nbsp;is&nbsp;on&nbsp;the&nbsp;top&nbsp;of&nbsp;the&nbsp;container. |
| End | If&nbsp;the&nbsp;**vertical**&nbsp;attribute&nbsp;is&nbsp;set&nbsp;to&nbsp;**true**,&nbsp;the&nbsp;tab&nbsp;is&nbsp;on&nbsp;the&nbsp;right&nbsp;of&nbsp;the&nbsp;container.&nbsp;If&nbsp;the&nbsp;**vertical**&nbsp;attribute&nbsp;is&nbsp;set&nbsp;to&nbsp;**false**,&nbsp;the&nbsp;tab&nbsp;is&nbsp;at&nbsp;the&nbsp;bottom&nbsp;of&nbsp;the&nbsp;container. |
| Start | If the **vertical** attribute is set to **true**, the tab is on the left of the container. If the **vertical** attribute is set to **false**, the tab is on the top of the container. |
| End | If the **vertical** attribute is set to **true**, the tab is on the right of the container. If the **vertical** attribute is set to **false**, the tab is at the bottom of the container. |
### TabsController
Defines a tab controller, which is used to control switching of tabs.
| API | Description |
| API | Description |
| -------- | -------- |
| changeIndex(value:&nbsp;number):&nbsp;void | Changes&nbsp;the&nbsp;index&nbsp;of&nbsp;a&nbsp;tab.&nbsp;The&nbsp;value&nbsp;starts&nbsp;from&nbsp;**0**. |
| changeIndex(value: number): void | Changes the index of a tab. The value starts from **0**. |
## Attributes
Touch target configuration is not supported.
| Name | Type | Default&nbsp;Value | Description |
| Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- |
| vertical | boolean | false | Whether&nbsp;a&nbsp;tab&nbsp;is&nbsp;a&nbsp;vertical&nbsp;tab. |
| scrollable | boolean | true | Whether&nbsp;page&nbsp;switching&nbsp;can&nbsp;be&nbsp;performed&nbsp;by&nbsp;swiping&nbsp;left&nbsp;or&nbsp;right. |
| barMode | BarMode | - | Tab&nbsp;bar&nbsp;layout&nbsp;mode. |
| barWidth | number | - | Width&nbsp;of&nbsp;the&nbsp;tab&nbsp;bar.&nbsp;If&nbsp;this&nbsp;parameter&nbsp;is&nbsp;not&nbsp;set,&nbsp;the&nbsp;default&nbsp;value&nbsp;in&nbsp;the&nbsp;system&nbsp;theme&nbsp;is&nbsp;used. |
| barHeight | number | - | Height&nbsp;of&nbsp;the&nbsp;tab&nbsp;bar.&nbsp;If&nbsp;this&nbsp;parameter&nbsp;is&nbsp;not&nbsp;set,&nbsp;the&nbsp;default&nbsp;value&nbsp;in&nbsp;the&nbsp;system&nbsp;theme&nbsp;is&nbsp;used. |
| animationDuration | number | 200 | Animation&nbsp;duration&nbsp;of&nbsp;the&nbsp;tab&nbsp;content. |
| vertical | boolean | false | Whether a tab is a vertical tab. |
| scrollable | boolean | true | Whether page switching can be performed by swiping left or right. |
| barMode | BarMode | - | Tab bar layout mode. |
| barWidth | number | - | Width of the tab bar. If this parameter is not set, the default value in the system theme is used. |
| barHeight | number | - | Height of the tab bar. If this parameter is not set, the default value in the system theme is used. |
| animationDuration | number | 200 | Animation duration of the tab content. |
- BarMode enums
| Name | Description |
| Name | Description |
| -------- | -------- |
| Scrollable | The&nbsp;actual&nbsp;layout&nbsp;width&nbsp;of&nbsp;the&nbsp;tab&nbsp;bar&nbsp;is&nbsp;used.&nbsp;If&nbsp;the&nbsp;actual&nbsp;width&nbsp;exceeds&nbsp;the&nbsp;total&nbsp;length,&nbsp;the&nbsp;tab&nbsp;bar&nbsp;is&nbsp;scrollable. |
| Fixed | The&nbsp;widths&nbsp;of&nbsp;all&nbsp;tab&nbsp;bars&nbsp;are&nbsp;evenly&nbsp;allocated. |
| Scrollable | The actual layout width of the tab bar is used. If the actual width exceeds the total length, the tab bar is scrollable. |
| Fixed | The widths of all tab bars are evenly allocated. |
## Events
| Name | Description |
| Name | Description |
| -------- | -------- |
| onChange(callback:&nbsp;(index:&nbsp;number)&nbsp;=&gt;&nbsp;void) | Event&nbsp;triggered&nbsp;when&nbsp;a&nbsp;tab&nbsp;is&nbsp;switched. |
| onChange(callback: (index: number) =&gt; void) | Event triggered when a tab is switched. |
## Example
......
# Circle
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
......@@ -23,12 +23,12 @@ None
Circle(options?: {width: Length, height: Length})
- Parameters
| Name | Type | Mandatory | Default&nbsp;Value | Description |
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| options | Object | No | - | For&nbsp;details,&nbsp;see&nbsp;the&nbsp;**options**&nbsp;parameters. |
| options | Object | No | - | For details, see the **options** parameters. |
- options parameters
| Name | Type | Mandatory | Default&nbsp;Value | Description |
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| width | Length | Yes | - | Width. |
| height | Length | Yes | - | Height. |
......@@ -36,10 +36,10 @@ Circle(options?: {width: Length, height: Length})
## Attributes
| Name | Type | Default&nbsp;Value | Mandatory | Description |
| Name | Type | Default Value | Mandatory | Description |
| -------- | -------- | -------- | -------- | -------- |
| width | Length | 0 | No | Width&nbsp;of&nbsp;the&nbsp;rectangle&nbsp;where&nbsp;the&nbsp;circle&nbsp;is&nbsp;located. |
| height | Length | 0 | No | Height&nbsp;of&nbsp;the&nbsp;rectangle&nbsp;where&nbsp;the&nbsp;circle&nbsp;is&nbsp;located. |
| width | Length | 0 | No | Width of the rectangle where the circle is located. |
| height | Length | 0 | No | Height of the rectangle where the circle is located. |
## Example
......
# Ellipse
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
......@@ -23,12 +23,12 @@ None
ellipse(options?: {width: Length, height: Length})
- Parameters
| Name | Type | Mandatory | Default&nbsp;Value | Description |
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| options | Object | No | - | For&nbsp;details,&nbsp;see&nbsp;the&nbsp;**options**&nbsp;parameters. |
| options | Object | No | - | For details, see the **options** parameters. |
- options parameters
| Name | Type | Mandatory | Default&nbsp;Value | Description |
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| width | Length | Yes | - | Width. |
| height | Length | Yes | - | Height. |
......@@ -36,10 +36,10 @@ ellipse(options?: {width: Length, height: Length})
## Attributes
| Name | Type | Default&nbsp;Value | Mandatory | Description |
| Name | Type | Default Value | Mandatory | Description |
| -------- | -------- | -------- | -------- | -------- |
| width | Length | 0 | No | Width&nbsp;of&nbsp;the&nbsp;rectangle&nbsp;where&nbsp;the&nbsp;ellipse&nbsp;is&nbsp;located. |
| height | Length | 0 | No | Height&nbsp;of&nbsp;the&nbsp;rectangle&nbsp;where&nbsp;the&nbsp;ellipse&nbsp;is&nbsp;located. |
| width | Length | 0 | No | Width of the rectangle where the ellipse is located. |
| height | Length | 0 | No | Height of the rectangle where the ellipse is located. |
## Example
......
# Line
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
......@@ -23,12 +23,12 @@ None
Line(options?: {width: Length, height: Length})
- Parameters
| Name | Type | Mandatory | Default&nbsp;Value | Description |
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| options | Object | No | - | For&nbsp;details,&nbsp;see&nbsp;the&nbsp;**options**&nbsp;parameters. |
| options | Object | No | - | For details, see the **options** parameters. |
- options parameters
| Name | Type | Mandatory | Default&nbsp;Value | Description |
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| width | Length | Yes | - | Width. |
| height | Length | Yes | - | Height. |
......@@ -36,12 +36,12 @@ Line(options?: {width: Length, height: Length})
## Attributes
| Name | Type | Default&nbsp;Value | Mandatory | Description |
| Name | Type | Default Value | Mandatory | Description |
| -------- | -------- | -------- | -------- | -------- |
| width | Length | 0 | No | Width&nbsp;of&nbsp;the&nbsp;rectangle&nbsp;where&nbsp;the&nbsp;straight&nbsp;line&nbsp;is&nbsp;located. |
| height | Length | 0 | No | Height&nbsp;of&nbsp;the&nbsp;rectangle&nbsp;where&nbsp;the&nbsp;straight&nbsp;line&nbsp;is&nbsp;located. |
| startPoint | Point | [0,&nbsp;0] | Yes | Coordinate&nbsp;(relative&nbsp;coordinate)&nbsp;of&nbsp;the&nbsp;start&nbsp;point&nbsp;of&nbsp;the&nbsp;straight&nbsp;line. |
| endPoint | Point | [0,&nbsp;0] | Yes | Coordinate&nbsp;(relative&nbsp;coordinate)&nbsp;of&nbsp;the&nbsp;end&nbsp;point&nbsp;of&nbsp;the&nbsp;straight&nbsp;line. |
| width | Length | 0 | No | Width of the rectangle where the straight line is located. |
| height | Length | 0 | No | Height of the rectangle where the straight line is located. |
| startPoint | Point | [0, 0] | Yes | Coordinate (relative coordinate) of the start point of the straight line. |
| endPoint | Point | [0, 0] | Yes | Coordinate (relative coordinate) of the end point of the straight line. |
## Example
......
# Path
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
......@@ -20,11 +20,11 @@ None
## Attributes
| Name | Type | Default&nbsp;Value | Mandatory | Description |
| Name | Type | Default Value | Mandatory | Description |
| -------- | -------- | -------- | -------- | -------- |
| width | Length | 0 | No | Width&nbsp;of&nbsp;the&nbsp;rectangle&nbsp;where&nbsp;the&nbsp;path&nbsp;is&nbsp;located. |
| height | Length | 0 | No | Height&nbsp;of&nbsp;the&nbsp;rectangle&nbsp;where&nbsp;the&nbsp;path&nbsp;is&nbsp;located. |
| commands | string | '' | Yes | Command&nbsp;string&nbsp;for&nbsp;drawing&nbsp;the&nbsp;path. |
| width | Length | 0 | No | Width of the rectangle where the path is located. |
| height | Length | 0 | No | Height of the rectangle where the path is located. |
| commands | string | '' | Yes | Command string for drawing the path. |
The supported commands are as follows:
......
# Polygon
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
......@@ -23,12 +23,12 @@ None
Polygon(value:{options?: {width: Length, height: Length}})
- Parameters
| Name | Type | Mandatory | Default&nbsp;Value | Description |
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| options | Object | No | - | For&nbsp;details,&nbsp;see&nbsp;the&nbsp;**options**&nbsp;parameters. |
| options | Object | No | - | For details, see the **options** parameters. |
- options parameters
| Name | Type | Mandatory | Default&nbsp;Value | Description |
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| width | Length | Yes | - | Width. |
| height | Length | Yes | - | Height. |
......@@ -36,11 +36,11 @@ Polygon(value:{options?: {width: Length, height: Length}})
## Attributes
| Name | Type | Default&nbsp;Value | Mandatory | Description |
| Name | Type | Default Value | Mandatory | Description |
| -------- | -------- | -------- | -------- | -------- |
| width | Length | 0 | No | Width&nbsp;of&nbsp;the&nbsp;rectangle&nbsp;where&nbsp;the&nbsp;polygon&nbsp;is&nbsp;located. |
| height | Length | 0 | No | Height&nbsp;of&nbsp;the&nbsp;rectangle&nbsp;where&nbsp;the&nbsp;polygon&nbsp;is&nbsp;located. |
| points | Array&lt;Point&gt; | - | Yes | Vertex&nbsp;coordinates&nbsp;of&nbsp;the&nbsp;polygon. |
| width | Length | 0 | No | Width of the rectangle where the polygon is located. |
| height | Length | 0 | No | Height of the rectangle where the polygon is located. |
| points | Array&lt;Point&gt; | - | Yes | Vertex coordinates of the polygon. |
## Example
......
# Polyline
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
......@@ -23,12 +23,12 @@ None
Polyline(options?: {width: Length, height: Length})
- Parameters
| Name | Type | Mandatory | Default&nbsp;Value | Description |
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| options | Object | No | - | For&nbsp;details,&nbsp;see&nbsp;the&nbsp;**options**&nbsp;parameters. |
| options | Object | No | - | For details, see the **options** parameters. |
- options parameters
| Name | Type | Mandatory | Default&nbsp;Value | Description |
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| width | Length | Yes | - | Width. |
| height | Length | Yes | - | Height. |
......@@ -36,11 +36,11 @@ Polyline(options?: {width: Length, height: Length})
## Attributes
| Name | Type | Default&nbsp;Value | Mandatory | Description |
| Name | Type | Default Value | Mandatory | Description |
| -------- | -------- | -------- | -------- | -------- |
| width | Length | 0 | No | Width&nbsp;of&nbsp;the&nbsp;rectangle&nbsp;where&nbsp;the&nbsp;polyline&nbsp;is&nbsp;located. |
| height | Length | 0 | No | Height&nbsp;of&nbsp;the&nbsp;rectangle&nbsp;where&nbsp;the&nbsp;polyline&nbsp;is&nbsp;located. |
| points | Array&lt;Point&gt; | - | Yes | List&nbsp;of&nbsp;coordinates&nbsp;that&nbsp;the&nbsp;polyline&nbsp;passes&nbsp;through. |
| width | Length | 0 | No | Width of the rectangle where the polyline is located. |
| height | Length | 0 | No | Height of the rectangle where the polyline is located. |
| points | Array&lt;Point&gt; | - | Yes | List of coordinates that the polyline passes through. |
## Example
......
# Rect
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
......@@ -23,29 +23,29 @@ None
Rect(value:{options?: {width: Length,height: Length,radius?: Length | Array&lt;Length&gt;} | {width: Length,height: Length,radiusWidth?: Length,radiusHeight?: Length}})
- Parameters
| Name | Type | Mandatory | Default&nbsp;Value | Description |
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| options | Object | No | - | For&nbsp;details,&nbsp;see&nbsp;the&nbsp;**options**&nbsp;parameters. |
| options | Object | No | - | For details, see the **options** parameters. |
- options parameters
| Name | Type | Mandatory | Default&nbsp;Value | Description |
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| width | Length | Yes | - | Width. |
| height | Length | Yes | - | Height. |
| radius | Length&nbsp;\|&nbsp;Array&lt;Length&gt; | No | 0 | Radius&nbsp;of&nbsp;a&nbsp;rounded&nbsp;corner.&nbsp;You&nbsp;can&nbsp;set&nbsp;the&nbsp;radius&nbsp;of&nbsp;four&nbsp;rounded&nbsp;corners. |
| radiusWidth | Length | No | 0 | Width&nbsp;of&nbsp;the&nbsp;rounded&nbsp;corner. |
| radiusHeight | Length | No | 0 | Height&nbsp;of&nbsp;the&nbsp;rounded&nbsp;corner. |
| radius | Length \| Array&lt;Length&gt; | No | 0 | Radius of a rounded corner. You can set the radius of four rounded corners. |
| radiusWidth | Length | No | 0 | Width of the rounded corner. |
| radiusHeight | Length | No | 0 | Height of the rounded corner. |
## Attributes
| Name | Type | Default&nbsp;Value | Mandatory | Description |
| Name | Type | Default Value | Mandatory | Description |
| -------- | -------- | -------- | -------- | -------- |
| width | Length | 0 | No | Width. |
| height | Length | 0 | No | Height. |
| radiusWidth | Length | 0 | No | Width&nbsp;of&nbsp;a&nbsp;rounded&nbsp;corner.&nbsp;The&nbsp;width&nbsp;and&nbsp;height&nbsp;are&nbsp;the&nbsp;same&nbsp;when&nbsp;only&nbsp;the&nbsp;width&nbsp;is&nbsp;set. |
| radiusHeight | Length | 0 | No | Height&nbsp;of&nbsp;the&nbsp;rounded&nbsp;corner.&nbsp;The&nbsp;width&nbsp;and&nbsp;height&nbsp;are&nbsp;the&nbsp;same&nbsp;only&nbsp;when&nbsp;the&nbsp;height&nbsp;is&nbsp;set. |
| radius | Length&nbsp;\|&nbsp;Array&lt;Length&gt; | 0 | No | Size&nbsp;of&nbsp;the&nbsp;rounded&nbsp;corner. |
| radiusWidth | Length | 0 | No | Width of a rounded corner. The width and height are the same when only the width is set. |
| radiusHeight | Length | 0 | No | Height of the rounded corner. The width and height are the same only when the height is set. |
| radius | Length \| Array&lt;Length&gt; | 0 | No | Size of the rounded corner. |
## Example
......
# Shape
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
......@@ -29,33 +29,33 @@ The **&lt;Shape&gt;** component can contain child components.
Shape(value:{target?: PixelMap})
- Parameters
| Name | Type | Mandatory | Default&nbsp;Value | Description |
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| target | PixelMap | No | null | Shape&nbsp;to&nbsp;draw.&nbsp;You&nbsp;can&nbsp;draw&nbsp;a&nbsp;shape&nbsp;in&nbsp;the&nbsp;specified&nbsp;**PixelMap**&nbsp;object.&nbsp;If&nbsp;no&nbsp;object&nbsp;is&nbsp;specified,&nbsp;the&nbsp;shape&nbsp;is&nbsp;drawn&nbsp;in&nbsp;the&nbsp;current&nbsp;drawing&nbsp;target. |
| target | PixelMap | No | null | Shape to draw. You can draw a shape in the specified **PixelMap** object. If no object is specified, the shape is drawn in the current drawing target. |
## Attributes
| Name | Type | Default&nbsp;Value | Mandatory | Description |
| Name | Type | Default Value | Mandatory | Description |
| -------- | -------- | -------- | -------- | -------- |
| viewPort | {<br/>x:&nbsp;Length,<br/>y:&nbsp;Length,<br/>width:&nbsp;Length,<br/>height:&nbsp;Length<br/>} | - | Yes | View&nbsp;port&nbsp;of&nbsp;the&nbsp;shape. |
| fill | Color | Black | No | Fill&nbsp;color. |
| stroke | Color | - | No | Stroke&nbsp;color. |
| strokeDashArray | Array&lt;Length&gt; | [] | No | Stroke&nbsp;dash. |
| strokeDashOffset | Length | 0 | No | Offset&nbsp;of&nbsp;the&nbsp;start&nbsp;point&nbsp;for&nbsp;drawing&nbsp;the&nbsp;stroke. |
| strokeLineCap | LineCapStyle | LineCapStyle.Butt | No | Cap&nbsp;style&nbsp;of&nbsp;the&nbsp;stroke. |
| strokeLineJoin | LineJoinStyle | LineJoinStyle.Miter | No | Join&nbsp;style&nbsp;of&nbsp;the&nbsp;stroke. |
| strokeMiterLimit | number | 4 | No | Limit&nbsp;value&nbsp;when&nbsp;the&nbsp;sharp&nbsp;angle&nbsp;is&nbsp;drawn&nbsp;as&nbsp;a&nbsp;miter. |
| strokeOpacity | number | 1 | No | Stroke&nbsp;opacity. |
| strokeWidth | Length | 1 | No | Stroke&nbsp;width. |
| antiAlias | boolean | true | No | Whether&nbsp;anti-aliasing&nbsp;is&nbsp;enabled. |
| viewPort | {<br/>x: Length,<br/>y: Length,<br/>width: Length,<br/>height: Length<br/>} | - | Yes | View port of the shape. |
| fill | Color | Black | No | Fill color. |
| stroke | Color | - | No | Stroke color. |
| strokeDashArray | Array&lt;Length&gt; | [] | No | Stroke dash. |
| strokeDashOffset | Length | 0 | No | Offset of the start point for drawing the stroke. |
| strokeLineCap | LineCapStyle | LineCapStyle.Butt | No | Cap style of the stroke. |
| strokeLineJoin | LineJoinStyle | LineJoinStyle.Miter | No | Join style of the stroke. |
| strokeMiterLimit | number | 4 | No | Limit value when the sharp angle is drawn as a miter. |
| strokeOpacity | number | 1 | No | Stroke opacity. |
| strokeWidth | Length | 1 | No | Stroke width. |
| antiAlias | boolean | true | No | Whether anti-aliasing is enabled. |
- LineJoinStyle enums
| Name | Description |
| -------- | -------- |
| Bevel | Bevel&nbsp;is&nbsp;used&nbsp;to&nbsp;connect&nbsp;paths. |
| Miter | Miter&nbsp;is&nbsp;used&nbsp;to&nbsp;connect&nbsp;paths. |
| Round | Round&nbsp;is&nbsp;used&nbsp;to&nbsp;connect&nbsp;paths. |
| Bevel | Bevel is used to connect paths. |
| Miter | Miter is used to connect paths. |
| Round | Round is used to connect paths. |
## Example
......
# Explicit Animation
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> This animation is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
| Name | Description |
| -------- | -------- |
| animateTo(value:&nbsp;[AnimationOption](#animationoption-object),&nbsp;event:&nbsp;()=&gt;&nbsp;void)&nbsp;:&nbsp;void | Provides&nbsp;a&nbsp;transition&nbsp;animation&nbsp;when&nbsp;the&nbsp;status&nbsp;changes&nbsp;due&nbsp;to&nbsp;the&nbsp;closure&nbsp;code.<br/>**event**&nbsp;specifies&nbsp;the&nbsp;closure&nbsp;function&nbsp;that&nbsp;displays&nbsp;the&nbsp;dynamic&nbsp;effect.&nbsp;The&nbsp;system&nbsp;automatically&nbsp;inserts&nbsp;the&nbsp;transition&nbsp;animation&nbsp;if&nbsp;the&nbsp;status&nbsp;changes&nbsp;in&nbsp;the&nbsp;closure&nbsp;function. |
| animateTo(value: [AnimationOption](#animationoption-object), event: ()=&gt; void) : void | Provides a transition animation when the status changes due to the closure code.<br/>**event** specifies the closure function that displays the dynamic effect. The system automatically inserts the transition animation if the status changes in the closure function. |
## AnimationOption Object
- Attributes
| Name | Type | Default&nbsp;Value | Description |
| Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- |
| duration | number | 1000 | Animation&nbsp;duration,&nbsp;in&nbsp;ms. |
| tempo | number | 1.0 | Animation&nbsp;playback&nbsp;speed.&nbsp;A&nbsp;larger&nbsp;value&nbsp;indicates&nbsp;faster&nbsp;animation&nbsp;playback,&nbsp;and&nbsp;a&nbsp;smaller&nbsp;value&nbsp;indicates&nbsp;slower&nbsp;animation&nbsp;playback.&nbsp;The&nbsp;value&nbsp;**0**&nbsp;means&nbsp;that&nbsp;there&nbsp;is&nbsp;no&nbsp;animation. |
| curve | Curve&nbsp;\|&nbsp;Curves | Linear | Animation&nbsp;curve. |
| delay | number | 0 | Delay&nbsp;of&nbsp;animation&nbsp;playback,&nbsp;in&nbsp;ms.&nbsp;By&nbsp;default,&nbsp;the&nbsp;playback&nbsp;is&nbsp;not&nbsp;delayed. |
| iterations | number | 1 | Number&nbsp;of&nbsp;times&nbsp;that&nbsp;the&nbsp;animation&nbsp;is&nbsp;played.&nbsp;By&nbsp;default,&nbsp;the&nbsp;animation&nbsp;is&nbsp;played&nbsp;once.&nbsp;The&nbsp;value&nbsp;**-1**&nbsp;indicates&nbsp;that&nbsp;the&nbsp;animation&nbsp;is&nbsp;played&nbsp;for&nbsp;an&nbsp;unlimited&nbsp;number&nbsp;of&nbsp;times. |
| playMode | PlayMode | Normal | Animation&nbsp;playback&nbsp;mode.&nbsp;By&nbsp;default,&nbsp;the&nbsp;animation&nbsp;is&nbsp;played&nbsp;from&nbsp;the&nbsp;beginning&nbsp;after&nbsp;the&nbsp;playback&nbsp;is&nbsp;complete. |
| duration | number | 1000 | Animation duration, in ms. |
| tempo | number | 1.0 | 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. |
| curve | Curve \| Curves | Linear | Animation curve. |
| delay | number | 0 | Delay of animation playback, in ms. By default, the playback is not delayed. |
| iterations | number | 1 | 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. |
| playMode | PlayMode | Normal | Animation playback mode. By default, the animation is played from the beginning after the playback is complete. |
- APIs
| Name | Description |
| -------- | -------- |
| onFinish()&nbsp;=&gt;&nbsp;void | Callback&nbsp;invoked&nbsp;when&nbsp;the&nbsp;animation&nbsp;playback&nbsp;is&nbsp;complete. |
| onFinish() =&gt; void | Callback invoked when the animation playback is complete. |
## Example
......
# Gesture Binding Methods
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> This method is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
......@@ -16,29 +16,29 @@ None
Use the following attributes to bind gesture recognition to a component. When a gesture is recognized, the event callback is invoked to notify the component.
| Name | Type | Default&nbsp;Value | Description |
| Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- |
| gesture | gesture:&nbsp;GestureType,<br/>mask?:&nbsp;GestureMask | gesture:&nbsp;-,<br/>mask:&nbsp;GestureMask.Normal | Gesture&nbsp;to&nbsp;recognize.<br/>**gesture**&nbsp;specifies&nbsp;the&nbsp;type&nbsp;of&nbsp;the&nbsp;gesture&nbsp;to&nbsp;bind,&nbsp;and&nbsp;**mask**&nbsp;specifies&nbsp;the&nbsp;event&nbsp;response&nbsp;setting. |
| priorityGesture | gesture:&nbsp;GestureType,<br/>mask?:&nbsp;GestureMask | gesture:&nbsp;-,<br/>mask:&nbsp;GestureMask.Normal | Gesture&nbsp;to&nbsp;preferentially&nbsp;recognize.<br/>**gesture**&nbsp;specifies&nbsp;the&nbsp;type&nbsp;of&nbsp;the&nbsp;gesture&nbsp;to&nbsp;bind,&nbsp;and&nbsp;**mask**&nbsp;specifies&nbsp;the&nbsp;event&nbsp;response&nbsp;setting.<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**NOTE:**<br/>>&nbsp;-&nbsp;By&nbsp;default,&nbsp;the&nbsp;child&nbsp;component&nbsp;takes&nbsp;precedence&nbsp;over&nbsp;the&nbsp;parent&nbsp;component&nbsp;in&nbsp;gesture&nbsp;recognition.&nbsp;When&nbsp;**priorityGesture**&nbsp;is&nbsp;configured&nbsp;for&nbsp;the&nbsp;parent&nbsp;component,&nbsp;the&nbsp;parent&nbsp;component&nbsp;takes&nbsp;precedence&nbsp;over&nbsp;the&nbsp;child&nbsp;component&nbsp;in&nbsp;gesture&nbsp;recognition. |
| parallelGesture | gesture:&nbsp;GestureType,<br/>mask?:&nbsp;GestureMask | gesture:&nbsp;-,<br/>mask:&nbsp;GestureMask.Normal | Gesture&nbsp;that&nbsp;can&nbsp;be&nbsp;triggered&nbsp;together&nbsp;with&nbsp;the&nbsp;child&nbsp;component&nbsp;gesture.<br/>**gesture**&nbsp;specifies&nbsp;the&nbsp;type&nbsp;of&nbsp;the&nbsp;gesture&nbsp;to&nbsp;bind,&nbsp;and&nbsp;**mask**&nbsp;specifies&nbsp;the&nbsp;event&nbsp;response&nbsp;setting.<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**NOTE:**<br/>>&nbsp;-&nbsp;The&nbsp;gesture&nbsp;event&nbsp;is&nbsp;not&nbsp;a&nbsp;bubbling&nbsp;event.&nbsp;When&nbsp;**parallelGesture**&nbsp;is&nbsp;set&nbsp;for&nbsp;the&nbsp;parent&nbsp;component,&nbsp;gesture&nbsp;events&nbsp;that&nbsp;are&nbsp;the&nbsp;same&nbsp;for&nbsp;the&nbsp;parent&nbsp;component&nbsp;and&nbsp;child&nbsp;components&nbsp;can&nbsp;be&nbsp;triggered,&nbsp;thereby&nbsp;implementing&nbsp;a&nbsp;bubbling&nbsp;effect. |
| gesture | gesture: GestureType,<br/>mask?: GestureMask | gesture: -,<br/>mask: GestureMask.Normal | Gesture to recognize.<br/>**gesture** specifies the type of the gesture to bind, and **mask** specifies the event response setting. |
| priorityGesture | gesture: GestureType,<br/>mask?: GestureMask | gesture: -,<br/>mask: GestureMask.Normal | Gesture to preferentially recognize.<br/>**gesture** specifies the type of the gesture to bind, and **mask** specifies the event response setting.<br/>> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**<br/>> - By default, the child component takes precedence over the parent component in gesture recognition. When **priorityGesture** is configured for the parent component, the parent component takes precedence over the child component in gesture recognition. |
| parallelGesture | gesture: GestureType,<br/>mask?: GestureMask | gesture: -,<br/>mask: GestureMask.Normal | Gesture that can be triggered together with the child component gesture.<br/>**gesture** specifies the type of the gesture to bind, and **mask** specifies the event response setting.<br/>> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**<br/>> - The gesture event is not a bubbling event. When **parallelGesture** is set for the parent component, gesture events that are the same for the parent component and child components can be triggered, thereby implementing a bubbling effect. |
- GestureMask enums
| Name | Description |
| -------- | -------- |
| Normal | The&nbsp;gestures&nbsp;of&nbsp;child&nbsp;components&nbsp;are&nbsp;not&nbsp;masked&nbsp;and&nbsp;are&nbsp;recognized&nbsp;based&nbsp;on&nbsp;the&nbsp;default&nbsp;gesture&nbsp;recognition&nbsp;sequence. |
| IgnoreInternal | The&nbsp;gestures&nbsp;of&nbsp;child&nbsp;components&nbsp;are&nbsp;masked.&nbsp;Only&nbsp;the&nbsp;gestures&nbsp;of&nbsp;the&nbsp;current&nbsp;component&nbsp;are&nbsp;recognized.<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**NOTE:**<br/>>&nbsp;However,&nbsp;the&nbsp;built-in&nbsp;gestures&nbsp;of&nbsp;the&nbsp;child&nbsp;components&nbsp;are&nbsp;not&nbsp;masked.&nbsp;For&nbsp;example,&nbsp;when&nbsp;the&nbsp;child&nbsp;component&nbsp;is&nbsp;a&nbsp;**&lt;List&gt;**&nbsp;component,&nbsp;the&nbsp;built-in&nbsp;sliding&nbsp;gestures&nbsp;can&nbsp;still&nbsp;be&nbsp;triggered. |
| Normal | The gestures of child components are not masked and are recognized based on the default gesture recognition sequence. |
| IgnoreInternal | The gestures of child components are masked. Only the gestures of the current component are recognized.<br/>> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**<br/>> However, the built-in gestures of the child components are not masked. For example, when the child component is a **&lt;List&gt;** component, the built-in sliding gestures can still be triggered. |
- Gesture types
| Name | Description |
| -------- | -------- |
| TapGesture | Tap&nbsp;gesture,&nbsp;which&nbsp;can&nbsp;be&nbsp;a&nbsp;single-tap&nbsp;or&nbsp;multi-tap&nbsp;gesture. |
| LongPressGesture | Long&nbsp;press&nbsp;gesture. |
| PanGesture | Pan&nbsp;gesture. |
| PinchGesture | Pinch&nbsp;gesture. |
| RotationGesture | Rotation&nbsp;gesture. |
| GestureGroup | A&nbsp;group&nbsp;of&nbsp;gestures.&nbsp;Continuous&nbsp;recognition,&nbsp;parallel&nbsp;recognition,&nbsp;and&nbsp;exclusive&nbsp;recognition&nbsp;are&nbsp;supported. |
| TapGesture | Tap gesture, which can be a single-tap or multi-tap gesture. |
| LongPressGesture | Long press gesture. |
| PanGesture | Pan gesture. |
| PinchGesture | Pinch gesture. |
| RotationGesture | Rotation gesture. |
| GestureGroup | A group of gestures. Continuous recognition, parallel recognition, and exclusive recognition are supported. |
## Gesture Response Event
......@@ -48,13 +48,13 @@ The component uses the **gesture** method to bind the gesture object and uses th
- TapGesture events
| Name | Description |
| -------- | -------- |
| onAction((event?:&nbsp;GestureEvent)&nbsp;=&gt;&nbsp;void) | Callback&nbsp;invoked&nbsp;when&nbsp;a&nbsp;tap&nbsp;gesture&nbsp;is&nbsp;recognized. |
| onAction((event?: GestureEvent) =&gt; void) | Callback invoked when a tap gesture is recognized. |
- GestureEvent attributes
| Name | Type | Description |
| -------- | -------- | -------- |
| timestamp | number | Timestamp&nbsp;of&nbsp;the&nbsp;event. |
| target<sup>8+</sup> | EventTarget | Object&nbsp;that&nbsp;triggers&nbsp;the&nbsp;gesture&nbsp;event. |
| timestamp | number | Timestamp of the event. |
| target<sup>8+</sup> | EventTarget | Object that triggers the gesture event. |
## Example
......
# Interpolation Calculation
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> This animation is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
......@@ -27,9 +27,9 @@ Implements initialization for the interpolation curve, which is used to create a
- Parameters
| Name | Type | Mandatory | Default&nbsp;Value | Description |
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| curve | Curve | No | Linear | Curve&nbsp;object. |
| curve | Curve | No | Linear | Curve object. |
- Return values
Curve object.
......@@ -44,10 +44,10 @@ Constructs a step curve object.
- Parameters
| Name | Type | Mandatory | Default&nbsp;Value | Description |
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| count | number | Yes | - | Number&nbsp;of&nbsp;steps.&nbsp;Must&nbsp;be&nbsp;a&nbsp;positive&nbsp;integer. |
| end | boolean | No | true | Step&nbsp;change&nbsp;at&nbsp;the&nbsp;start&nbsp;or&nbsp;end&nbsp;point&nbsp;of&nbsp;each&nbsp;interval.&nbsp;Defaults&nbsp;to&nbsp;**true**,&nbsp;indicating&nbsp;that&nbsp;the&nbsp;step&nbsp;change&nbsp;occurs&nbsp;at&nbsp;the&nbsp;end&nbsp;point. |
| count | number | Yes | - | Number of steps. Must be a positive integer. |
| end | boolean | No | true | Step change at the start or end point of each interval. Defaults to **true**, indicating that the step change occurs at the end point. |
- Return values
Curve object.
......@@ -64,10 +64,10 @@ Constructs a third-order Bezier curve object. The curve value must be between 0
- Parameters
| Name | Type | Mandatory | Description |
| -------- | -------- | -------- | -------- |
| x1 | number | Yes | Horizontal&nbsp;coordinate&nbsp;of&nbsp;the&nbsp;first&nbsp;point&nbsp;on&nbsp;the&nbsp;Bezier&nbsp;curve. |
| y1 | number | Yes | Vertical&nbsp;coordinate&nbsp;of&nbsp;the&nbsp;first&nbsp;point&nbsp;on&nbsp;the&nbsp;Bezier&nbsp;curve. |
| x2 | number | Yes | Horizontal&nbsp;coordinate&nbsp;of&nbsp;the&nbsp;second&nbsp;point&nbsp;on&nbsp;the&nbsp;Bezier&nbsp;curve. |
| y2 | number | Yes | Vertical&nbsp;coordinate&nbsp;of&nbsp;the&nbsp;second&nbsp;point&nbsp;on&nbsp;the&nbsp;Bezier&nbsp;curve. |
| x1 | number | Yes | Horizontal coordinate of the first point on the Bezier curve. |
| y1 | number | Yes | Vertical coordinate of the first point on the Bezier curve. |
| x2 | number | Yes | Horizontal coordinate of the second point on the Bezier curve. |
| y2 | number | Yes | Vertical coordinate of the second point on the Bezier curve. |
- Return values
Curve object.
......@@ -84,7 +84,7 @@ Constructs a spring curve object.
- Parameters
| Name | Type | Mandatory | Description |
| -------- | -------- | -------- | -------- |
| velocity | number | Yes | Initial&nbsp;velocity. |
| velocity | number | Yes | Initial velocity. |
| mass | number | Yes | Mass. |
| stiffness | number | Yes | Stiffness. |
| damping | number | Yes | Damping. |
......@@ -108,7 +108,7 @@ let curve3 = Curves.cubicBezier(0.1, 0.0, 0.1, 1.0) // Create a third-order Bezi
Curve objects can be created only by the preceding APIs.
| API | Description |
| -------- | -------- |
| interpolate(time:&nbsp;number):&nbsp;number | Calculation&nbsp;function&nbsp;of&nbsp;the&nbsp;interpolation&nbsp;curve.&nbsp;Passing&nbsp;a&nbsp;normalized&nbsp;time&nbsp;parameter&nbsp;to&nbsp;this&nbsp;function&nbsp;returns&nbsp;the&nbsp;current&nbsp;interpolation.<br/>**time**:&nbsp;indicates&nbsp;the&nbsp;current&nbsp;normalized&nbsp;time.&nbsp;The&nbsp;value&nbsp;ranges&nbsp;from&nbsp;0&nbsp;to&nbsp;1.<br/>The&nbsp;curve&nbsp;interpolation&nbsp;corresponding&nbsp;to&nbsp;the&nbsp;normalized&nbsp;time&nbsp;point&nbsp;is&nbsp;returned. |
| interpolate(time: number): number | Calculation function of the interpolation curve. Passing a normalized time parameter to this function returns the current interpolation.<br/>**time**: indicates the current normalized time. The value ranges from 0 to 1.<br/>The curve interpolation corresponding to the normalized time point is returned. |
- Example
......
# Matrix Transformation
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> This animation is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
......@@ -27,34 +27,34 @@ Matrix constructor, which is used to create a 4x4 matrix by using the input para
- Parameters
| Name | Type | Mandatory | Default&nbsp;Value | Description |
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| array | Array&lt;number&gt; | Yes | [1,&nbsp;0,&nbsp;0,&nbsp;0,<br/>0,&nbsp;1,&nbsp;0,&nbsp;0,<br/>0,&nbsp;0,&nbsp;1,&nbsp;0,<br/>0,&nbsp;0,&nbsp;0,&nbsp;1] | A&nbsp;number&nbsp;array&nbsp;whose&nbsp;length&nbsp;is&nbsp;16&nbsp;(4&nbsp;x&nbsp;4).&nbsp;For&nbsp;details,&nbsp;see&nbsp;the&nbsp;parameter description. |
| array | Array&lt;number&gt; | Yes | [1, 0, 0, 0,<br/>0, 1, 0, 0,<br/>0, 0, 1, 0,<br/>0, 0, 0, 1] | A number array whose length is 16 (4 x 4). For details, see the parameter description. |
- Return values
| Type | Description |
| -------- | -------- |
| Object | 4x4&nbsp;matrix&nbsp;object&nbsp;created&nbsp;based&nbsp;on&nbsp;the&nbsp;input&nbsp;parameter. |
| Object | 4x4 matrix object created based on the input parameter. |
- Parameter description
| Name | Type | Mandatory | Description |
| -------- | -------- | -------- | -------- |
| m00 | number | Yes | Scaling&nbsp;value&nbsp;of&nbsp;the&nbsp;x-axis.&nbsp;Defaults&nbsp;to&nbsp;**1**&nbsp;for&nbsp;the&nbsp;unit&nbsp;matrix. |
| m01 | number | Yes | The&nbsp;second&nbsp;value,&nbsp;which&nbsp;is&nbsp;affected&nbsp;by&nbsp;the&nbsp;rotation&nbsp;of&nbsp;the&nbsp;x,&nbsp;y,&nbsp;and&nbsp;z&nbsp;axes. |
| m02 | number | Yes | The&nbsp;third&nbsp;value,&nbsp;which&nbsp;is&nbsp;affected&nbsp;by&nbsp;the&nbsp;rotation&nbsp;of&nbsp;the&nbsp;x,&nbsp;y,&nbsp;and&nbsp;z&nbsp;axes. |
| m00 | number | Yes | Scaling value of the x-axis. Defaults to **1** for the unit matrix. |
| m01 | number | Yes | The second value, which is affected by the rotation of the x, y, and z axes. |
| m02 | number | Yes | The third value, which is affected by the rotation of the x, y, and z axes. |
| m03 | number | Yes | Meaningless. |
| m10 | number | Yes | The&nbsp;fifth&nbsp;value,&nbsp;which&nbsp;is&nbsp;affected&nbsp;by&nbsp;the&nbsp;rotation&nbsp;of&nbsp;the&nbsp;x,&nbsp;y,&nbsp;and&nbsp;z&nbsp;axes. |
| m11 | number | Yes | Scaling&nbsp;value&nbsp;of&nbsp;the&nbsp;y-axis.&nbsp;Defaults&nbsp;to&nbsp;**1**&nbsp;for&nbsp;the&nbsp;unit&nbsp;matrix. |
| m12 | number | Yes | The&nbsp;seventh&nbsp;value,&nbsp;which&nbsp;is&nbsp;affected&nbsp;by&nbsp;the&nbsp;rotation&nbsp;of&nbsp;the&nbsp;x,&nbsp;y,&nbsp;and&nbsp;z&nbsp;axes. |
| m10 | number | Yes | The fifth value, which is affected by the rotation of the x, y, and z axes. |
| m11 | number | Yes | Scaling value of the y-axis. Defaults to **1** for the unit matrix. |
| m12 | number | Yes | The seventh value, which is affected by the rotation of the x, y, and z axes. |
| m13 | number | Yes | Meaningless. |
| m20 | number | Yes | The&nbsp;ninth&nbsp;value,&nbsp;which&nbsp;is&nbsp;affected&nbsp;by&nbsp;the&nbsp;rotation&nbsp;of&nbsp;the&nbsp;x,&nbsp;y,&nbsp;and&nbsp;z&nbsp;axes. |
| m21 | number | Yes | The&nbsp;tenth&nbsp;value,&nbsp;which&nbsp;is&nbsp;affected&nbsp;by&nbsp;the&nbsp;rotation&nbsp;of&nbsp;the&nbsp;x,&nbsp;y,&nbsp;and&nbsp;z&nbsp;axes. |
| m22 | number | Yes | Scaling&nbsp;value&nbsp;of&nbsp;the&nbsp;z-axis.&nbsp;Defaults&nbsp;to&nbsp;**1**&nbsp;for&nbsp;the&nbsp;unit&nbsp;matrix. |
| m20 | number | Yes | The ninth value, which is affected by the rotation of the x, y, and z axes. |
| m21 | number | Yes | The tenth value, which is affected by the rotation of the x, y, and z axes. |
| m22 | number | Yes | Scaling value of the z-axis. Defaults to **1** for the unit matrix. |
| m23 | number | Yes | Meaningless. |
| m30 | number | Yes | Translation&nbsp;value&nbsp;of&nbsp;the&nbsp;x-axis,&nbsp;in&nbsp;px.&nbsp;Defaults&nbsp;to&nbsp;**0**&nbsp;for&nbsp;the&nbsp;unit&nbsp;matrix. |
| m31 | number | Yes | Translation&nbsp;value&nbsp;of&nbsp;the&nbsp;y-axis,&nbsp;in&nbsp;px.&nbsp;Defaults&nbsp;to&nbsp;**0**&nbsp;for&nbsp;the&nbsp;unit&nbsp;matrix. |
| m32 | number | Yes | Translation&nbsp;value&nbsp;of&nbsp;the&nbsp;z-axis,&nbsp;in&nbsp;px.&nbsp;Defaults&nbsp;to&nbsp;**0**&nbsp;for&nbsp;the&nbsp;unit&nbsp;matrix. |
| m33 | number | Yes | Valid&nbsp;in&nbsp;homogeneous&nbsp;coordinates,&nbsp;presenting&nbsp;the&nbsp;perspective&nbsp;projection&nbsp;effect. |
| m30 | number | Yes | Translation value of the x-axis, in px. Defaults to **0** for the unit matrix. |
| m31 | number | Yes | Translation value of the y-axis, in px. Defaults to **0** for the unit matrix. |
| m32 | number | Yes | Translation value of the z-axis, in px. Defaults to **0** for the unit matrix. |
| m33 | number | Yes | Valid in homogeneous coordinates, presenting the perspective projection effect. |
- Example
......@@ -79,7 +79,7 @@ Matrix initialization function. Can return a unit matrix object.
- Return values
| Type | Description |
| -------- | -------- |
| Object | Unit&nbsp;matrix&nbsp;object. |
| Object | Unit matrix object. |
- Example
......@@ -105,7 +105,7 @@ Matrix copy function, which is used to copy the current matrix object.
- Return values
| Type | Description |
| -------- | -------- |
| Object | Copy&nbsp;object&nbsp;of&nbsp;the&nbsp;current&nbsp;matrix. |
| Object | Copy object of the current matrix. |
- Example
......@@ -147,14 +147,14 @@ Matrix overlay function, which is used to overlay the effects of two matrices to
- Parameters
| Name | Type | Mandatory | Default&nbsp;Value | Description |
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| matrix | Matrix4 | Yes | - | Matrix&nbsp;object&nbsp;to&nbsp;be&nbsp;overlaid. |
| matrix | Matrix4 | Yes | - | Matrix object to be overlaid. |
- Return values
| Type | Description |
| -------- | -------- |
| Object | Object&nbsp;after&nbsp;matrix&nbsp;overlay. |
| Object | Object after matrix overlay. |
- Example
......@@ -191,7 +191,7 @@ Matrix inverse function. Can return an inverse matrix of the current matrix obje
- Return values
| Type | Description |
| -------- | -------- |
| Object | Inverse&nbsp;matrix&nbsp;object&nbsp;of&nbsp;the&nbsp;current&nbsp;matrix. |
| Object | Inverse matrix object of the current matrix. |
- Example
......@@ -212,17 +212,17 @@ Matrix translation function, which is used to add the translation effect to the
- Parameters
| Name | Type | Mandatory | Default&nbsp;Value | Description |
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| x | number | No | 0 | Translation&nbsp;distance&nbsp;of&nbsp;the&nbsp;x-axis,&nbsp;in&nbsp;px. |
| y | number | No | 0 | Translation&nbsp;distance&nbsp;of&nbsp;the&nbsp;y-axis,&nbsp;in&nbsp;px. |
| z | number | No | 0 | Translation&nbsp;distance&nbsp;of&nbsp;the&nbsp;z-axis,&nbsp;in&nbsp;px. |
| x | number | No | 0 | Translation distance of the x-axis, in px. |
| y | number | No | 0 | Translation distance of the y-axis, in px. |
| z | number | No | 0 | Translation distance of the z-axis, in px. |
- Return values
| Type | Description |
| -------- | -------- |
| Object | Matrix&nbsp;object&nbsp;after&nbsp;the&nbsp;translation&nbsp;effect&nbsp;is&nbsp;added. |
| Object | Matrix object after the translation effect is added. |
- Example
......@@ -254,19 +254,19 @@ Matrix scaling function, which is used to add the scaling effect to the x, y, an
- Parameters
| Name | Type | Mandatory | Default&nbsp;Value | Description |
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| x | number | No | 1 | Scaling&nbsp;multiple&nbsp;of&nbsp;the&nbsp;x-axis. |
| y | number | No | 1 | Scaling&nbsp;multiple&nbsp;of&nbsp;the&nbsp;y-axis. |
| z | number | No | 1 | Scaling&nbsp;multiple&nbsp;of&nbsp;the&nbsp;z-axis. |
| centerX | number | No | 0 | X&nbsp;coordinate&nbsp;of&nbsp;the&nbsp;center&nbsp;point. |
| centerY | number | No | 0 | Y&nbsp;coordinate&nbsp;of&nbsp;the&nbsp;center&nbsp;point. |
| x | number | No | 1 | Scaling multiple of the x-axis. |
| y | number | No | 1 | Scaling multiple of the y-axis. |
| z | number | No | 1 | Scaling multiple of the z-axis. |
| centerX | number | No | 0 | X coordinate of the center point. |
| centerY | number | No | 0 | Y coordinate of the center point. |
- Return values
| Type | Description |
| -------- | -------- |
| Object | Matrix&nbsp;object&nbsp;after&nbsp;the&nbsp;scaling&nbsp;effect&nbsp;is&nbsp;added. |
| Object | Matrix object after the scaling effect is added. |
- Example
......@@ -298,20 +298,20 @@ Matrix rotation function, which is used to add the rotation effect to the x, y,
- Parameters
| Name | Type | Mandatory | Default&nbsp;Value | Description |
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| x | number | No | 1 | X&nbsp;coordinate&nbsp;of&nbsp;the&nbsp;rotation&nbsp;axis&nbsp;vector. |
| y | number | No | 1 | Y&nbsp;coordinate&nbsp;of&nbsp;the&nbsp;rotation&nbsp;axis&nbsp;vector. |
| z | number | No | 1 | Z&nbsp;coordinate&nbsp;of&nbsp;the&nbsp;rotation&nbsp;axis&nbsp;vector. |
| angle | number | No | 0 | Rotation&nbsp;angle. |
| centerX | number | No | 0 | X&nbsp;coordinate&nbsp;of&nbsp;the&nbsp;center&nbsp;point. |
| centerY | number | No | 0 | Y&nbsp;coordinate&nbsp;of&nbsp;the&nbsp;center&nbsp;point. |
| x | number | No | 1 | X coordinate of the rotation axis vector. |
| y | number | No | 1 | Y coordinate of the rotation axis vector. |
| z | number | No | 1 | Z coordinate of the rotation axis vector. |
| angle | number | No | 0 | Rotation angle. |
| centerX | number | No | 0 | X coordinate of the center point. |
| centerY | number | No | 0 | Y coordinate of the center point. |
- Return values
| Type | Description |
| -------- | -------- |
| Object | Matrix&nbsp;object&nbsp;after&nbsp;the&nbsp;rotation&nbsp;effect&nbsp;is&nbsp;added. |
| Object | Matrix object after the rotation effect is added. |
- Example
......@@ -343,15 +343,15 @@ Matrix point transformation function, which is used to apply the current transfo
- Parameters
| Name | Type | Mandatory | Default&nbsp;Value | Description |
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| point | Point | Yes | - | Point&nbsp;to&nbsp;be&nbsp;transformed. |
| point | Point | Yes | - | Point to be transformed. |
- Return values
| Type | Description |
| -------- | -------- |
| Point | Point&nbsp;object&nbsp;after&nbsp;matrix&nbsp;transformation |
| Point | Point object after matrix transformation |
- Example
......
# Video
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
......@@ -18,69 +18,69 @@ The **&lt;Video&gt;** component does not support any child component.
Video(value: VideoOption)
- VideoOption attributes
| Name | Type | Mandatory | Default&nbsp;Value | Description |
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| src | string | No | - | Path&nbsp;of&nbsp;the&nbsp;video&nbsp;source. |
| currentProgressRate | number&nbsp;\|&nbsp;PlaybackSpeed<sup>8+</sup> | No | 1.0&nbsp;\|&nbsp;PlaybackSpeed.Speed_Forward_1_00_X | Video&nbsp;playback&nbsp;speed.<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**NOTE:**<br/>>&nbsp;The&nbsp;value&nbsp;of&nbsp;the&nbsp;number&nbsp;type&nbsp;can&nbsp;only&nbsp;be&nbsp;**0.75**,&nbsp;**1.0**,&nbsp;**1.25**,&nbsp;**1.75**,&nbsp;or&nbsp;**2.0**.<br/>>&nbsp;<br/>>&nbsp; |
| previewUri | string&nbsp;\|&nbsp;PixelMap<sup>8+</sup>&nbsp;\|[Resource](../../ui/ts-types.md) | No | - | Path&nbsp;of&nbsp;the&nbsp;preview&nbsp;image. |
| src | string | No | - | Path of the video source. |
| currentProgressRate | number \| PlaybackSpeed<sup>8+</sup> | No | 1.0 \| PlaybackSpeed.Speed_Forward_1_00_X | Video playback speed.<br/>> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**<br/>> The value of the number type can only be **0.75**, **1.0**, **1.25**, **1.75**, or **2.0**.<br/>> <br/>> |
| previewUri | string \| PixelMap<sup>8+</sup> \|[Resource](../../ui/ts-types.md) | No | - | Path of the preview image. |
| controller | [VideoController](#videocontroller) | No | - | Controller. |
- PlaybackSpeed<sup>8+</sup>
| Name | Description |
| -------- | -------- |
| Speed_Forward_0_75_X | 0.75x&nbsp;playback&nbsp;speed. |
| Speed_Forward_1_00_X | 1x&nbsp;playback&nbsp;speed. |
| Speed_Forward_1_25_X | 1.25x&nbsp;playback&nbsp;speed. |
| Speed_Forward_1_75_X | 1.75x&nbsp;playback&nbsp;speed. |
| Speed_Forward_2_00_X | 2x&nbsp;playback&nbsp;speed. |
| Speed_Forward_0_75_X | 0.75x playback speed. |
| Speed_Forward_1_00_X | 1x playback speed. |
| Speed_Forward_1_25_X | 1.25x playback speed. |
| Speed_Forward_1_75_X | 1.75x playback speed. |
| Speed_Forward_2_00_X | 2x playback speed. |
## Attributes
| Name | Type | Default&nbsp;Value | Description |
| Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- |
| muted | boolean | false | Whether&nbsp;the&nbsp;video&nbsp;is&nbsp;muted. |
| autoPlay | boolean | false | Whether&nbsp;the&nbsp;video&nbsp;is&nbsp;automatically&nbsp;played. |
| controls | boolean | true | Whether&nbsp;the&nbsp;video&nbsp;playback&nbsp;control&nbsp;bar&nbsp;is&nbsp;displayed. |
| objectFit | [ImageFit](ts-basic-components-image.md) | Cover | Video&nbsp;display&nbsp;mode. |
| loop | boolean | false | Whether&nbsp;a&nbsp;single&nbsp;video&nbsp;is&nbsp;played&nbsp;cyclically. |
| muted | boolean | false | Whether the video is muted. |
| autoPlay | boolean | false | Whether the video is automatically played. |
| controls | boolean | true | Whether the video playback control bar is displayed. |
| objectFit | [ImageFit](ts-basic-components-image.md) | Cover | Video display mode. |
| loop | boolean | false | Whether a single video is played cyclically. |
## Events
| Name | Description |
| -------- | -------- |
| onStart()&nbsp;=&gt;&nbsp;void | Triggered&nbsp;when&nbsp;the&nbsp;video&nbsp;is&nbsp;played. |
| onPause()&nbsp;=&gt;&nbsp;void | Triggered&nbsp;when&nbsp;the&nbsp;video&nbsp;playback&nbsp;is&nbsp;paused. |
| onFinish()&nbsp;=&gt;&nbsp;void | Triggered&nbsp;when&nbsp;the&nbsp;video&nbsp;playback&nbsp;is&nbsp;finished. |
| onError()&nbsp;=&gt;&nbsp;void | Triggered&nbsp;when&nbsp;the&nbsp;video&nbsp;playback&nbsp;fails. |
| onPrepared(event?:&nbsp;{&nbsp;duration:&nbsp;number&nbsp;})&nbsp;=&gt;&nbsp;void | Triggered&nbsp;when&nbsp;video&nbsp;preparation&nbsp;is&nbsp;complete.&nbsp;The&nbsp;video&nbsp;duration&nbsp;(in&nbsp;seconds)&nbsp;is&nbsp;obtained&nbsp;from&nbsp;**duration**. |
| onSeeking(event?:&nbsp;{&nbsp;time:&nbsp;number&nbsp;})&nbsp;=&gt;&nbsp;void | Triggered&nbsp;to&nbsp;report&nbsp;the&nbsp;time&nbsp;(in&nbsp;seconds)&nbsp;when&nbsp;the&nbsp;progress&nbsp;bar&nbsp;is&nbsp;being&nbsp;dragged. |
| onSeeked(event?:&nbsp;{&nbsp;time:&nbsp;number&nbsp;})&nbsp;=&gt;&nbsp;void | Triggered&nbsp;to&nbsp;report&nbsp;the&nbsp;playback&nbsp;time&nbsp;(in&nbsp;seconds)&nbsp;when&nbsp;the&nbsp;user&nbsp;finishes&nbsp;dragging&nbsp;the&nbsp;progress&nbsp;bar. |
| onUpdate(event?:&nbsp;{&nbsp;time:&nbsp;number&nbsp;})&nbsp;=&gt;&nbsp;void | Triggered&nbsp;once&nbsp;per&nbsp;250&nbsp;ms&nbsp;when&nbsp;the&nbsp;playback&nbsp;progress&nbsp;changes.&nbsp;The&nbsp;unit&nbsp;of&nbsp;the&nbsp;current&nbsp;playback&nbsp;time&nbsp;is&nbsp;second. |
| onStart() =&gt; void | Triggered when the video is played. |
| onPause() =&gt; void | Triggered when the video playback is paused. |
| onFinish() =&gt; void | Triggered when the video playback is finished. |
| onError() =&gt; void | Triggered when the video playback fails. |
| onPrepared(event?: { duration: number }) =&gt; void | Triggered when video preparation is complete. The video duration (in seconds) is obtained from **duration**. |
| onSeeking(event?: { time: number }) =&gt; void | Triggered to report the time (in seconds) when the progress bar is being dragged. |
| onSeeked(event?: { time: number }) =&gt; void | Triggered to report the playback time (in seconds) when the user finishes dragging the progress bar. |
| onUpdate(event?: { time: number }) =&gt; void | Triggered once per 250 ms when the playback progress changes. The unit of the current playback time is second. |
### VideoController
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> A **VideoController** object can control one or more videos.
| Name | Description |
| -------- | -------- |
| start()&nbsp;:&nbsp;void | Starts&nbsp;playback. |
| pause()&nbsp;:&nbsp;void | Pauses&nbsp;playback. |
| stop()&nbsp;:&nbsp;void | Stops&nbsp;playback. |
| setCurrentTime(value:&nbsp;number) | Sets&nbsp;the&nbsp;video&nbsp;playback&nbsp;position. |
| setCurrentTime(value:&nbsp;number,&nbsp;seekMode:&nbsp;SeekMode)<sup>8+</sup> | Sets&nbsp;the&nbsp;video&nbsp;playback&nbsp;position&nbsp;with&nbsp;the&nbsp;specified&nbsp;seek&nbsp;mode. |
| start() : void | Starts playback. |
| pause() : void | Pauses playback. |
| stop() : void | Stops playback. |
| setCurrentTime(value: number) | Sets the video playback position. |
| setCurrentTime(value: number, seekMode: SeekMode)<sup>8+</sup> | Sets the video playback position with the specified seek mode. |
- SeekMode<sup>8+</sup>
| Name | Description |
| -------- | -------- |
| PreviousKeyframe | Seeks&nbsp;to&nbsp;the&nbsp;nearest&nbsp;previous&nbsp;keyframe. |
| NextKeyframe | Seeks&nbsp;to&nbsp;the&nbsp;nearest&nbsp;next&nbsp;keyframe. |
| ClosestKeyframe | Seeks&nbsp;to&nbsp;the&nbsp;nearest&nbsp;keyframe. |
| Accurate | Seeks&nbsp;to&nbsp;a&nbsp;specific&nbsp;frame,&nbsp;regardless&nbsp;of&nbsp;whether&nbsp;the&nbsp;frame&nbsp;is&nbsp;a&nbsp;keyframe. |
| PreviousKeyframe | Seeks to the nearest previous keyframe. |
| NextKeyframe | Seeks to the nearest next keyframe. |
| ClosestKeyframe | Seeks to the nearest keyframe. |
| Accurate | Seeks to a specific frame, regardless of whether the frame is a keyframe. |
## Example
......
# Action Sheet
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
......@@ -20,24 +20,24 @@ show(options: { paramObject1})
Defines and shows the action sheet.
- paramObject1 parameters
| Name | Type | Mandatory | Default&nbsp;Value | Description |
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| title | string&nbsp;\|[Resource](../../ui/ts-types.md#resource) | No | None | Title&nbsp;of&nbsp;the&nbsp;dialog&nbsp;box. |
| message | string&nbsp;\|[Resource](../../ui/ts-types.md#resource) | | | Content&nbsp;of&nbsp;the&nbsp;dialog&nbsp;box. |
| autoCancel | boolean | No | true | Whether&nbsp;to&nbsp;close&nbsp;the&nbsp;dialog&nbsp;box&nbsp;when&nbsp;the&nbsp;overlay&nbsp;is&nbsp;clicked. |
| confirm | {<br/>value:&nbsp;string&nbsp;\|[Resource](../../ui/ts-types.md#resource),<br>action:&nbsp;()&nbsp;=&gt;&nbsp;void<br/>} | number | string | Text&nbsp;content&nbsp;of&nbsp;the&nbsp;confirm&nbsp;button&nbsp;and&nbsp;callback&nbsp;upon&nbsp;button&nbsp;clicking.<br/>**value**:&nbsp;button&nbsp;text.<br/>**action**:&nbsp;callback&nbsp;upon&nbsp;button&nbsp;clicking. |
| cancel | ()&nbsp;=&gt;&nbsp;void | No | - | Callback&nbsp;invoked&nbsp;when&nbsp;the&nbsp;dialog&nbsp;box&nbsp;is&nbsp;closed&nbsp;after&nbsp;the&nbsp;overlay&nbsp;is&nbsp;clicked. |
| alignment | DialogAlignment | No | DialogAlignment.Default | Alignment&nbsp;mode&nbsp;of&nbsp;the&nbsp;dialog&nbsp;box&nbsp;in&nbsp;the&nbsp;vertical&nbsp;direction. |
| offset | {<br/>dx:&nbsp;Length\|[Resource](../../ui/ts-types.md#resource)<br/>dy:&nbsp;Length\|[Resource](../../ui/ts-types.md#resource)<br/>} | No | - | Offset&nbsp;of&nbsp;the&nbsp;dialog&nbsp;box&nbsp;relative&nbsp;to&nbsp;the&nbsp;alignment&nbsp;position. |
| sheets | Array&lt;SheetInfo&gt; | Yes | - | Options&nbsp;in&nbsp;the&nbsp;dialog&nbsp;box.&nbsp;Each&nbsp;option&nbsp;supports&nbsp;the&nbsp;image,&nbsp;text,&nbsp;and&nbsp;callback. |
| title | string \|[Resource](../../ui/ts-types.md#resource) | No | None | Title of the dialog box. |
| message | string \|[Resource](../../ui/ts-types.md#resource) | | | Content of the dialog box. |
| autoCancel | boolean | No | true | Whether to close the dialog box when the overlay is clicked. |
| confirm | {<br/>value: string \|[Resource](../../ui/ts-types.md#resource),<br>action: () =&gt; void<br/>} | number | string | Text content of the confirm button and callback upon button clicking.<br/>**value**: button text.<br/>**action**: callback upon button clicking. |
| cancel | () =&gt; void | No | - | Callback invoked when the dialog box is closed after the overlay is clicked. |
| alignment | DialogAlignment | No | DialogAlignment.Default | Alignment mode of the dialog box in the vertical direction. |
| offset | {<br/>dx: Length\|[Resource](../../ui/ts-types.md#resource)<br/>dy: Length\|[Resource](../../ui/ts-types.md#resource)<br/>} | No | - | Offset of the dialog box relative to the alignment position. |
| sheets | Array&lt;SheetInfo&gt; | Yes | - | Options in the dialog box. Each option supports the image, text, and callback. |
- SheetInfo parameters
| | | | | |
| -------- | -------- | -------- | -------- | -------- |
| Name | Type | Mandatory | Default&nbsp;Value | Description |
| title | string | Yes | - | Sheet&nbsp;text. |
| icon | string | No | None | Sheet&nbsp;icon. |
| action | ()=&gt;void | Yes | - | Callback&nbsp;when&nbsp;the&nbsp;sheet&nbsp;is&nbsp;selected. |
| Name | Type | Mandatory | Default Value | Description |
| title | string | Yes | - | Sheet text. |
| icon | string | No | None | Sheet icon. |
| action | ()=&gt;void | Yes | - | Callback when the sheet is selected. |
## Example
......
# Alert Dialog Box
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> This method is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
......@@ -10,34 +10,34 @@ You can set the text content and response callback for an alert dialog box.
## Attributes
| Name | Type | Default&nbsp;Value | Description |
| Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- |
| show | options:&nbsp;{&nbsp;paramObject1\|&nbsp;paramObject2} | - | Defines&nbsp;and&nbsp;displays&nbsp;the&nbsp;**&lt;AlertDialog&gt;**&nbsp;component. |
| show | options: { paramObject1\| paramObject2} | - | Defines and displays the **&lt;AlertDialog&gt;** component. |
- paramObject1 parameters
| Name | Type | Mandatory | Default&nbsp;Value | Description |
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| title | string&nbsp;\|[Resource](../../ui/ts-types.md#resource) | | | Title&nbsp;of&nbsp;a&nbsp;dialog&nbsp;box. |
| message | string&nbsp;\|[Resource](../../ui/ts-types.md#resource) | | | Content&nbsp;of&nbsp;the&nbsp;dialog&nbsp;box. |
| autoCancel | boolean | No | true | Whether&nbsp;to&nbsp;close&nbsp;the&nbsp;dialog&nbsp;box&nbsp;when&nbsp;the&nbsp;overlay&nbsp;is&nbsp;clicked. |
| confirm | {<br/>value:&nbsp;string&nbsp;\|[Resource](../../ui/ts-types.md#resource),<br>fontColor?: Color\|number \|string \|[Resource](../../ui/ts-types.md#resource),<br/>backgroundColor?:Color \|number\|string\|[Resource](../../ui/ts-types.md#resource),<br>action:&nbsp;()&nbsp;=&gt;&nbsp;void<br/>} <br/> | | | Text content, text color, background color, and click callback of the confirm button. |
| cancel | ()&nbsp;=&gt;&nbsp;void | No | - | Callback&nbsp;invoked&nbsp;when&nbsp;the&nbsp;dialog&nbsp;box&nbsp;is&nbsp;closed&nbsp;after&nbsp;the&nbsp;overlay&nbsp;is&nbsp;clicked. |
| alignment | DialogAlignment | No | DialogAlignment.Default | Alignment&nbsp;mode&nbsp;of&nbsp;the&nbsp;dialog&nbsp;box&nbsp;in&nbsp;the&nbsp;vertical&nbsp;direction. |
| offset | {<br/>dx:&nbsp;Length&nbsp;\|[Resource](../../ui/ts-types.md#resource),<br/>dy:&nbsp;Length&nbsp;&nbsp;\|[Resource](../../ui/ts-types.md#resource)<br/>} | | | Offset&nbsp;of&nbsp;the&nbsp;dialog&nbsp;box&nbsp;relative&nbsp;to&nbsp;the&nbsp;alignment&nbsp;position. |
| gridCount | number | No | - | Number&nbsp;of&nbsp;grid&nbsp;columns&nbsp;occupied&nbsp;by&nbsp;the&nbsp;width&nbsp;of&nbsp;the&nbsp;dialog&nbsp;box. |
| title | string \|[Resource](../../ui/ts-types.md#resource) | | | Title of a dialog box. |
| message | string \|[Resource](../../ui/ts-types.md#resource) | | | Content of the dialog box. |
| autoCancel | boolean | No | true | Whether to close the dialog box when the overlay is clicked. |
| confirm | {<br/>value: string \|[Resource](../../ui/ts-types.md#resource),<br>fontColor?: Color\|number \|string \|[Resource](../../ui/ts-types.md#resource),<br/>backgroundColor?:Color \|number\|string\|[Resource](../../ui/ts-types.md#resource),<br>action: () =&gt; void<br/>} <br/> | | | Text content, text color, background color, and click callback of the confirm button. |
| cancel | () =&gt; void | No | - | Callback invoked when the dialog box is closed after the overlay is clicked. |
| alignment | DialogAlignment | No | DialogAlignment.Default | Alignment mode of the dialog box in the vertical direction. |
| offset | {<br/>dx: Length \|[Resource](../../ui/ts-types.md#resource),<br/>dy: Length \|[Resource](../../ui/ts-types.md#resource)<br/>} | | | Offset of the dialog box relative to the alignment position. |
| gridCount | number | No | - | Number of grid columns occupied by the width of the dialog box. |
- paramObject2 parameters
| Name | Type | Mandatory | Default&nbsp;Value | Description |
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| title | string&nbsp;\|[Resource](../../ui/ts-types.md#resource) | No | - | Title&nbsp;of&nbsp;a&nbsp;dialog&nbsp;box. |
| message | string&nbsp;\|[Resource](../../ui/ts-types.md#resource) | Yes | - | Content&nbsp;of&nbsp;the&nbsp;dialog&nbsp;box. |
| autoCancel | boolean | No | true | Whether&nbsp;to&nbsp;close&nbsp;the&nbsp;dialog&nbsp;box&nbsp;when&nbsp;the&nbsp;overlay&nbsp;is&nbsp;clicked. |
| primaryButton | {<br/>value:&nbsp;string&nbsp;\|[Resource](../../ui/ts-types.md#resource),<br>fontColor?: Color\|number \|string \|[Resource](../../ui/ts-types.md#resource),<br/>backgroundColor?:Color \|number\|string\|[Resource](../../ui/ts-types.md#resource),<br>action:&nbsp;()&nbsp;=&gt;&nbsp;void<br/>} <br/> | | | Text&nbsp;content,&nbsp;text&nbsp;color,&nbsp;background&nbsp;color,&nbsp;and&nbsp;click&nbsp;callback&nbsp;of&nbsp;the&nbsp;primary&nbsp;button. |
| secondaryButton | {<br/>value:&nbsp;string&nbsp;\|[Resource](../../ui/ts-types.md#resource),<br>fontColor?: Color\|number \|string \|[Resource](../../ui/ts-types.md#resource),<br/>backgroundColor?:Color \|number\|string\|[Resource](../../ui/ts-types.md#resource),<br>action:&nbsp;()&nbsp;=&gt;&nbsp;void<br/>} <br/> | | | Text&nbsp;content,&nbsp;text&nbsp;color,&nbsp;background&nbsp;color,&nbsp;and&nbsp;click&nbsp;callback&nbsp;of&nbsp;the&nbsp;secondary&nbsp;button. |
| cancel | ()&nbsp;=&gt;&nbsp;void | No | - | Callback&nbsp;invoked&nbsp;when&nbsp;the&nbsp;dialog&nbsp;box&nbsp;is&nbsp;closed&nbsp;after&nbsp;the&nbsp;overlay&nbsp;is&nbsp;clicked. |
| alignment | DialogAlignment | No | DialogAlignment.Default | Alignment&nbsp;mode&nbsp;of&nbsp;the&nbsp;dialog&nbsp;box&nbsp;in&nbsp;the&nbsp;vertical&nbsp;direction. |
| offset | {<br/>dx:&nbsp;Length&nbsp;\|[Resource](../../ui/ts-types.md#resource),<br/>dy:&nbsp;Length&nbsp;&nbsp;\|[Resource](../../ui/ts-types.md#resource)<br/>} | | | Offset&nbsp;of&nbsp;the&nbsp;dialog&nbsp;box&nbsp;relative&nbsp;to&nbsp;the&nbsp;alignment&nbsp;position. |
| gridCount | number | No | - | Number&nbsp;of&nbsp;grid&nbsp;columns&nbsp;occupied&nbsp;by&nbsp;the&nbsp;width&nbsp;of&nbsp;the&nbsp;dialog&nbsp;box. |
| title | string \|[Resource](../../ui/ts-types.md#resource) | No | - | Title of a dialog box. |
| message | string \|[Resource](../../ui/ts-types.md#resource) | Yes | - | Content of the dialog box. |
| autoCancel | boolean | No | true | Whether to close the dialog box when the overlay is clicked. |
| primaryButton | {<br/>value: string \|[Resource](../../ui/ts-types.md#resource),<br>fontColor?: Color\|number \|string \|[Resource](../../ui/ts-types.md#resource),<br/>backgroundColor?:Color \|number\|string\|[Resource](../../ui/ts-types.md#resource),<br>action: () =&gt; void<br/>} <br/> | | | Text content, text color, background color, and click callback of the primary button. |
| secondaryButton | {<br/>value: string \|[Resource](../../ui/ts-types.md#resource),<br>fontColor?: Color\|number \|string \|[Resource](../../ui/ts-types.md#resource),<br/>backgroundColor?:Color \|number\|string\|[Resource](../../ui/ts-types.md#resource),<br>action: () =&gt; void<br/>} <br/> | | | Text content, text color, background color, and click callback of the secondary button. |
| cancel | () =&gt; void | No | - | Callback invoked when the dialog box is closed after the overlay is clicked. |
| alignment | DialogAlignment | No | DialogAlignment.Default | Alignment mode of the dialog box in the vertical direction. |
| offset | {<br/>dx: Length \|[Resource](../../ui/ts-types.md#resource),<br/>dy: Length \|[Resource](../../ui/ts-types.md#resource)<br/>} | | | Offset of the dialog box relative to the alignment position. |
| gridCount | number | No | - | Number of grid columns occupied by the width of the dialog box. |
## Example
......
# Image Cache
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> This method is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
......@@ -26,7 +26,7 @@ setImageCacheCount(value: number): void
- Parameters
| Name | Type | Mandatory | Description |
| -------- | -------- | -------- | -------- |
| value | number | Yes | Number&nbsp;of&nbsp;decoded&nbsp;images&nbsp;that&nbsp;are&nbsp;cached&nbsp;in&nbsp;the&nbsp;memory. |
| value | number | Yes | Number of decoded images that are cached in the memory. |
- Example
......@@ -55,7 +55,7 @@ Sets the maximum size (in bytes) of the image data cached in the memory before d
- Parameters
| Name | Type | Mandatory | Description |
| -------- | -------- | -------- | -------- |
| value | number | Yes | Size&nbsp;of&nbsp;the&nbsp;image&nbsp;data&nbsp;cached&nbsp;before&nbsp;decoding,&nbsp;in&nbsp;bytes. |
| value | number | Yes | Size of the image data cached before decoding, in bytes. |
- Example
......@@ -84,7 +84,7 @@ Sets the maximum size of the image file cache (in bytes) to speed up the loading
- Parameters
| Name | Type | Mandatory | Description |
| -------- | -------- | -------- | -------- |
| value | number | Yes | Size&nbsp;of&nbsp;the&nbsp;image&nbsp;file&nbsp;cache,&nbsp;in&nbsp;bytes. |
| value | number | Yes | Size of the image file cache, in bytes. |
- Example
......
# Motion Path Animation
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> This animation is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
......@@ -10,9 +10,9 @@ The attributes described in this topic are used to set the motion path of the co
## Attributes
| Name | Type | Default&nbsp;Value | Description |
| Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- |
| motionPath | {<br/>path:&nbsp;string,<br/>from?:&nbsp;number,<br/>to?:&nbsp;number,<br/>rotatable?:&nbsp;boolean<br/>}<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**NOTE:**<br/>>&nbsp;In&nbsp;a&nbsp;path,&nbsp;**start**&nbsp;and&nbsp;**end**&nbsp;can&nbsp;be&nbsp;used&nbsp;to&nbsp;replace&nbsp;the&nbsp;start&nbsp;point&nbsp;and&nbsp;end&nbsp;point.&nbsp;Example:<br/>>&nbsp;<br/>>&nbsp;'Mstart.x&nbsp;start.y&nbsp;L50&nbsp;50&nbsp;Lend.x&nbsp;end.y&nbsp;Z' | {<br/>"",<br/>0.0,<br/>1.0,<br/>false<br/>} | Motion&nbsp;path&nbsp;of&nbsp;the&nbsp;component.&nbsp;The&nbsp;input&nbsp;parameters&nbsp;are&nbsp;described&nbsp;as&nbsp;follows:<br/>-&nbsp;**path**:&nbsp;motion&nbsp;path&nbsp;of&nbsp;the&nbsp;translation&nbsp;animation.&nbsp;The&nbsp;**svg**&nbsp;path&nbsp;string&nbsp;is&nbsp;used.<br/>-&nbsp;**from**:&nbsp;start&nbsp;point&nbsp;of&nbsp;the&nbsp;motion&nbsp;path.&nbsp;The&nbsp;default&nbsp;value&nbsp;is&nbsp;**0.0**.<br/>-&nbsp;**to**:&nbsp;end&nbsp;point&nbsp;of&nbsp;the&nbsp;motion&nbsp;path.&nbsp;The&nbsp;default&nbsp;value&nbsp;is&nbsp;**1.0**.<br/>-&nbsp;**rotatable**:&nbsp;whether&nbsp;to&nbsp;rotate&nbsp;along&nbsp;the&nbsp;path. |
| motionPath | {<br/>path: string,<br/>from?: number,<br/>to?: number,<br/>rotatable?: boolean<br/>}<br/>> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**<br/>> In a path, **start** and **end** can be used to replace the start point and end point. Example:<br/>> <br/>> 'Mstart.x start.y L50 50 Lend.x end.y Z' | {<br/>"",<br/>0.0,<br/>1.0,<br/>false<br/>} | Motion path of the component. The input parameters are described as follows:<br/>- **path**: motion path of the translation animation. The **svg** path string is used.<br/>- **from**: start point of the motion path. The default value is **0.0**.<br/>- **to**: end point of the motion path. The default value is **1.0**.<br/>- **rotatable**: whether to rotate along the path. |
## Example
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册