Shared element transition can be used for transition between pages, for example, transition from an image on the current page to the next page.
> **NOTE**
>
> This animationis supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
Transition of shared elements can be used for transition between pages, for example, transition from an image on the current page to the next page.
## Type
## Attributes
| Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- |
| 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 | Default Value | Mandatory | Description |
A click event is triggered when a component is clicked.
> **NOTE**<br>
> **NOTE**
>
> This event is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
## Required Permissions
None
...
...
@@ -12,12 +13,12 @@ None
## Events
| Name | Bubble Supported | Description |
| Name | Bubbling Supported | Description |
| -------- | -------- | -------- |
| onClick(callback: (event?: ClickEvent) => void) | No | Called when a click event occurs. For details about the event parameters, see [ClickEvent](#clickevent). |
### ClickEvent
## ClickEvent
| Name | Type | Description |
| -------- | -------- | -------- |
...
...
@@ -25,30 +26,30 @@ None
| 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. |
| target<sup>8+</sup> | [EventTarget](#eventtarget8) | Target element that is clicked. |
| timestamp | number | Timestamp of the event. |
- EventTarget<sup>8+</sup> attributes
## EventTarget<sup>8+</sup>
| Name | Type | Description |
| -------- | -------- | -------- |
| area | Area | Area information of the target element.|
| Name | Type | Description |
| -------- | -------- | -------- |
| area | [Area](#area8) | Area information of the target element.|
- Area<sup>8+</sup> attributes
## Area<sup>8+</sup>
| Name | Type | Description |
| -------- | -------- | -------- |
| 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. |
| Name | Type | Description |
| -------- | -------- | -------- |
| width | number | Width of the target element, in vp. |
| height | number | Height of the target element, in vp. |
| position | [Position](#position8) | Position of the upper left corner of the target element relative to that of the parent element. |
| globalPosition | [Position](#position8) | Position of the upper left corner of the target element relative to that of the page. |
A drag event is triggered when a component is dragged.
> **NOTE**
>
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
## Events
| Name | Bubble Supported | Description |
| Name | Bubbling Supported | Description |
| -------- | -------- | -------- |
| onDragStart(callback: (event: 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/>> - 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, 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, 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, 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, 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, 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/>A drag event can be triggered by a 150 ms long press.<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, 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/>This event is valid only when the **onDrop** event is listened to. |
| onDragMove(callback: (event: 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/>This event is valid only when the **onDrop** event is listened to. |
| onDragLeave(callback: (event: 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/>This event is valid only when the **onDrop** event is listened to. |
| onDrop(callback: (event: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
Returns additional information required for dragging an item.
**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/>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/>This attribute is valid only in the drag event of the **\<List>** component. |
> This method is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
> **NOTE**
>
> This event is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
## Required Permissions
...
...
@@ -12,58 +14,61 @@ None
## Events
| Name | Bubble Supported | Description |
| Name | Bubbling Supported | Description |
| -------- | -------- | -------- |
| onKeyEvent(event: (event?: KeyEvent) => void) | Yes | Called when a key event occurs. For details about the event parameters, see [KeyEvent Object](#KeyEvent Object). |
| onKeyEvent(event: (event?: KeyEvent) => void) | Yes | Called when a key event occurs. For details about **event**, see [KeyEvent](#keyevent). |
### KeyEvent Object
## KeyEvent
- Attributes
| Name | Type | Description |
| Name | Type | Description |
| -------- | -------- | -------- |
| type | KeyType | Type of a key. |
| keyCode | number | Key code. |
| keyText | string | Key value. |
| keySource | KeySource | Type of the input device that triggers the key event. |
| deviceId | number | ID of the input device that triggers the key event. |
| metaKey | number | State of the metakey when the key is pressed. The value **1** means the pressed state, and **0** means the unpressed state. |
| timestamp | number | Timestamp when the key is pressed. |
| type | [KeyType](#keytype-enums) | Type of a key. |
| keyCode | number | Key code. |
| keyText | string | Key value. |
| keySource | [KeySource](#keysource-enums) | Type of the input device that triggers the key event. |
| deviceId | number | ID of the input device that triggers the key event. |
| metaKey | number | State of the metakey when the key is pressed. The value **1** means the pressed state, and **0** means the unpressed state. |
| timestamp | number | Timestamp when the key is pressed. |
- APIs
| Name | Description |
| Name | Description |
| -------- | -------- |
| stopPropagation(): void | Stops the event from bubbling upwards or downwards. |
| stopPropagation(): void | Stops the event from bubbling upwards or downwards. |
- KeyType enums
| Name | Description |
| -------- | -------- |
| Down | The key is pressed. |
| Up | The key is released. |
## KeyType Enums
| Name | Description |
| -------- | -------- |
| Down | The key is pressed. |
| Up | The key is released. |
- KeySource enums
| Name | Description |
| -------- | -------- |
| Unknown | Unknown input device. |
| Keyboard | The input device is a keyboard. |
- Common KeyCode description
| Value | Behavior | Physical Button |
| -------- | -------- | -------- |
| 19 | Upward | Up button. |
| 20 | Downward | Down button. |
| 21 | Leftward | Left button. |
| 22 | Rightward | Right button. |
| 23 | OK | **OK** key on a remote control. |
| 66 | OK | **Enter** key on a keyboard. |
| 160 | OK | **Enter** button on the numeric keypad. |
## KeySource Enums
| Name | Description |
| -------- | -------- |
| Unknown | Unknown input device. |
| [KeyCode](#common-keycode-enums) | The input device is a keyboard. |
## Common KeyCode Enums
| Value | Behavior | Physical Button |
| -------- | -------- | -------- |
| 19 | Upward | Up button. |
| 20 | Downward | Down button. |
| 21 | Leftward | Left button. |
| 22 | Rightward | Right button. |
| 23 | OK | **OK** key on a remote control. |
| 66 | OK | **Enter** key on a keyboard. |
| 160 | OK | **Enter** button on the numeric keypad. |
A touch event is triggered when a finger is pressed, slides, or is lifted from a component.
> **NOTE**<br>
> **NOTE**
>
> This event is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
...
...
@@ -12,51 +14,51 @@ None
## Events
| Name | Pop-up | Description |
| -------- | -------- | -------- |
| onTouch(callback: (event?: TouchEvent) => void) | Yes | Invoked when a touch action is triggered. For details about the event parameters, see [TouchEvent](#touchevent). |
| onTouch(callback: (event?: TouchEvent) => void) | Yes | Invoked when a touch action is triggered. For details about **event**, see [TouchEvent](#touchevent).|
### TouchEvent
## TouchEvent
- Attributes
| Name | Type | Description |
| -------- | -------- | -------- |
| type | TouchType | Type of a touch event. |
| touches | Array<TouchObject> | All finger information. |
| changedTouches | Array<TouchObject> | Finger information changed. |
| timestamp | number | Timestamp of the event. |
| target<sup>8+</sup> | [EventTarget](ts-universal-events-click.md) | Target of the event. |
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
...
...
@@ -12,48 +14,47 @@ None
## Events
| Name | Bubble Supported | Description |
| Name | Bubbling Supported | Description |
| -------- | -------- | -------- |
| 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
- 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. |
- 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. |
- 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. |
| 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
| 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. |
