| menus | Array<NavigationMenuItem>\|[Custom Builder](../../ui/ts-types.md) | - | Menu in the upper right corner of the page. |
| menus | Array<NavigationMenuItem>\|[CustomBuilder](../../ui/ts-types.md)<sup>8+</sup> | - | 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. |
| toolBar | {<br/>items:[<br/>Object<br/>] }<br/>\| [CustomBuilder](../../ui/ts-types.md)<sup>8+</sup> | - | 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. |
...
...
@@ -67,7 +67,7 @@ Creates a component that can automatically display the navigation bar, title, an
| Name | Description |
| -------- | -------- |
| onTitleModeChanged(callback: (titleMode: NavigationTitleMode) =>void) | Triggered when **titleMode** is set to **NavigationTitleMode.Free** and the title bar mode changes as content scrolls. |
| onTitleModeChange(callback: (titleMode: NavigationTitleMode) => void) | Triggered when **titleMode** is set to **NavigationTitleMode.Free** and the title bar mode changes as content scrolls. |
| selected | number | - | Index of the initial selected option in the drop-down list box. The index of the first option is **0**.|
| value | string | - | Text of the drop-down button.|
| font | [Font](../../ui/ts-types.md)| - | Text font of the drop-down button.|
| fontColor | [ResourceColor](../../ui/ts-types.md#ResourceColor) | - | Text color of the drop-down button.|
| selectedOptionBgColor | [ResourceColor](../../ui/ts-types.md#ResourceColor) | - | Background color of the selected option in the drop-down list box.|
| selectedOptionFont | [Font](../../ui/ts-types.md)| - | Text font of the selected option in the drop-down list box.|
| selectedOptionFontColor | [ResourceColor](../../ui/ts-types.md#ResourceColor) | - | Text color of the selected option in the drop-down list box.|
| optionBgColor | [ResourceColor](../../ui/ts-types.md#ResourceColor) | - | Background color of an option in the drop-down list box.|
| optionFont | [Font](../../ui/ts-types.md)| - | Text font of an option in the drop-down list box.|
| optionFontColor | [ResourceColor](../../ui/ts-types.md#ResourceColor) | - | Text color of an option in the drop-down list box.|
| font | [Font](../../ui/ts-types.md) | - | Text font of the drop-down button.|
| fontColor | [ResourceColor](../../ui/ts-types.md) | - | Text color of the drop-down button.|
| selectedOptionBgColor | [ResourceColor](../../ui/ts-types.md) | - | Background color of the selected option in the drop-down list box.|
| selectedOptionFont | [Font](../../ui/ts-types.md) | - | Text font of the selected option in the drop-down list box.|
| selectedOptionFontColor | [ResourceColor](../../ui/ts-types.md) | - | Text color of the selected option in the drop-down list box.|
| optionBgColor | [ResourceColor](../../ui/ts-types.md) | - | Background color of an option in the drop-down list box.|
| optionFont | [Font](../../ui/ts-types.md) | - | Text font of an option in the drop-down list box.|
| optionFontColor | [ResourceColor](../../ui/ts-types.md) | - | Text color of an option in the drop-down list box.|
| onSelected(callback: (index: number, value?:string) => void)| Invoked when an option in the drop-down list box is selected. **index** indicates the index of the selected option. **value** indicates the value of the selected option.|
| onSelect(callback: (index: number, value?:string) => void) | Invoked when an option in the drop-down list box is selected. **index** indicates the index of the selected option. **value** indicates the value of the selected option.|
| 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. |
### TextInputController<sup>8+</sup>
...
...
@@ -88,7 +78,7 @@ controller: TextInputController = new TextInputController()
```
### caretPosition
### controller.createPosition
caretPosition(value: number): void
...
...
@@ -100,6 +90,19 @@ Sets the cursor in a specified position.
| value | number | Yes | - | Position of the input cursor.<br/>**value**: indicates the length from the start of the string to the position where the input cursor is located. |
## Events
| Name | Description |
| -------- | -------- |
| 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)<sup>(deprecated) </sup> | Triggered when the input status changes. |
| onEditChange(callback: (isEditing: boolean) => void) <sup>8+</sup> | 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. |
| 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. |
- PanDirection enums
| Name | Description |
| Name | Description |
| -------- | -------- |
| All | All directions. |
| Horizontal | Horizontal slide. |
| Vertical | Vertical slide. |
| Left | Slide to the left. |
| Right | Slide to the right. |
| Up | Slide up. |
| Down | Slide down. |
| None | Slide disabled. |
| All | All directions. |
| Horizontal | Horizontal slide. |
| Vertical | Vertical slide. |
| Left | Slide to the left. |
| Right | Slide to the right. |
| Up | Slide up. |
| Down | Slide down. |
| None | Slide disabled. |
### PanGestureOption
### PanGestureOptions
The attributes of the slide gesture recognizer can be dynamically modified using the **PanGestureOption** AP. This avoids modifying attributes through status variables, which will cause the UI to be refreshed.
The attributes of the slide gesture recognizer can be dynamically modified using the **PanGestureOptions** AP. This avoids modifying attributes through status variables, which will cause the UI to be refreshed.
PanGestureOption(options?: { fingers?: number, direction?: PanDirection, distance?: number })
PanGestureOptions(options?: { fingers?: number, direction?: PanDirection, distance?: number })
- Parameters
For details, see **PanGesture**.
- APIs
| Name | Description |
| Name | Description |
| -------- | -------- |
| setDirection(value: PanDirection) | Sets the direction. |
| setDistance(value: number) | Sets the distance. |
| setFingers(value: number) | Sets the number of fingers. |
| setDirection(value: PanDirection) | Sets the direction. |
| setDistance(value: number) | Sets the distance. |
| setFingers(value: number) | Sets the number of fingers. |
## Events
| Name | Description |
| Name | Description |
| -------- | -------- |
| onActionStart(callback: (event?: PanGestureEvent) => void) | Callback for the pan gestures reorganization event. |
| onActionUpdate(callback: (event?: PanGestureEvent) => void) | Callback invoked when a pan gesture is recognized. |
| onActionEnd(callback: (event?: PanGestureEvent) => void) | Callback invoked when the finger used for a pan gesture is lift. |
| onActionCancel(callback: () => void) | Callback invoked when a tap cancellation event is received after a pan gesture is recognized. |
| onActionStart(callback: (event?: PanGestureEvent) => void) | Callback for the pan gestures reorganization event. |
| onActionUpdate(callback: (event?: PanGestureEvent) => void) | Callback invoked when a pan gesture is recognized. |
| onActionEnd(callback: (event?: PanGestureEvent) => void) | Callback invoked when the finger used for a pan gesture is lift. |
| onActionCancel(callback: () => void) | Callback invoked when a tap cancellation event is received after a pan gesture is recognized. |
- PanGestureEvent<sup>8+</sup> attributes
| Name | Type | Description |
| Name | Type | Description |
| -------- | -------- | -------- |
| offsetX | number | Offset of the gesture event, in vp. |
| offsetY | number | Offset of the gesture event, in vp. |
| offsetX | number | Offset of the gesture event, in vp. |
| offsetY | number | Offset of the gesture event, in vp. |
| arrayValue | Array<string> | Yes | - | Array of strings to be displayed in the alphabetic index bar. |
| selected | number | Yes | - | ID of a selected item. |
| arrayValue | Array<string> | Yes | - | Array of strings to be displayed in the alphabetic index bar. |
| selected | number | Yes | - | ID of a selected item. |
## Attributes
| Name | Type | Description |
| Name | Type | Description |
| -------- | -------- | -------- |
| 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. |
| 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 |
| 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. |
## Events
| Name | Description |
| Name | Description |
| -------- | -------- |
| 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. |
| onSelected(index: number) => void<sup>(deprecated) </sup> | Invoked when an item in the alphabetic indexer bar is selected. |
| onSelect(index: number) => void<sup>8+</sup> | 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. |
| onPopupSelect(callback: (index: number) => void)<sup>8+</sup> | Invoked when an item in the index pop-up window is selected. |
## Example
```
@Entry
@Component
...
...
@@ -80,7 +81,7 @@ struct AlphabetIndexerSample {
.popupFont({ size: 30, weight: FontWeight.Bolder }) // Font style of the pop-up text
.itemSize(28) // Size of each item (square)
.alignStyle(IndexerAlign.Left) // Left aligned
.onSelected((index: number) => {
.onSelect((index: number) => {
console.info(this.value[index] + 'Selected') // Event indicating that an item is selected
> This animation is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
| Name | Description |
| Name | 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. |
| animateTo(value: [AnimationOptions](#animationoptions), 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
## AnimationOptions
- Attributes
| Name | Type | Default Value | Description |
| Name | Type | Default Value | 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. |
| 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. |
- APIs
| Name | Description |
| Name | Description |
| -------- | -------- |
| onFinish() => void | Callback invoked when the animation playback is complete. |
| onFinish() => void | Callback invoked when the animation playback is complete. |
| src | string | No | - | Path of the video source. |
...
...
@@ -27,13 +27,13 @@ Video(value: VideoOption)
- PlaybackSpeed<sup>8+</sup>
| Name | Description |
| Name | Description |
| -------- | -------- |
| Speed_Forward_0_75_X | 0.75x playback speed. |
| Speed_Forward_1_00_X | 1x playback speed. |
| Speed_Forward_1_25_X | 1.25x playback speed. |
| Speed_Forward_1_75_X | 1.75x playback speed. |
| Speed_Forward_2_00_X | 2x playback speed. |
| Speed_Forward_0_75_X | 0.75x playback speed. |
| Speed_Forward_1_00_X | 1x playback speed. |
| Speed_Forward_1_25_X | 1.25x playback speed. |
| Speed_Forward_1_75_X | 1.75x playback speed. |
| Speed_Forward_2_00_X | 2x playback speed. |
## Attributes
...
...
@@ -49,16 +49,16 @@ Video(value: VideoOption)
## Events
| Name | Description |
| Name | Description |
| -------- | -------- |
| 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. |
| 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. |
| 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. |
| 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. |
| bindPopup | show: boolean,<br/>popup: PopupOptions \| CustomPopupOptions | - | 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 |
- PopupOptions attributes
| Name | Type | Mandatory | Default Value | 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. |
| 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>
- CustomPopupOptions<sup>8+</sup>
| Name | Type | Mandatory | Default Value | Description |
| builder | () => any | Yes | - | Builder of the tooltip content. |
...
...
@@ -39,16 +39,16 @@ None
| 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 |
| 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. |
| Bottom | The tooltip is at the bottom of the component. |
| TopLeft | The tooltip is in the upper left corner of the component. |
| TopRight | The tooltip is in the upper right corner of the component. |
| BottomLeft | The tooltip is in the lower left corner of the component. |
| BottomRight | The tooltip is in the lower right corner of the component. |
| 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. |
| Bottom | The tooltip is at the bottom of the component. |
| TopLeft | The tooltip is in the upper left corner of the component. |
| TopRight | The tooltip is in the upper right corner of the component. |
| BottomLeft | The tooltip is in the lower left corner of the component. |
| BottomRight | The tooltip is in the lower right corner of the component. |
| 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 |
| 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. |
| target<sup>8+</sup> | EventTarget | Target element that is clicked. |
| timestamp | number | Timestamp of the event. |
| 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. |
| target<sup>8+</sup> | EventTarget | Target element that is clicked. |
| timestamp | number | Timestamp of the event. |
- EventTarget<sup>8+</sup> attributes
| Name | Type | Description |
| Name | Type | Description |
| -------- | -------- | -------- |
| area | Area | Area information of the target element.|
| area | Area | Area information of the target element.|
- Area<sup>8+</sup> attributes
| Name | Type | Description |
| Name | Type | Description |
| -------- | -------- | -------- |
| width | number | Width of the target element, in vp. |
| height | number | Height of the target element, in vp. |
| pos | Position | Position of the upper left corner of the target element relative to that of the parent element. |
| globalPos | Position | Position of the upper left corner of the target element relative to that of the page. |
| width | number | Width of the target element, in vp. |
| height | number | Height of the target element, in vp. |
| position | Position | Position of the upper left corner of the target element relative to that of the parent element. |
| globalPosition | Position | Position of the upper left corner of the target element relative to that of the page. |
