| 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. |
| 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. |
| 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. |
| 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). |
| 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. |
| stateEffect | boolean | true | Whether to enable the state switchover effect. When the state is set to **false**, the state switchover effect is disabled. |
> - 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).
| 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. |
| 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. |
| start | Date | No | Date('1970-1-1') | Start date of the date picker. |
| end | Date | No | Date('2100-12-31') | End date of the date picker. |
| selected | Date | No | Current system date or time | Selected date when **type** is set to **DatePickerType.Date** and selected time when **type** is set to **DatePickerType.Time**. |
| type | DatePickerType | No | DatePickerType.Date | Picker type, which can be date picker and time picker. The date picker is used by default. |
| start | Date | No | Date('1970-1-1') | Start date of the date picker. |
| end | Date | No | Date('2100-12-31') | End date of the date picker. |
| selected | Date | No | Current system date or time | Selected date when **type** is set to **DatePickerType.Date** and selected time when **type** is set to **DatePickerType.Time**. |
| type | DatePickerType | No | DatePickerType.Date | Picker type, which can be date picker and time picker. The date picker is used by default. |
- DatePickerType enums
| Name | Description |
| -------- | -------- |
| Date | Date picker. |
| Time | Time picker. |
| Date | Date picker. |
| Time | Time picker. |
## Attributes
| Name | Type | Default Value | Description |
| lunar | boolean | false | Whether to display the lunar calendar.<br/>- **true**: The lunar calendar is displayed.<br/>- **false**: The lunar calendar is not displayed. |
| useMilitaryTime | boolean | false | Whether the display time is in 24-hour format. The value cannot be dynamically modified. |
| 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. |
| objectRepeat | [ImageRepeat](ts-appendix-enums.md#imagerepeat enums) | ImageRepeat.NoRepeat | Whether the image is repeated.<br/>> **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/>> **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/>> **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/>> **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. |
| Fill | The video content is resized to fill the display area while retaining its aspect ratio. |
| 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. |
| onComplete(callback: (event?: { width: number, height: number, componentWidth: number, componentHeight: number, loadingStatus: number }) => void) | Triggered when an image is successfully loaded. The loaded image is returned. |
| onError(callback: (event?: { componentWidth: number, componentHeight: number }) => void) | An exception occurs during image loading. |
| onFinish(callback: () => 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. |
| 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. |
| images | Array<{<br/>src:string,<br/>width?:Length,<br/>height?:Length,<br/>top?:Length,<br/>left?:Length,<br/>duration?:number<br/>}> | [] | 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. |
| menus | Array<NavigationMenuItem>\|[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 Value | Description |
| Name | Type | Mandatory | Default Value | Description |
| 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). |
| 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). |
| onTitleModeChanged(callback: (titleMode: NavigationTitleMode) => void) | Triggered when **titleMode** is set to **NavigationTitleMode.Free** and the title bar mode changes as content scrolls. |
| 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. |
| 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
| 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. |
| 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/>) => 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 name. |
| data | KVObject | Component data. |
| extraData | KVObject | Additional data. |
| template | string | Componentname. |
| data | KVObject | Componentdata. |
| extraData | KVObject | Additionaldata. |
- Example
For details, see [APIs Called by Component Consumers](#apis-called-by-component-consumers).
| Ring<sup>8+</sup> | Ring type without scale. The ring fills up as the progress increases. |
| Eclipse | Eclipse type, which visualizes the progress in a way similar to the moon waxing from new to full. |
| ScaleRing<sup>8+</sup> | Ring type with scale, which is similar to the clock scale style. |
| Capsule<sup>8+</sup> | Capsule type. At both ends, the progress bar changes from an arc to a straight line and from a straight line to an arc. In the middle part of the capsule, the progress bar moves to the right. |
## Attributes
| Name | Type | Default Value | Description |
| Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- |
| value | number | - | Current progress. |
| color | Color | - | Background color of the progress bar. |
| color | Color | - | Background color of the progress bar. |
| style<sup>8+</sup> | {<br/>strokeWidth? : Length,<br/>scaleCount? : number,<br/>scaleWidth? : Length<br/>} | - | Component style.<br/>- **strokeWidth**: width of the progress bar.<br/>- **scaleCount**: scale count of the circular progress bar.<br/>- **scaleWidth**: scale width of the circular progress bar.<br/>If the scale thickness is greater than the progress bar width, the default scale thickness is used. |
| 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. |
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>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>"
> The **<ScrollBar>** 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 **<ScrollBar>** component can be bound to only one scrollable component, and vice versa.
| Auto | Display on demand (displays when the screen is touched and disappears after 2s of inactivity). |
| Auto | Display on demand (displays when the screen is touched and disappears after 2s of inactivity). |
| textCase | [TextCase](ts-appendix-enums.md#textcase-enums) | Normal | Text 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 | Textcase. |
## Events
Among all the universal events, only the click event is supported.
> As the **<Span>** component does not have size information, the **target** attribute of the **ClickEvent** object returned by the click event is invalid.
| onFinish(callback: () => void) | Triggered when the **nextLabel** of the last **<StepperItem>** in the **<Stepper>** is clicked. |
| onSkip(callback: () => void) | Triggered when the current **<StepperItem>** is **ItemState.Skip** and the **nextLabel** is clicked. |
| onChange(callback: (prevIndex?: number, index?: number) => 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. |
| status | ItemState | ItemState.Normal | Status of the **<StepperItem>**. |
| prevLabel | string | - | When the **<Stepper>** 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 **<StepperItem>**. |
- ItemState enums
| Name | Description |
| -------- | -------- |
| Normal | The right button is clickable and can navigate users to the next **<StepperItem>** when it is clicked.. |
| content | string | No | '' | Text content, which is the content of the child component **<Span>**. This parameter does not take effect when the child component **<Span>** is contained. |
## Attributes
| Name | Type | Default Value | Description |
| 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. |
| End | The text is aligned with the opposite direction in which the text is 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. |
> The **<Text>** component cannot contain both the text and the child component **<Span>**. If both of them exist, only the content in **<Span>** is displayed.
| 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. |
| 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. |
| onChange(callback: (value: string) => void) | Triggered when the input changes. |
| onCopy<sup>8+</sup>(callback:(value: string) => 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) => 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) => 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. |
| placeholderColor | Color | - | Placeholdercolor. |
| 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#resourcestr8),<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. |
| 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. |
| 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. |
| 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. |
| onChange(value: string) => void | Triggered when the input changes. |
| onSubmit(callback: (enterKey: EnterKeyType) => void) | Triggered when the Enter key on the physical or soft keyboard is pressed. |
| onEditChanged(callback: (isEditing: boolean) => void) | Triggered when the input status changes. |
| onCopy<sup>8+</sup>(callback:(value: string) => 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) => 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) => 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. |
| onChange(callback: (value: string, index: number) => void) | Triggered when an item in the picker is selected.<br/>- **value**: text of the selected item.<br/>- **index**: index of the selected item. |
| 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. |
@@ -36,23 +36,23 @@ Defines the controller for controlling the **<TextTimer>** component.
| Name | Description |
| -------- | -------- |
| start() | Starts the timer. |
| pause() | Pauses the timer. |
| reset() | Resets the timer. |
| start() | Starts the timer. |
| pause() | Pauses the timer. |
| reset() | Resets the timer. |
## Attributes
| Name | Type | Default Value | Description |
| Name | Type | DefaultValue | Description |
| -------- | -------- | -------- | -------- |
| format | string | 'hh:mm:ss.ms' | Custom format. The value must contain at least one of the following keywords: **hh**, **mm**, **ss**, and **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**. |
| onTimer(callback: (utc: number, elapsedTime: number) => void) | Triggered when the time text changes.<br/>**utc**: currently displayed time, in milliseconds.<br/>**elapsedTime**: elapsed time of the timer, in milliseconds. |
| isOn | boolean | No | false | Initial state of the toggle.<br/>>  **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. |
| type | ToggleType | Yes | - | Type of the toggle. |
| isOn | boolean | No | false | Initial state of the toggle.<br/>> **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. |
| 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 **<Text>** 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 **<Text>** component and the current component in the layout component. |
## Attributes
| Name | Type | Default Value | Description |
| Name | Type | DefaultValue | Description |
| -------- | -------- | -------- | -------- |
| selectedColor | Color | - | Background color of the toggle when it is enabled. |
| switchPointColor | Color | - | Color of the circular slider of the **Switch** type.<br/>>  **NOTE：**<br/>> This attribute is valid only when type is set to **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/>> **NOTE**<br/>> This attribute is valid only when type is set to **ToggleType.Switch**. |
| 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 (&) and OR (\|) operations. |
| distance | number | No | 5.0 | Minimum slide recognition distance, in 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 (&) and OR (\|) operations. |
| distance | number | No | 5.0 | Minimum slide recognition distance, in vp. |
| 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/>>  **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/>>  **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. |
| 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/>> **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/>> **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. |
| [fillStyle](#fillstyle) | <color>\|[CanvasGradient](ts-components-canvas-canvasgradient.md)\|[CanvasPattern](#canvaspattern) | - | Style used to fill an area.<br/>- When the type is **<color>**, this attribute indicates the fill color.<br/>- When the type is **CanvasGradient**, this attribute indicates a gradient object, which is created using the [createLinearGradient](#createlineargradient) method.<br/>- When the type is **CanvasPattern**, this attribute indicates a pattern, which is created using the [createPattern](#createpattern)method. |
| [lineWidth](#linewidth) | number | - | Linewidth. |
| [strokeStyle](#strokestyle) | <color>\|[CanvasGradient](ts-components-canvas-canvasgradient.md)\|[CanvasPattern](#canvaspattern) | - | Stroke style.<br/>- When the type is **<color>**, this attribute indicates the stroke color.<br/>- When the type is **CanvasGradient**, this attribute indicates a gradient object, which is created using the [createLinearGradient](#createlineargradient) method.<br/>- When the type is **CanvasPattern**, this attribute indicates a pattern, which is created using the [createPattern](#createpattern)method. |
| [lineCap](#linecap) | string | 'butt' | Style of the line endpoints. The options are as follows:<br/>- **'butt'**: The endpoints of the line are squared off.<br/>- **'round'**: The endpoints of the line are rounded.<br/>- **'square'**: The endpoints of the line are squared off by adding a box with an equal width and half the height of the line's thickness. |
| [lineJoin](#linejoin) | string | 'miter' | Style of the shape used to join line segments. The options are as follows:<br/>- **'round'**: The shape used to join line segments is a rounded corner with the radius equal to the line width.<br/>- **'bevel'**: The shape used to join line segments is a beveled corner. The rectangular corner of each line is independent.<br/>- **'miter'**: The shape used to join line segments is a mitered corner. The corner is formed by extending the outside edges of the lines until they meet. You can adjust the effect of this attribute using **miterLimit**. |
| [miterLimit](#miterlimit) | number | 10 | Maximum miter length. The miter length is the distance between the inner corner and the outer corner where two lines meet. |
| [font](#font) | string | 'normal normal 14px sans-serif' | Font style.<br/>Syntax: ctx.font='font-size font-family'<br/>- (Optional) **font-size**: font size and row height. The unit can only be px.<br/>- (Optional) **font-family**: font family.<br/>Syntax: ctx.font='font-style font-weight font-size font-family'<br/>- (Optional) **font-style**: font style. Available values are **'normal'** and **'italic'**.<br/>- (Optional) **font-weight**: font weight. Available values are as follows: **'normal'**, **'bold'**, **'bolder'**, **'lighter'**, **100**, **200**, **300**, **400**, **500**, **600**, **700**, **800**, **900**<br/>- (Optional) **font-size**: font size and row height. The unit can only be px.<br/>- (Optional) **font-family**: font family. Available values are **'sans-serif'**, **'serif'**, and **'monospace'**. |
| [textAlign](#textalign) | string | 'left' | Text alignment mode. Available values are as follows:<br/>- **'left'**: The text is left-aligned.<br/>- **'right'**: The text is right-aligned.<br/>- **'center'**: The text is center-aligned.<br/>- **'start'**: The text is aligned with the start bound.<br/>- **'end'**: The text is aligned with the end bound.<br/>> **NOTE**<br/>> In the **ltr** layout mode, the value **'start'** equals **'left'**. In the **rtl** layout mode, the value **'start'** equals **'right'**. |
| [textBaseline](#textbaseline) | string | 'alphabetic' | Horizontal alignment mode of text. Available values are as follows:<br/>- **'alphabetic'**: The text baseline is the normal alphabetic baseline.<br/>- **'top'**: The text baseline is on the top of the text bounding box.<br/>- **'hanging'**: The text baseline is a hanging baseline over the text.<br/>- **'middle'**: The text baseline is in the middle of the text bounding box.<br/>- **'ideographic'**: The text baseline is the ideographic baseline. If a character exceeds the alphabetic baseline, the ideographic baseline is located at the bottom of the excess character.<br/>- **'bottom'**: The text baseline is at the bottom of the text bounding box. Its difference from the ideographic baseline is that the ideographic baseline does not consider letters in the next line. |
| [lineDashOffset](#linedashoffset) | number | 0.0 | Offset of the dashed line. The precision is float. |
| [globalCompositeOperation](#globalcompositeoperation) | string | 'source-over' | Composition operation type. Available values are as follows: **'source-over'**, **'source-atop'**, **'source-in'**, **'source-out'**, **'destination-over'**, **'destination-atop'**, **'destination-in'**, **'destination-out'**, **'lighter'**, **'copy'**, and **'xor'**. |
| [shadowBlur](#shadowblur) | number | 0.0 | Blur level during shadow drawing. A larger value indicates a more blurred effect. The precision is float. |
| [shadowOffsetX](#shadowoffsetx) | number | - | X-axis shadow offset relative to the original object. |
| [shadowOffsetY](#shadowoffsety) | number | - | Y-axis shadow offset relative to the original object. |
| [imageSmoothingEnabled](#imagesmoothingenabled) | boolean | true | Whether to adjust the image smoothness during image drawing. The value **true** means to enable this feature, and **false** means the opposite. |
| imageSmoothingQuality | string | 'low' | Image smoothness. The value can be **'low'**, **'medium'**, or **'high'**. |
Defines a transformation matrix. To transform a graph, you only need to set parameters of the matrix. The coordinates of the graph are multiplied by the matrix values to obtain new coordinates of the transformed graph. You can use the matrix to implement multiple transform effects.
> The following formulas calculate coordinates of the transformed graph. **x** and **y** represent coordinates before transformation, and **x'** and **y'** represent coordinates after transformation.
>
> - x' = scaleX \* x + skewY \* y + translateX
...
...
@@ -1602,14 +1602,14 @@ Defines a transformation matrix. To transform a graph, you only need to set para
> - y' = skewX \* x + scaleY \* y + translateY
- Parameters
| Name | Type | Mandatory | Default Value | Description |
| Name | Type | Mandatory | DefaultValue | Description |
| sx | number | No | 0 | X-coordinate of the upper left corner of the rectangle used to crop the source image. |
| sy | number | No | 0 | Y-coordinate of the upper left corner of the rectangle used to crop the source image. |
| sWidth | number | No | 0 | Target width to crop the source image. |
| sHeight | number | No | 0 | Target height to crop the source image. |
| 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. |
| 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. |
| 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. |
| loop | boolean \| number | No | If the value is of the Boolean type, this parameter indicates whether to repeat the animation cyclically after the animation ends; the default value is **true**. If the value is of the number type and is greater than or equal to 1, this parameter indicates the number of times the animation plays. |
| autoplay | boolean | No | Whether to automatically play the animation. The default value is **true**. |
| name | string | No | Custom animation name. In later versions, the name can be used to reference and control the animation. The default value is null. |
| initialSegment | [number, number] | No | Start frame and end frame of the animation, respectively. |
| path | string | Yes | Path of the animation resource file in the HAP file. The resource file must be in JSON format. Example: **path: "common/lottie/data.json"**. |
| container | object | Yes | Canvas drawing context. A **CanvasRenderingContext2D** object must be declared in advance. |
| render | string | Yes | Rendering type. The value can only be **"canvas"**. |
| loop | boolean\| number | No | If the value is of the Boolean type, this parameter indicates whether to repeat the animation cyclically after the animation ends; the default value is **true**. If the value is of the number type and is greater than or equal to 1, this parameter indicates the number of times the animation plays. |
| autoplay | boolean | No | Whether to automatically play the animation. The default value is **true**. |
| name | string | No | Custom animation name. In later versions, the name can be used to reference and control the animation. The default value is null. |
| initialSegment | [number, number] | No | Start frame and end frame of the animation, respectively. |
## lottie.destroy
...
...
@@ -50,7 +50,7 @@ Destroys the animation. This method must be called when a page exits. This metho
- Parameters
| Name | Type | Mandatory | Description |
| -------- | -------- | -------- | -------- |
| name | string | Yes | Name of the animation to destroy, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are destroyed. |
| name | string | Yes | Name of the animation to destroy, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are destroyed. |
- Example
...
...
@@ -130,7 +130,7 @@ Plays a specified animation.
- Parameters
| Name | Type | Mandatory | Description |
| -------- | -------- | -------- | -------- |
| name | string | Yes | Name of the animation to play, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are played. |
| name | string | Yes | Name of the animation to play, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are played. |
- Example
...
...
@@ -148,7 +148,7 @@ Pauses a specified animation. The next time **lottie.play()** is called, the ani
- Parameters
| Name | Type | Mandatory | Description |
| -------- | -------- | -------- | -------- |
| name | string | Yes | Name of the animation to pause, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are paused. |
| name | string | Yes | Name of the animation to pause, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are paused. |
- Example
...
...
@@ -166,7 +166,7 @@ Pauses or plays a specified animation. This method is equivalent to the switchin
- Parameters
| Name | Type | Mandatory | Description |
| -------- | -------- | -------- | -------- |
| name | string | Yes | Name of the target animation, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are paused. |
| name | string | Yes | Name of the target animation, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are paused. |
- Example
...
...
@@ -184,7 +184,7 @@ Stops the specified animation. The next time **lottie.play()** is called, the an
- Parameters
| Name | Type | Mandatory | Description |
| -------- | -------- | -------- | -------- |
| name | string | Yes | Name of the target animation, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are paused. |
| name | string | Yes | Name of the target animation, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are paused. |
- Example
...
...
@@ -202,8 +202,8 @@ Sets the playback speed of the specified animation.
- Parameters
| Name | Type | Mandatory | Description |
| -------- | -------- | -------- | -------- |
| speed | number | Yes | Playback speed. The value is a floating-point number. If the value is greater than 0, the animation plays in forward direction. If the value is less than 0, the animation plays in reversed direction. If the value is 0, the animation is paused. If the value is 1.0 or -1.0, the animation plays at the normal speed. |
| name | string | Yes | Name of the target animation, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are stopped. |
| speed | number | Yes | Playback speed. The value is a floating-point number. If the value is greater than 0, the animation plays in forward direction. If the value is less than 0, the animation plays in reversed direction. If the value is 0, the animation is paused. If the value is 1.0 or -1.0, the animation plays at the normal speed. |
| name | string | Yes | Name of the target animation, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are stopped. |
- Example
...
...
@@ -221,8 +221,8 @@ Sets the direction in which the specified animation plays.
- Parameters
| Name | Type | Mandatory | Description |
| -------- | -------- | -------- | -------- |
| direction | AnimationDirection | Yes | Direction in which the animation plays. **1**: forwards; **-1**: backwards. When set to play backwards, the animation plays from the current playback progress to the first frame. When this setting is combined with **loop** being set to **true**, the animation plays backwards continuously. When the value of **speed** is less than 0, the animation also plays backwards.<br/>**AnimationDirection**: 1 \| -1. |
| name | string | Yes | Name of the target animation, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are set. |
| direction | AnimationDirection | Yes | Direction in which the animation plays. **1**: forwards; **-1**: backwards. When set to play backwards, the animation plays from the current playback progress to the first frame. When this setting is combined with **loop** being set to **true**, the animation plays backwards continuously. When the value of **speed** is less than 0, the animation also plays backwards.<br/>**AnimationDirection**: 1 \|-1. |
| name | string | Yes | Name of the target animation, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are set. |
- Example
...
...
@@ -237,26 +237,26 @@ Defines an **AnimationItem** object, which is returned by the **loadAnimation**
| isLoaded | boolean | Whether the animation is loaded. |
| currentFrame | number | Frame that is being played. The default precision is a floating-point number greater than or equal to 0.0. After **setSubframe(false)** is called, the value is a positive integer without decimal points. |
| currentRawFrame | number | Number of frames that are being played. The precision is a floating point number greater than or equal to 0.0. |
| firstFrame | number | First frame of the animation segment that is being played. |
| totalFrames | number | Total number of frames in the animation segment that is being played. |
| frameRate | number | Frame rate (frame/s). |
| frameMult | number | Frame rate (frame/ms). |
| playSpeed | number | Playback speed. The value is a floating-point number. If the value is greater than 0, the animation plays in forward direction. If the value is less than 0, the animation plays in reversed direction. If the value is 0, the animation is paused. If the value is **1.0** or **-1.0**, the animation plays at the normal speed. |
| playDirection | number | Playback direction. The options are **1** (forward) and **-1**(backward). |
| playCount | number | Number of times the animation plays. |
| isPaused | boolean | Whether the current animation is paused. The value **true** means that the animation is paused. |
| autoplay | boolean | Whether to automatically play the animation upon completion of the loading. The value **false** means that the **play()** interface needs to be called to start playing. |
| loop | boolean\| number | If the value is of the Boolean type, this parameter indicates whether to repeat the animation cyclically after the animation ends. If the value is of the number type and is greater than or equal to 1, this parameter indicates the number of times the animation plays. |
| renderer | any | Animation rendering object, which depends on the rendering type. |
| animationID | string | AnimationID. |
| timeCompleted | number | Number of frames that are played for an animation sequence. The value is affected by the setting of **AnimationSegment** and is the same as the value of **totalFrames**. |
| segmentPos | number | ID of the current animation segment. The value is a positive integer greater than or equal to 0. |
| isSubframeEnabled | boolean | Whether the precision of **currentFrame** is a floating point number. |
| segments | AnimationSegment\| AnimationSegment[] | Current segment of the animation. |
## AnimationItem.play
...
...
@@ -268,7 +268,7 @@ Plays an animation.
- Parameters
| Name | Type | Mandatory | Description |
| -------- | -------- | -------- | -------- |
| name | string | No | Name of the target animation. By default, the value is null. |
| name | string | No | Name of the target animation. By default, the value is null. |
- Example
...
...
@@ -286,7 +286,7 @@ Destroys an animation.
- Parameters
| Name | Type | Mandatory | Description |
| -------- | -------- | -------- | -------- |
| name | string | No | Name of the target animation. By default, the value is null. |
| name | string | No | Name of the target animation. By default, the value is null. |
- Example
...
...
@@ -304,7 +304,7 @@ Pauses an animation. When the **play** interface is called next time, the animat
- Parameters
| Name | Type | Mandatory | Description |
| -------- | -------- | -------- | -------- |
| name | string | No | Name of the target animation. By default, the value is null. |
| name | string | No | Name of the target animation. By default, the value is null. |
- Example
...
...
@@ -322,7 +322,7 @@ Pauses or plays an animation. This method is equivalent to the switching between
- Parameters
| Name | Type | Mandatory | Description |
| -------- | -------- | -------- | -------- |
| name | string | No | Name of the target animation. By default, the value is null. |
| name | string | No | Name of the target animation. By default, the value is null. |
- Example
...
...
@@ -340,7 +340,7 @@ Stops an animation. When the **play** interface is called next time, the animati
- Parameters
| Name | Type | Mandatory | Description |
| -------- | -------- | -------- | -------- |
| name | string | No | Name of the target animation. By default, the value is null. |
| name | string | No | Name of the target animation. By default, the value is null. |
- Example
...
...
@@ -358,7 +358,7 @@ Sets the playback speed of an animation.
- Parameters
| Name | Type | Mandatory | Description |
| -------- | -------- | -------- | -------- |
| speed | number | Yes | Playback speed. The value is a floating-point number. If the value is greater than 0, the animation plays in forward direction. If the value is less than 0, the animation plays in reversed direction. If the value is 0, the animation is paused. If the value is **1.0** or **-1.0**, the animation plays at the normal speed. |
| speed | number | Yes | Playback speed. The value is a floating-point number. If the value is greater than 0, the animation plays in forward direction. If the value is less than 0, the animation plays in reversed direction. If the value is 0, the animation is paused. If the value is **1.0** or **-1.0**, the animation plays at the normal speed. |
- Example
...
...
@@ -376,7 +376,7 @@ Sets the playback direction of an animation.
- Parameters
| Name | Type | Mandatory | Description |
| -------- | -------- | -------- | -------- |
| direction | AnimationDirection | Yes | Direction in which the animation plays. **1**: forwards; **-1**: backwards. When set to play backwards, the animation plays from the current playback progress to the first frame. When this setting is combined with **loop** being set to **true**, the animation plays backwards continuously. When the value of **speed** is less than 0, the animation also plays backwards.<br/>**AnimationDirection**: 1 \| -1. |
| direction | AnimationDirection | Yes | Direction in which the animation plays. **1**: forwards; **-1**: backwards. When set to play backwards, the animation plays from the current playback progress to the first frame. When this setting is combined with **loop** being set to **true**, the animation plays backwards continuously. When the value of **speed** is less than 0, the animation also plays backwards.<br/>**AnimationDirection**: 1 \|-1. |
- Example
...
...
@@ -394,9 +394,9 @@ Sets the animation to stop at the specified frame or time.
- Parameters
| Name | Type | Mandatory | Description |
| -------- | -------- | -------- | -------- |
| value | number | Yes | Frame ID (greater than or equal to 0) or time progress (ms) at which the animation will stop. |
| isFrame | boolean | No | Whether to set the animation to stop at the specified frame. The value **true** means to set the animation to stop at the specified frame, and **false** means to set the animation to stop at the specified time progress. The default value is **false**. |
| name | string | No | Name of the target animation. By default, the value is null. |
| value | number | Yes | Frame ID (greater than or equal to 0) or time progress (ms) at which the animation will stop. |
| isFrame | boolean | No | Whether to set the animation to stop at the specified frame. The value **true** means to set the animation to stop at the specified frame, and **false** means to set the animation to stop at the specified time progress. The default value is **false**. |
| name | string | No | Name of the target animation. By default, the value is null. |
- Example
...
...
@@ -417,9 +417,9 @@ Sets the animation to start from the specified frame or time progress.
- Parameters
| Name | Type | Mandatory | Description |
| -------- | -------- | -------- | -------- |
| value | number | Yes | Frame ID (greater than or equal to 0) or time progress (ms) at which the animation will start. |
| name | string | No | Name of the target animation. By default, the value is null. |
| value | number | Yes | Frame ID (greater than or equal to 0) or time progress (ms) at which the animation will start. |
| isFrame | boolean | Yes | Whether to set the animation to start from the specified frame. The value **true** means to set the animation to start from the specified frame, and **false** means to set the animation to start from the specified time progress. The default value is **false**. |
| name | string | No | Name of the target animation. By default, the value is null. |
- Example
...
...
@@ -440,8 +440,8 @@ Sets the animation to play only the specified segment.
| segments | AnimationSegment = [number, number] \| AnimationSegment[] | Yes | Segment or segment list.<br/>If all segments in the segment list are played, only the last segment is played in the next cycle. |
| forceFlag | boolean | Yes | Whether the settings take effect immediately. The value **true** means the settings take effect immediately, and **false** means the settings take effect until the current cycle of playback is completed. |
- Example
...
...
@@ -462,7 +462,7 @@ Resets the settings configured by the **playSegments** method to play all the fr
| forceFlag | boolean | Yes | Whether the settings take effect immediately. The value **true** means the settings take effect immediately, and **false** means the settings take effect until the current cycle of playback is completed. |
- Example
...
...
@@ -493,7 +493,7 @@ Sets the precision of the **currentFrame** attribute to display floating-point n
| useSubFrames | boolean | Yes | Whether the **currentFrame** attribute displays floating-point numbers. By default, the attribute displays floating-point numbers.<br/>**true**: The **currentFrame** attribute displays floating-point numbers.<br/>**false**: The **currentFrame** attribute displays an integer and does not display floating-point numbers. |
- Example
...
...
@@ -511,7 +511,7 @@ Obtains the duration (irrelevant to the playback speed) or number of frames for
- Parameters
| Name | Type | Mandatory | Description |
| -------- | -------- | -------- | -------- |
| inFrames | boolean | No | Whether to obtain the duration or number of frames. **true**: number of frames. **false**: duration, in ms. The default value is **false**. |
| inFrames | boolean | No | Whether to obtain the duration or number of frames. **true**: number of frames. **false**: duration, in ms. The default value is **false**. |
- Example
...
...
@@ -529,8 +529,8 @@ Adds an event listener. After the event is complete, the specified callback func
- Parameters
| Name | Type | Mandatory | Description |
| -------- | -------- | -------- | -------- |
| name | AnimationEventName | Yes | Animation event type. The available options are as follows:<br/>'enterFrame', 'loopComplete', 'complete', 'segmentStart', 'destroy', 'config_ready', 'data_ready', 'DOMLoaded', 'error', 'data_failed', 'loaded_images' |
| name | AnimationEventName | Yes | Animation event type. The available options are as follows:<br/>'enterFrame', 'loopComplete', 'complete', 'segmentStart', 'destroy', 'config_ready', 'data_ready', 'DOMLoaded', 'error', 'data_failed', 'loaded_images' |
| callback | AnimationEventCallback<T> | Yes | Custom callback. By default, the value is null, meaning that all callbacks of the event will be removed. |
- Example
...
...
@@ -573,8 +573,8 @@ Directly triggers all configured callbacks of a specified event.
- Parameters
| Name | Type | Mandatory | Description |
| -------- | -------- | -------- | -------- |
| name | AnimationEventName | Yes | Animation event type. |
| args | any | Yes | Custom callback parameters. |
| 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**. |
| 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**. |
| 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 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. |
| 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. |
| onSelected(index: number) => void | Callback invoked when an item in the alphabetic indexer bar is selected. |
| onRequestPopupData(callback: (index: number) => Array<string>)<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) => void)<sup>8+</sup> | Invoked when an item in the index pop-up window is selected. |
| direction | FlexDirection | No | FlexDirection.Row | Direction in which child components are arranged in the **<Flex>** component, that is, the direction of the main axis. |
| wrap | FlexWrap | No | FlexWrap.NoWrap | Whether the **<Flex>** component has a single line or multiple lines. |
| justifyContent | FlexAlign | No | FlexAlign.Start | Alignment mode of the child components in the **<Flex>** component along the main axis. |
| alignItems | [ItemAlign](ts-appendix-enums.md#itemalign-enums) | No | ItemAlign.Stretch | Alignment mode of the child components in the **<Flex>** component along the cross axis. |
| alignContent | FlexAlign | No | FlexAlign.Start | Alignment mode of the child components in a multi-line **<Flex>** component along the cross axis. This parameter is valid only when **wrap** is set to **Wrap** or **WrapReverse**. |
| 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. |
| 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. |
| 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. |
| editMode<sup>8+</sup> | boolean | false | Whether to enter editing mode. In editing mode, you can drag the **<[GridItem](ts-container-griditem.md)>** in the **<Gird>**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 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. |
| 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 **<GridItem>** is selectable by the mouse.<br/>> **NOTE**<br/>> This attribute takes effect only when mouse frame selection is enabled for the parent **<Grid>** container. |
| onSelect(callback: (isSelected: boolean) => any)<sup>8+</sup> | Triggered when the selected state of the **<GridItem>** changes.<br/>**isSelected**: Returns **true** if the **<GridItem>** is selected by the mouse; returns **false** otherwise. |
| 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. |
| 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 Value | Description |
| 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 **<List>** component, the status includes the item serial number displayed at the start 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 **<List>** 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 **<List>** component, the status includes the item serial number displayed at the start position. |
- EdgeEffect enums
| Name | Description |
| -------- | -------- |
| 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. |
| 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. |
| onItemDelete(index: number) => boolean | Triggered when a list item is deleted. |
| onScrollIndex(firstIndex: number, lastIndex: number) => void | Triggered when the start position and end position of the current list are changed. |
| 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 **<ListItem>** is selectable by the mouse.<br/>> **NOTE**<br/>> This attribute takes effect only when mouse frame selection is enabled for the parent **<List>**container. |
- Sticky enums
| Name | Description |
| -------- | -------- |
| None | No sticky. |
| Normal | The list item is sticky. |
| onSelect(callback: (isSelected: boolean) => any)<sup>8+</sup> | Triggered when the selected state of the **<ListItem>** changes.<br/>**isSelected**: Returns **true** if the **<ListItem>** is selected by the mouse; returns **false**otherwise. |
| active | boolean | - | Whether the **<Navigator>** 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. |
| 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. |
| 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 a **minibar** or **foldable** panel in its minimum size. This attribute does not take effect for **temporary** panels. |
| Full | Displays a panel in a large (fullscreen-like) 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. |
| onChange(callback: (width: number, height: number, mode: PanelMode) => 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. |
| 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/>- **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.|
| 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.|
| 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. |
| onScroll(xOffset: number, yOffset: number) => void | Invoked to return the horizontal and vertical offsets during scrolling when the specified scroll event occurs. |
| onScrollEdge(side: Edge) => void | Callback for the event of scrolling to the edge. |
| onScrollEnd() => void | Invoked when scrolling stops. |
| 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. |
| 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 **<Swiper>** component. You can bind this object to the
| 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/>> **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. |
> - The **<TabContent>** component does not support setting of the common width attribute. By default, its width is the same as that of the parent **<Tabs>** component.
>
> - The **<TabContent>** component does not support setting of the common height attribute. Its height is determined by the height of the parent **<Tabs>** component and the **<TabBar>** component.
| 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. |
| 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.
| 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 Value | Mandatory | Description |
| Name | Type | DefaultValue | Mandatory | Description |
| animateTo(value:[AnimationOption](#animationoption-object), event: ()=> 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 Value | Description |
| Name | Type | DefaultValue | Description |
| -------- | -------- | -------- | -------- |
| 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. |
| 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. |
| 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. |
> 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 Value | Description |
| 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/>> **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/>> **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 gestures of child components are not masked and are recognized based on the default gesture recognition sequence. |
| 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/>> **NOTE**<br/>> However, the built-in gestures of the child components are not masked. For example, when the child component is a **<List>** component, the built-in sliding gestures can still be triggered. |
| 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. |
| 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 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. |
| 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 velocity. |
| velocity | number | Yes | Initialvelocity. |
| 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.
| 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. |
| 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/>> **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. |
| onStart() => void | Triggered when the video is played. |
| onPause() => void | Triggered when the video playback is paused. |
| onFinish() => void | Triggered when the video playback is finished. |
| onError() => void | Triggered when the video playback fails. |
| onPrepared(event?: { duration: number }) => void | Triggered when video preparation is complete. The video duration (in seconds) is obtained from **duration**. |
| onSeeking(event?: { time: number }) => void | Triggered to report the time (in seconds) when the progress bar is being dragged. |
| onSeeked(event?: { time: number }) => void | Triggered to report the playback time (in seconds) when the user finishes dragging the progress bar. |
| onUpdate(event?: { time: number }) => void | Triggered once per 250 ms when the playback progress changes. The unit of the current playback time is second. |
| 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: () => 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 | () => 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<SheetInfo> | Yes | - | Options in the dialog box. Each option supports the image, text, and callback. |
| motionPath | {<br/>path: string,<br/>from?: number,<br/>to?: number,<br/>rotatable?: boolean<br/>}<br/>> **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. |
| [fillStyle](#fillstyle) | <color>\|[CanvasGradient](ts-components-canvas-canvasgradient.md)\|[CanvasPattern](#canvaspattern) | - | Style used to fill an area.<br/>- When the type is **<color>**, this attribute indicates the fill color.<br/>- When the type is **CanvasGradient**, this attribute indicates a gradient object, which is created using the [createLinearGradient](#createlineargradient) method.<br/>- When the type is **CanvasPattern**, this attribute indicates a pattern, which is created using the [createPattern](#createpattern)method. |
| [lineWidth](#linewidth) | number | - | Linewidth. |
| [strokeStyle](#strokestyle) | <color>\|[CanvasGradient](ts-components-canvas-canvasgradient.md)\|[CanvasPattern](#canvaspattern) | - | Stroke style.<br/>- When the type is **<color>**, this attribute indicates the stroke color.<br/>- When the type is **CanvasGradient**, this attribute indicates a gradient object, which is created using the [createLinearGradient](#createlineargradient) method.<br/>- When the type is **CanvasPattern**, this attribute indicates a pattern, which is created using the [createPattern](#createpattern)method. |
| [lineCap](#linecap) | string | 'butt' | Style of the line endpoints. The options are as follows:<br/>- **'butt'**: The endpoints of the line are squared off.<br/>- **'round'**: The endpoints of the line are rounded.<br/>- **'square'**: The endpoints of the line are squared off by adding a box with an equal width and half the height of the line's thickness. |
| [lineJoin](#linejoin) | string | 'miter' | Style of the shape used to join line segments. The options are as follows:<br/>- **'round'**: The shape used to join line segments is a rounded corner with the radius equal to the line width.<br/>- **'bevel'**: The shape used to join line segments is a beveled corner. The rectangular corner of each line is independent.<br/>- **'miter'**: The shape used to join line segments is a mitered corner. The corner is formed by extending the outside edges of the lines until they meet. You can adjust the effect of this attribute using **miterLimit**. |
| [miterLimit](#miterlimit) | number | 10 | Maximum miter length. The miter length is the distance between the inner corner and the outer corner where two lines meet. |
| [font](#font) | string | 'normal normal 14px sans-serif' | Font style.<br/>Syntax: ctx.font='font-size font-family'<br/>- (Optional) **font-size**: font size and row height. The unit can only be px.<br/>- (Optional) **font-family**: font family.<br/>Syntax: ctx.font='font-style font-weight font-size font-family'<br/>- (Optional) **font-style**: specifies the font style. Available values are **'normal'** and **'italic'**.<br/>- (Optional) **font-weight**: font weight. Available values are as follows: **'normal'**, **'bold'**, **'bolder'**, **'lighter'**, **100**, **200**, **300**, **400**, **500**, **600**, **700**, **800**, **900**<br/>- (Optional) **font-size**: font size and row height. The unit can only be px.<br/>- (Optional) **font-family**: font family. Available values are **'sans-serif'**, **'serif'**, and **'monospace'**. |
| [textAlign](#textalign) | string | 'left' | Text alignment mode. Available values are as follows:<br/>- **'left'**: The text is left-aligned.<br/>- **'right'**: The text is right-aligned.<br/>- **'center'**: The text is center-aligned.<br/>- **'start'**: The text is aligned with the start bound.<br/>- **'end'**: The text is aligned with the end bound.<br/>> **NOTE**<br/>> In the **ltr** layout mode, the value **start** equals **left**. In the **rtl** layout mode, the value **start** equals **right**. |
| [textBaseline](#textbaseline) | string | 'alphabetic' | Horizontal alignment mode of text. Available values are as follows:<br/>- **'alphabetic'**: The text baseline is the normal alphabetic baseline.<br/>- **'top'**: The text baseline is on the top of the text bounding box.<br/>- **'hanging'**: The text baseline is a hanging baseline over the text.<br/>- **'middle'**: The text baseline is in the middle of the text bounding box.<br/>- **'ideographic'**: The text baseline is the ideographic baseline. If a character exceeds the alphabetic baseline, the ideographic baseline is located at the bottom of the excess character.<br/>- **'bottom'**: The text baseline is at the bottom of the text bounding box. Its difference from the ideographic baseline is that the ideographic baseline does not consider letters in the next line. |
| [lineDashOffset](#linedashoffset) | number | 0.0 | Offset of the dashed line. The precision is float. |
| [globalCompositeOperation](#globalcompositeoperation) | string | 'source-over' | Composition operation type. Available values are as follows: **'source-over'**, **'source-atop'**, **'source-in'**, **'source-out'**, **'destination-over'**, **'destination-atop'**, **'destination-in'**, **'destination-out'**, **'lighter'**, **'copy'**, and **'xor'**. |
| [shadowBlur](#shadowblur) | number | 0.0 | Blur level during shadow drawing. A larger value indicates a more blurred effect. The precision is float. |
| [shadowOffsetX](#shadowoffsetx) | number | - | X-axis shadow offset relative to the original object. |
| [shadowOffsetY](#shadowoffsety) | number | - | Y-axis shadow offset relative to the original object. |
| [imageSmoothingEnabled](#imagesmoothingenabled) | boolean | true | Whether to adjust the image smoothness during image drawing. The value **true** means to enable this feature, and **false** means the opposite. |
| imageSmoothingQuality | string | 'low' | Image smoothness. The value can be **'low'**, **'medium'**, or **'high'**. |
Defines a transformation matrix. To transform a graph, you only need to set parameters of the matrix. The coordinates of the graph are multiplied by the matrix values to obtain new coordinates of the transformed graph. You can use the matrix to implement multiple transform effects.
> The following formulas calculate coordinates of the transformed graph. **x** and **y** represent coordinates before transformation, and **x'** and **y'** represent coordinates after transformation.
>
> - x' = scaleX \* x + skewY \* y + translateX
...
...
@@ -1696,14 +1696,14 @@ Defines a transformation matrix. To transform a graph, you only need to set para
> - y' = skewX \* x + scaleY \* y + translateY
- Parameters
| Name | Type | Mandatory | Default Value | Description |
| Name | Type | Mandatory | DefaultValue | Description |
| sx | number | No | 0 | X-coordinate of the upper left corner of the rectangle used to crop the source image. |
| sy | number | No | 0 | Y-coordinate of the upper left corner of the rectangle used to crop the source image. |
| sWidth | number | No | 0 | Target width to crop the source image. |
| sHeight | number | No | 0 | Target height to crop the source image. |
Creates an **ImageData** object based on the specified width and height. For details, see [ImageData](../reference/arkui-ts/ts-components-canvas-imagebitmap.md).
- Parameters
| Name | Type | Mandatory | Default Value | Description |
| Name | Type | Mandatory | DefaultValue | Description |
Creates an **ImageData** object by copying an existing **ImageData** object. For details, see [ImageData](../reference/arkui-ts/ts-components-canvas-imagebitmap.md).
- Parameters
| Name | Type | Mandatory | Default Value | Description |
| Name | Type | Mandatory | DefaultValue | Description |
| PageTransitionEnter | Object | Page entrance component, which is used to customize the entrance effect of the current page. For details, see animation parameters. |
| PageTransitionExit | Object | Page exit component, which is used to customize the exit effect of the current page. For details, see animation parameters. |
- Animation parameters
| Name | Type | Default Value | Mandatory | Description |
| Name | Type | DefaultValue | Mandatory | Description |
| type | RouteType | - | No | If this parameter is not set, the reverse playback effect as pop switches to push is used. |
| duration | number | 1000 | No | Animation duration, in ms. |
| curve | Curve \| Curves | Linear | No | Animation curve. For details about the valid values, see **Curve enums**. |
| delay | number | 0 | No | Animation delay, in ms. Delayed animation is disabled by default. |
| type | RouteType | - | No | If this parameter is not set, the reverse playback effect as pop switches to push is used. |
| duration | number | 1000 | No | Animation duration, in ms. |
| curve | Curve\| Curves | Linear | No | Animation curve. For details about the valid values, see **Curve enums**. |
| delay | number | 0 | No | Animation delay, in ms. Delayed animation is disabled by default. |
- RouteType enums
| Name | Description |
| -------- | -------- |
| Pop | When page A jumps to page B, page A is Exit+Push, and page B is Enter+Push. |
| opacity | number | 1 | No | Opacity, which is the opacity value of the start point of entrance or the end point of exit. |
| slide | SlideEffect | SlideEffect.Right | No | Slide effect during page transition. For details about the valid values, see the description of [ERROR:Invalid link:en-us_topic_0000001257138309.xml#xref2991922111212,link:#li81331342185820](#li81331342185820). |
| translate | {<br/>x? : number,<br/>y? : number,<br/>z? : number<br/>} | - | No | Translation effect during page transition, which is the value of the start point of entrance and the end point of exit. When this parameter is set together with **slide**, the latter takes effect by default. |
| scale | {<br/>x? : number,<br/>y? : number,<br/>z? : number,<br/>centerX? : number,<br/>centerY? : number<br/>} | - | No | Scaling effect during page transition, which is the value of the start point of entrance and the end point of exit. |
| opacity | number | 1 | No | Opacity, which is the opacity value of the start point of entrance or the end point of exit. |
- SlideEffect enums
| Name | Description |
| -------- | -------- |
| Left | When set to Enter, slides in from the left. When set to Exit, slides out to the left. |
| Right | When set to Enter, slides in from the right. When set to Exit, slides out to the right. |
| Top | When set to Enter, slides in from the top. When set to Exit, slides out to the top. |
| onEnter(type: RouteType, progress: number) => void | The callback input parameter is the normalized progress of the current entrance animation. The value range is 0–1. |
| onExit(type: RouteType, progress: number) => void | The callback input parameter is the normalized progress of the current exit animation. The value range is 0–1. |
| type | TransitionType | TransitionType.All | No | Transition type, which includes component addition and deletion by default.<br/>> **NOTE**<br/>> If **type** is not specified, insertion and deletion use the same transition type. |
| opacity | number | 1 | No | Opacity effect during component transition, which is the value of the start point of insertion and the end point of deletion. |
| translate | {<br/>x? : number,<br/>y? : number,<br/>z? : number<br/>} | - | No | Translation effect during component transition, which is the value of the start point of insertion and the end point of deletion. |
| scale | {<br/>x? : number,<br/>y? : number,<br/>z? : number,<br/>centerX? : number,<br/>centerY? : number<br/>} | - | No | Scaling effect during component transition, which is the value of the start point of insertion and the end point of deletion. |
| rotate | {<br/>x?: number,<br/>y?: number,<br/>z?: number,<br/>angle?: Angle,<br/>centerX?: Length,<br/>centerY?: Length<br/>} | - | No | Rotation effect during component transition, which is the value of the start point of insertion and the end point of deletion. |
- TransitionType enums
| Name | Description |
| -------- | -------- |
| All | The transition takes effect in all scenarios. |
| sharedTransition | id: string,<br/>options?: Object | - | If the same ID is configured for a component on the two pages, this shared component is transited. If this parameter is set to an empty string, no shared elements are transited. |
- options parameters
| Name | Type | Default Value | Mandatory | Description |
| Name | Type | DefaultValue | Mandatory | Description |
| backgroundColor | Color | - | Background color of a component. |
| backgroundImage | src: string,<br/>repeat?: [ImageRepeat](ts-appendix-enums.md#imagerepeat-enums) | - | **src**: image address, which can be the address of an Internet or a local image. (SVG images are not supported.)<br/>**repeat**: whether the background image is repeatedly used. By default, the background image is not repeatedly used. |
| backgroundImageSize | {<br/>width?: Length,<br/>height?: Length<br/>} \| ImageSize | Auto | Width and height of the background image. When the input is a **{width: Length, height: Length}** object, if only one attribute is set, the other attribute is the set value multiplied by the original aspect ratio of the image. By default, the original image aspect ratio remains unchanged. |
| backgroundImagePosition | {<br/>x?: Length,<br/>y?: Length<br/>} \|[Alignment](ts-appendix-enums.md#alignment-enums) | {<br/>x: 0,<br/>y: 0<br/>} | Position of the background image in the component. |
| enabled | boolean | true | The value **true** means that the component is available and can respond to operations such as clicking. The value **false** means that the component does not respond to operations such as clicking. |
| flexGrow | number | 0 | Percentage of the **Flex** layout's remaining space that is allocated to the component. |
| flexShrink | number | 1 | Percentage of the **Flex** layout's shrink size that is allocated to the component. |
| alignSelf | [ItemAlign](ts-appendix-enums.md#itemalign-enums) | Auto | Alignment mode, which overwrites the default **alignItems** configuration in the **Flex** layout. |
| flexBasis | 'auto'\| Length | 'auto' | Base dimension of a component in the main axis of the **Flex**layout. |
| flexGrow | number | 0 | Percentage of the **Flex** layout's remaining space that is allocated to the component. |
| flexShrink | number | 1 | Percentage of the **Flex** layout's shrink size that is allocated to the component. |
| alignSelf | [ItemAlign](ts-appendix-enums.md#itemalign-enums) | Auto | Alignment mode, which overwrites the default **alignItems** configuration in the **Flex**layout. |
| linearGradient | {<br/>angle?:[Angle](../../ui/ts-types.md),<br/>direction?:GradientDirection,<br/>colors: Array<[ColorStop](../../ui/ts-types.md)><br/>repeating?: boolean<br/>} | - | Linear gradient.<br/>**angle**: angle of the linear gradient.<br/>**direction**: direction of the linear gradient.<br/>**colors**: description of the gradient colors.<br/>**repeating**: whether the colors are repeated. |
| sweepGradient | {<br/>center: Point,<br/>start?: angle,<br/>end?: angle,<br/>colors: Array<[ColorStop](../../ui/ts-types.md)><br/>repeating?: boolean<br/>} | - | Angle gradient.<br/>**center**: center point of the angle gradient.<br/>**start**: start point of the angle gradient.<br/>**end**: end point of the angle gradient.<br/>**colors**: description of the gradient colors.<br/>**repeating**: whether the colors are repeated. |
| radialGradient | {<br/>center: Point,<br/>radius: Length,<br/>colors: Array<[ColorStop](../../ui/ts-types.md)><br/>repeating: boolean<br/>} | - | Radial gradient.<br/>**center**: center point of the radial gradient.<br/>**radius**: radius of the radial gradient.<br/>**colors**: description of the gradient colors.<br/>**repeating**: whether the colors are repeated. |
- GradientDirection enums
...
...
@@ -25,15 +25,15 @@ None
| Name | Description |
| -------- | -------- |
| Left | The gradient direction is from right to left. |
| Top | The gradient direction is from bottom to top. |
| Right | The gradient direction is from left to right. |
> - This attribute is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
>
> - The column width and column gap in the grid layout are determined by the nearest parent component **GridContainer**. The component tree that uses grid attributes must contain one **GridContainer** or more.
...
...
@@ -15,11 +15,11 @@ None
## Attributes
| Name | Type | Default Value | Description |
| gridSpan | number | 1 | Default number of occupied columns, that is, the number of occupied columns when **span** in **useSizeType** is not set.<br/>>  **NOTE：**<br/>> If the **span** attribute is set, the component width is determined by the grid layout. |
| gridOffset | number | 0 | Default number of offset columns, that is, the number of offset columns in the start direction of the parent component (which is also the nth column that the component is in) when **offset** in **useSizeType** is not set.<br/>>  **NOTE：**<br/>> 1. After this attribute is set, the horizontal layout of the current component does not follow the original layout of the parent component. Instead, it offsets along the start direction of the parent component.<br/>> <br/>> 2. Offset = (Column width + Gap) x Number of columns<br/>> <br/>> 3. After this attribute is set, sibling components will be arranged relatively to this component, as in the relative layout. |
| useSizeType | {<br/>xs?: number \| { span: number, offset: number },<br/>sm?: number \| { span: number, offset: number },<br/>md?: number \| { span: number, offset: number },<br/>lg?: number \| { span: number, offset: number }<br/>} | - | Number of occupied columns and offset columns for a specific device width type. **span** indicates the number of occupied columns, and **offset** indicates the number of offset columns.<br/>If the value is of the number type, only the number of columns can be set. If the value is in the format of {"span": 1, "offset": 0}, both the number of occupied columns and the number of offset columns need to be set.<br/>- **xs** indicates that the device width type is **SizeType.XS**.<br/>- **sm** indicates that the device width type is **SizeType.SM**.<br/>- **md** indicates that the device width type is **SizeType.MD**.<br/>- **lg** indicates that the device width type is **SizeType.LG**. |
| gridSpan | number | 1 | Default number of occupied columns, that is, the number of occupied columns when **span** in **useSizeType** is not set.<br/>> **NOTE**<br/>> If the **span** attribute is set, the component width is determined by the grid layout. |
| gridOffset | number | 0 | Default number of offset columns, that is, the number of offset columns in the start direction of the parent component (which is also the nth column that the component is in) when **offset** in **useSizeType** is not set.<br/>> **NOTE**<br/>> 1. After this attribute is set, the horizontal layout of the current component does not follow the original layout of the parent component. Instead, it offsets along the start direction of the parent component.<br/>> <br/>> 2. Offset = (Column width + Gap) x Number of columns<br/>> <br/>> 3. After this attribute is set, sibling components will be arranged relatively to this component, as in the relative layout. |
| blur | number | - | Adds the content blurring for the current component. The input parameter is the blur radius. The larger the radius is, the more blurred the content is. If the value is **0**, the content is not blurred. |
| backdropBlur | number | - | Adds the background blur effect for the current component. The input parameter is the blur radius. The larger the radius is, the more blurred the background is. If the value is **0**, the background is not blurred. |
| shadow | {<br/>radius: number,<br/>color?: Color,<br/>offsetX?: number,<br/>offsetY?: number<br/>} | - | Adds the shadow effect to the current component. The input parameters are the fuzzy radius (mandatory), shadow color (optional; gray by default), X-axis offset (optional and 0 by default), and Y-axis offset (optional; 0 by default). The offset unit is px. |
| grayscale | number | 0.0 | The value indicates the grayscale conversion ratio. If the input value is **1.0**, the image is converted into a grayscale image. If the input value is **0.0**, the image does not change. If the input value is between **0.0** and **1.0**, the effect changes in linear mode. The unit is percentage. The unit is percentage. |
| brightness | number | 1.0 | Adds a brightness to the current component. The input parameter is a brightness ratio. The value **1** indicates no effects. The value **0** indicates the complete darkness. If the value is less than **1**, the brightness decreases. If the value is greater than **1**, the brightness increases. A larger value indicates a higher brightness. |
| saturate | number | 1.0 | Adds the saturation effect to the current component. The saturation is the ratio of the chromatic component to the achromatic component (gray) in a color. When the input value is **1**, the source image is displayed. When the input value is greater than **1**, a higher percentage of the chromatic component indicates a higher saturation. When the input value is less than **1**, a higher percentage of the achromatic component indicates a lower saturation. The unit is percentage. |
| contrast | number | 1.0 | Adds the contrast effect to the current component. The input parameter is a contrast value. If the value is **1**, the source image is displayed. If the value is greater than **1**, a larger value indicates a higher contrast and a clearer image. If the value is less than **1**, a smaller value indicates a lower contrast is. If the value is **0**, the image becomes all gray. The unit is percentage. |
| invert | number | 0 | Inverts the input image. The input parameter is an image inversion ratio. The value **1** indicates complete inversion. The value **0** indicates that the image does not change. The unit is percentage. |
| colorBlend<sup>8+</sup> | Color | - | Adds the color blend effect to the current component. The input parameter is the blended color. |
| sepia | number | 0 | Converts the image color to sepia. The input parameter is an image inversion ratio. The value **1** indicates the image is completely sepia. The value **0** indicates that the image does not change. The unit is percentage. |
| hueRotate | Angle | 0deg | Adds the hue rotation effect to the current component. The input parameter is a rotation angle. If the input value is **0deg**, the image does not change (because the default rotation angle is **0deg**). The input parameter does not have the maximum value. If the value exceeds **360deg**, the image is rotated one ore more circles. |
> This attribute is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
...
...
@@ -13,10 +13,10 @@ None
## Attributes
| Name | Type | Default Value | Description |
| Name | Type | DefaultValue | Description |
| -------- | -------- | -------- | -------- |
| aspectRatio | number | - | Specifies an aspect ratio for the current component. |
| displayPriority | number | - | Sets a display priority for the current component in the layout container. When the space of the parent container is insufficient, the component with a lower priority is hidden.<br/>>  **NOTE：**<br/>> This parameter is valid only for the Row/Column/Flex (single-row) container component. |
| aspectRatio | number | - | Specifies an aspect ratio for the current component. |
| displayPriority | number | - | Sets a display priority for the current component in the layout container. When the space of the parent container is insufficient, the component with a lower priority is hidden.<br/>> **NOTE**<br/>> This parameter is valid only for the Row/Column/Flex (single-row) container component. |
> This attribute is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
...
...
@@ -13,21 +13,21 @@ None
## Attributes
| Name | Type | Default Value | Description |
| Name | Type | DefaultValue | Description |
| -------- | -------- | -------- | -------- |
| align | [Alignment](ts-appendix-enums.md#alignment-enums) | Center | Alignment of the component content. This attribute is valid only when the values of **width** and **height** are greater than the size of the component content. |
| direction | Direction | Auto | Horizontal layout of the component. For details about the options, see **Direction** enums. |
| position | {<br/>x: Length,<br/>y: Length<br/>} | - | Offset of the component anchor point relative to the top start edge of the parent component. The offset is expressed using absolute values. When laying out components, this attribute does not affect the layout of the parent component. It only adjusts the component position during drawing. |
| align | [Alignment](ts-appendix-enums.md#alignment-enums) | Center | Alignment of the component content. This attribute is valid only when the values of **width** and **height** are greater than the size of the component content. |
| direction | Direction | Auto | Horizontal layout of the component. For details about the options, see **Direction**enums. |
| position | {<br/>x: Length,<br/>y: Length<br/>} | - | Offset of the component anchor point relative to the top start edge of the parent component. The offset is expressed using absolute values. When laying out components, this attribute does not affect the layout of the parent component. It only adjusts the component position during drawing. |
| markAnchor | {<br/>x: Length,<br/>y: Length<br/>} | {<br/>x: 0,<br/>y: 0<br/>} | Anchor point of the component for positioning. The top start edge of the component is used as the reference point for offset. |
| offset | {<br/>x: Length,<br/>y: Length<br/>} | {<br/>x: 0,<br/>y: 0<br/>} | Coordinate offset of the relative layout. This attribute does not affect the layout of the parent component. It only adjusts the component position during drawing. |
| bindMenu | Array<MenuItem> \| [CustomBuilder](../../ui/ts-types.md)<sup>8+</sup> | - | Menu bound to the component, which is displayed when you click the component. Textual and custom menu items are supported.|
| bindContextMenu<sup>8+</sup> | content: [CustomBuilder](../../ui/ts-types.md)<br>responseType: ResponseType | - | Context menu bound to the component, which is displayed when you long-press or right-click the component. Only custom menu items are supported.|
| bindMenu | Array<MenuItem>\|[CustomBuilder](../../ui/ts-types.md)<sup>8+</sup> | - | Menu bound to the component, which is displayed when you click the component. Textual and custom menu items are supported.|
| bindContextMenu<sup>8+</sup> | content:[CustomBuilder](../../ui/ts-types.md)<br>responseType: ResponseType | - | Context menu bound to the component, which is displayed when you long-press or right-click the component. Only custom menu items are supported.|
- MenuItem
| Name| Type| Description|
| -------- | -------- | -------- |
| value | string | Menu item text.|
| action | () => void | Action triggered when a menu item is clicked.|
| action | () =>void | Action triggered when a menu item is clicked.|
> This attribute is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
...
...
@@ -16,9 +16,9 @@ None
## Attributes
| Name | Type | Default Value | Description |
| Name | Type | DefaultValue | Description |
| -------- | -------- | -------- | -------- |
| opacity | number | 1 | Opacity of a component. The value ranges from **0** to **1**. The value **1** means opaque, and **0** means completely transparent. |
| opacity | number | 1 | Opacity of a component. The value ranges from **0** to **1**. The value **1** means opaque, and **0** means completely transparent. |
| overlay | title: string,<br/>options: {<br/>align?: [Alignment](ts-appendix-enums.md#alignment-enums),<br/>offset?: {x: number, y: number}<br/>} | {<br/>align: Alignment.Center,<br/>offset: {0, 0}<br/>} | Mask added to the component. The mask has the same layout as the component. |
| bindPopup | show: boolean,<br/>popup: PopupOption \| CustomPopupOption | - | Settings of the popup bound to a component.<br/>**show**: whether to display the popup on the creation page by default. The default value is **false**.<br/>**popup**: parameters of the current popup. |
- PopupOption attributes
| Name | Type | Mandatory | Default Value | Description |
| Name | Type | Mandatory | DefaultValue | Description |
| message | string | Yes | - | Content of the popup message. |
| placementOnTop | boolean | No | false | Whether to display the popup above the component. The default value is **false**. |
| primaryButton | {<br/>value: string,<br/>action: () => void<br/>} | No | - | First button.<br/>**value**: text of the primary button in the popup.<br/>**action**: callback function for clicking the primary button. |
| secondaryButton | {<br/>value: string,<br/>action: () => void<br/>} | No | - | Second button.<br/>**value**: text of the secondary button in the popup.<br/>**action**: callback function for clicking the secondary button. |
| onStateChange | (isVisible: boolean) => void | No | - | Callback for the popup status change event. The parameter **isVisible** indicates the visibility of the popup. |
- CustomPopupOption<sup>8+</sup>
| Name | Type | Mandatory | Default Value | Description |
| Name | Type | Mandatory | DefaultValue | Description |
| builder | () => any | Yes | - | Builder of the tooltip content. |
| placement | Placement | No | Placement.Bottom | Preferred position of the tooltip component. If the set position is insufficient for holding the component, it will be automatically adjusted. |
| maskColor | [Color](../../ui/ts-types.md) | No | - | Color of the tooltip mask. |
| popupColor | [Color](../../ui/ts-types.md) | No | - | Color of the tooltip. |
| enableArrow | boolean | No | true | Whether to display arrows. Arrows are displayed only for tooltips in the up and down directions. |
| autoCancel | boolean | No | true | Whether to automatically close the tooltip when an operation is performed on the page. |
| onStateChange | (isVisible: boolean) => void | No | - | Callback for the popup status change event. The parameter **isVisible** indicates the visibility of the popup. |
- Placement<sup>8+</sup> enums
| Name | Description |
| -------- | -------- |
| Left | The tooltip is on the left of the component. |
| Right | The tooltip is on the right of the component. |
| Top | The tooltip is on the top of the component. |
| clip | Shape\| boolean | false | Specifies a clip mode. The value **Shape** indicates that the current component is cropped based on the specified shape. The value **boolean** specifies whether to clip the component based on the edge outline. |
| mask | Shape | - | Adds a mask of the specified shape to the current component. |
| layoutWeight | number | 0 | Weight of the component during layout. When the container size is determined, the layout of the component and sibling components is allocated based on the weight along the main axis. The component size setting is ignored.<br/>>  **NOTE：**<br/>> This attribute is valid only for the **Row**, **Column**, and **Flex** layouts. |
| width | Length | - | Width of a component. By default, the width required to fully hold the component content is used. |
| height | Length | - | Height of the component. By default, the height required to fully hold the component content is used. |
| size | {<br/>width?: Length,<br/>height?: Length<br/>} | - | Height and width of the component. |
| padding | {<br/>top?: Length,<br/>right?: Length,<br/>bottom?: Length,<br/>left?: Length<br/>} \| Length | 0 | Padding of the component.<br/>When the parameter is of the **Length** type, the four paddings take effect. |
| margin | {<br/>top?: Length,<br/>right?: Length,<br/>bottom?: Length,<br/>left?: Length<br/>}<br/>\| Length | 0 | Margin of the component. <br/>When the parameter is of the **Length** type, the four margins take effect. |
| constraintSize | {<br/>minWidth?: Length,<br/>maxWidth?: Length,<br/>minHeight?: Length,<br/>maxHeight?: Length<br/>} | {<br/>minWidth: 0,<br/>maxWidth: Infinity,<br/>minHeight: 0,<br/>maxHeight: Infinity<br/>} | Constraint size of the component, which is used to limit the size range during component layout. |
| layoutWeight | number | 0 | Weight of the component during layout. When the container size is determined, the layout of the component and sibling components is allocated based on the weight along the main axis. The component size setting is ignored.<br/>> **NOTE**<br/>> This attribute is valid only for the **Row**, **Column**, and **Flex** layouts. |
| fontSize | Length | - | Text size. If the value is of the number type, the unit fp is used. |
| fontStyle | FontStyle | FontStyle.Normal | Font style of the text. |
| fontWeight | number\| FontWeight | FontWeight.Normal | 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/>For common values of the **FontWeight** type, see **FontWeight**enums. |
| fontFamily | string | - | Font family of the text. Use commas (,) to separate multiple fonts. The priority the fonts is the sequence in which they are placed. An example value is **Arial, sans-serif**. |
| responseRegion | Array<Rectangle>\| Rectangle | {<br/>x: 0,<br/>y: 0,<br/>width: '100%',<br/>height: '100%'<br/>} | One or more touch targets, including their location and size.<br/>> **NOTE**<br/>> The percentage is measured relative to the component itself.<br/>> <br/>> **x** and **y** can be set to a positive or negative percentage value. For example, when **x** is set to **'100%'**, the touch target is offset from the right edge of the component by the component's width. When **x** is set to **'-100%'**, the touch target is offset from the left edge of the component by the component's width. When **y** is set to **'100%'**, the touch target is offset from the bottom edge of the component by the component's height. When **y** is set to **'-100%'**, the touch target is offset from the top edge of the component by the component's height.<br/>> <br/>> **width** and **height** can only be set to positive percentage values. When **width** is set to **'100%'**, the width of the touch target is equal to that of the component; when **height** is set to **'100%'**, the height of the touch target is equal to that of the component. |
- Rectangle attributes
| Name | Type | Mandatory | Default Value | Description |
| Name | Type | Mandatory | DefaultValue | Description |
> When both **x** and **y** are set to positive values, the entire touch target offsets towards the lower right corner of the component. How much the touch target offsets is subject to the set values.
| rotate | {<br/>x?: number,<br/>y?: number,<br/>z?: number,<br/>angle?: Angle,<br/>centerX?: Length,<br/>centerY?: Length<br/>} | {<br/>x: 0,<br/>y: 0,<br/>z: 0,<br/>angle: 0,<br/>centerX: '50%',<br/>centerY: '50%'<br/>} | The vector (x, y, z) specifies a rotation axis. A positive angle indicates a clockwise rotation, and a negative angle indicates a counterclockwise rotation. The default value is **0**. **centerX** and **centerY** are used to set the rotation center point. |
| translate | {<br/>x?: Length,<br/>y?: Length,<br/>z? : Length<br/>} | {<br/>x: 0,<br/>y: 0,<br/>z: 0<br/>} | Translation distance along the x-, y-, and z-axis. The translation direction is determined by the positive and negative values. The default value is **0**. |
| scale | {<br/>x?: number,<br/>y?: number,<br/>z?: number,<br/>centerX?: Length,<br/>centerY?: Length<br/>} | {<br/>x: 1,<br/>y: 1,<br/>z: 1,<br/>centerX:'50%',<br/>centerY:'50%'<br/>} | Scale ratio of the x-, y-, and z-axis. The default value is **1**. **centerX** and **centerY** are used to set the scale center point. |
| transform | matrix: Matrix4 | - | Transformation matrix of the component. |
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
...
...
@@ -12,9 +12,9 @@ None
## Events
| Name | Bubble Supported | Description |
| Name | BubbleSupported | Description |
| -------- | -------- | -------- |
| onAreaChange(event: (oldValue: Area, newValue: Area) => void) | No | Triggered when the component area changes. For details about the **Area** type, see **Area** attributes. |
| onAreaChange(event: (oldValue: Area, newValue: Area) => void) | No | Triggered when the component area changes. For details about the **Area** type, see **Area**attributes. |
> This method is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
...
...
@@ -12,21 +12,21 @@ None
## Events
| Name | Bubble Supported | Description |
| Name | BubbleSupported | Description |
| -------- | -------- | -------- |
| onClick(callback: (event?: ClickEvent) => void) | No | Called when a click event occurs. For details about the event parameters, see [ClickEvent](#clickevent). |
| onClick(callback: (event?: ClickEvent) => void) | No | Called when a click event occurs. For details about the event parameters, see [ClickEvent](#clickevent). |
### ClickEvent
| Name | Type | Description |
| -------- | -------- | -------- |
| screenX | number | X coordinate of the click relative to the left edge of the screen. |
| screenY | number | Y coordinate of the click relative to the upper edge of the screen. |
| x | number | X coordinate of the click relative to the left edge of the component being clicked. |
| y | number | Y coordinate of the click relative to the upper edge of the component being clicked. |
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
| Name | Bubble Supported | Description |
| Name | BubbleSupported | Description |
| -------- | -------- | -------- |
| onDragStart(callback: (event: [DragEvent](#DragEvent), extraParams?: string) =>\|[Custom Builder](../../ui/ts-types.md)) | No | Triggered when the component bound to the event is dragged for the first time.<br/>-**event**: information about the drag event, including the coordinates of the item that is being dragged.<br/>-**extraParams**: additional information about the drag event. For details, see extraParam.<br/>Return value: object being dragged, which is used for prompts displayed when the object is dragged.<br/>>  **NOTE：**<br/>> - A drag event can be triggered by a 150 ms long press.<br/>> <br/>> - If the duration of a long-press gesture is set to less than or equal to 150 ms, the callback for the long-press gesture takes precedence. Otherwise, the callback for the drag event takes precedence. |
| onDragEnter(callback: (event: [DragEvent](#DragEvent), extraParams?: string) => void) | No | Triggered when the dragged item enters a valid drop target.<br/>-**event**: information about the drag event, including the coordinates of the item that is being dragged.<br/>-**extraParams**: additional information about the drag event. For details, see extraParam.<br/>>  **NOTE：**<br/>> This event is valid only when the **onDrop** event is listened to. |
| onDragMove(callback: (event: [DragEvent](#DragEvent), extraParams?: string) => void) | No | Triggered when the dragged item moves in a valid drop target.<br/>-**event**: information about the drag event, including the coordinates of the item that is being dragged.<br/>-**extraParams**: additional information about the drag event. For details, see extraParam.<br/>>  **NOTE：**<br/>> This event is valid only when the **onDrop** event is listened to. |
| onDragLeave(callback: (event: [DragEvent](#DragEvent), extraParams?: string) => void) | No | Triggered when the dragged item leaves a valid drop target.<br/>-**event**: information about the drag event, including the coordinates of the item that is being dragged.<br/>-**extraParams**: additional information about the drag event. For details, see extraParam.<br/>>  **NOTE：**<br/>> This event is valid only when the **onDrop** event is listened to. |
| onDrop(callback: (event:[DragEvent](#DragEvent), extraParams?: string) => void) | No | Triggered when the dragged item is dropped on a valid drop target.<br/>-**event**: information about the drag event, including the coordinates of the item that is being dragged.<br/>-**extraParams**: additional information about the drag event. For details, see extraParam. |
| onDragStart(callback: (event: [DragEvent](#DragEvent), extraParams?: string) =>\|[Custom Builder](../../ui/ts-types.md)) | No | Triggered when the component bound to the event is dragged for the first time.<br/>-**event**: information about the drag event, including the coordinates of the item that is being dragged.<br/>-**extraParams**: additional information about the drag event. For details, see extraParam.<br/>Return value: object being dragged, which is used for prompts displayed when the object is dragged.<br/>> **NOTE**<br/>> - A drag event can be triggered by a 150 ms long press.<br/>> <br/>> - If the duration of a long-press gesture is set to less than or equal to 150 ms, the callback for the long-press gesture takes precedence. Otherwise, the callback for the drag event takes precedence. |
| onDragEnter(callback: (event: [DragEvent](#DragEvent), extraParams?: string) => void) | No | Triggered when the dragged item enters a valid drop target.<br/>-**event**: information about the drag event, including the coordinates of the item that is being dragged.<br/>-**extraParams**: additional information about the drag event. For details, see extraParam.<br/>> **NOTE**<br/>> This event is valid only when the **onDrop** event is listened to. |
| onDragMove(callback: (event: [DragEvent](#DragEvent), extraParams?: string) => void) | No | Triggered when the dragged item moves in a valid drop target.<br/>-**event**: information about the drag event, including the coordinates of the item that is being dragged.<br/>-**extraParams**: additional information about the drag event. For details, see extraParam.<br/>> **NOTE**<br/>> This event is valid only when the **onDrop** event is listened to. |
| onDragLeave(callback: (event: [DragEvent](#DragEvent), extraParams?: string) => void) | No | Triggered when the dragged item leaves a valid drop target.<br/>-**event**: information about the drag event, including the coordinates of the item that is being dragged.<br/>-**extraParams**: additional information about the drag event. For details, see extraParam.<br/>> **NOTE**<br/>> This event is valid only when the **onDrop** event is listened to. |
| onDrop(callback: (event:[DragEvent](#DragEvent), extraParams?: string) => void) | No | Triggered when the dragged item is dropped on a valid drop target.<br/>-**event**: information about the drag event, including the coordinates of the item that is being dragged.<br/>-**extraParams**: additional information about the drag event. For details, see extraParam. |
- extraParam
...
...
@@ -20,17 +20,17 @@
**extraParam** is a string converted from a JSON object. You can obtain the following attributes using the JSON object converted from **Json.parse**.
| Name | Type | Description |
| -------- | -------- | -------- |
| selectedIndex | number | Index of the dragged item in the parent container. The value of **selectedindex** starts from **0**.<br/>>  **NOTE：**<br/>> This attribute is valid only in the **ListItem** component. |
| insertIndex | number | Index of the element into which the dragged item is dropped in the **List** component. The value of **insertIndex** starts from **0**.<br/>>  **NOTE：**<br/>> This attribute is valid only in the drag event of the **List** component. |
| selectedIndex | number | Index of the dragged item in the parent container. The value of **selectedindex** starts from **0**.<br/>> **NOTE**<br/>> This attribute is valid only in the **ListItem**component. |
| insertIndex | number | Index of the element into which the dragged item is dropped in the **List** component. The value of **insertIndex** starts from **0**.<br/>> **NOTE**<br/>> This attribute is valid only in the drag event of the **List**component. |
### DragEvent
- APIs
| Name | Return Value Type | Description |
| Name | Return Value Type | Description |
| -------- | -------- | -------- |
| getX() | number | X-coordinate of the item that is being dragged, in vp. |
| getY() | number | Y-coordinate of the item that is being dragged, in vp. |
| getX() | number | X-coordinate of the item that is being dragged, in vp. |
| getY() | number | Y-coordinate of the item that is being dragged, in vp. |
| onKeyEvent(event: (event?: KeyEvent) => void) | Yes | Called when a key event occurs. For details about the event parameters, see [KeyEvent Object](#KeyEvent Object). |
### KeyEvent Object
...
...
@@ -22,42 +22,42 @@ None
- Attributes
| Name | Type | Description |
| -------- | -------- | -------- |
| type | KeyType | Type of a key. |
| onTouch(callback: (event?: TouchEvent) => void) | Yes | Invoked when a touch action is triggered. For details about the event parameters, see [TouchEvent](#touchevent). |
### TouchEvent
...
...
@@ -22,36 +22,36 @@ None
- Attributes
| Name | Type | Description |
| -------- | -------- | -------- |
| type | TouchType | Type of a touch event. |
| stopPropagation(): void | Pop-up of the stop event. |
- TouchObject
| Name | Type | Description |
| -------- | -------- | -------- |
| type | TouchType | Type of a touch event. |
| id | number | Unique identifier of a finger. |
| screenX | number | X coordinate of the touch point relative to the left edge of the screen. |
| screenY | number | Y coordinate of the touch point relative to the upper edge of the device screen. |
| x | number | X coordinate of the touch point relative to the left edge of the element to touch. |
| y | number | Y coordinate of the touch point relative to the upper edge of the element to touch. |
| type | TouchType | Type of a touch event. |
| id | number | Unique identifier of a finger. |
| screenX | number | X coordinate of the touch point relative to the left edge of the screen. |
| screenY | number | Y coordinate of the touch point relative to the upper edge of the device screen. |
| x | number | X coordinate of the touch point relative to the left edge of the element to touch. |
| y | number | Y coordinate of the touch point relative to the upper edge of the element to touch. |
- TouchType
| Name | Description |
| -------- | -------- |
| Down | Trigger a touch event when a finger is pressed. |
| Up | Trigger a touch event when a finger is lifted. |
| onHover(callback: (isHover: boolean) => void) | No | Triggered when the mouse cursor enters or leaves the component.<br/>**isHover**: whether the mouse cursor hovers over the component. The value **true** means that the mouse cursor enters the component, and the value **false** means that the mouse cursor leaves the component. |
| onMouse(callback: (event?: MouseEvent) => void) | Yes | Triggered when the component is clicked by a mouse button or the mouse cursor moves on the component. The **event** parameter indicates the timestamp, mouse button, action, coordinates of the clicked point on the entire screen, and coordinates of the clicked point relative to the component when the event is triggered. |
### MouseEvent
...
...
@@ -23,31 +23,31 @@ None
- Attributes
| Name | Type | Description |
| -------- | -------- | -------- |
| timestamp | number | Timestamp when the event is triggered. |
| screenX | number | X-coordinate of the clicked point relative to the upper left corner of the screen. |
| screenY | number | Y-coordinate of the clicked point relative to the upper left corner of the screen. |
| x | number | X-coordinate of the clicked point relative to the upper left corner of the component. |
| y | number | Y-coordinate of the clicked point relative to the upper left corner of the component. |
| button | MouseButton | Mouse button. |
| action | MouseAction | Event action. |
| timestamp | number | Timestamp when the event is triggered. |
| screenX | number | X-coordinate of the clicked point relative to the upper left corner of the screen. |
| screenY | number | Y-coordinate of the clicked point relative to the upper left corner of the screen. |
| x | number | X-coordinate of the clicked point relative to the upper left corner of the component. |
| y | number | Y-coordinate of the clicked point relative to the upper left corner of the component. |
| button | MouseButton | Mousebutton. |
| action | MouseAction | Eventaction. |
- MouseButton attributes
| Name | Type | Description |
| -------- | -------- | -------- |
| Left | number | Left mouse button. |
| Right | number | Right mouse button. |
| Middle | number | Middle mouse button. |
| Back | number | Back button on the left of the mouse. |
| Forward | number | Forward button on the left of the mouse. |
| None | number | No button. |
| Left | number | Left mouse button. |
| Right | number | Right mouse button. |
| Middle | number | Middle mouse button. |
| Back | number | Back button on the left of the mouse. |
| Forward | number | Forward button on the left of the mouse. |
| None | number | Nobutton. |
- MouseAction attributes
| Name | Type | Description |
| -------- | -------- | -------- |
| Press | number | The mouse button is pressed. |
| Release | number | The mouse button is released. |
| Move | number | The mouse cursor moves. |
| Press | number | The mouse button is pressed. |
| Release | number | The mouse button is released. |
