• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# Cursor Control
2
3You can control the display style of the mouse cursor.
4
5>  **NOTE**
6>
7>  This feature is supported since API version 11. Updates will be marked with a superscript to indicate their earliest API version.
8
9
10## cursorControl
11
12### setCursor
13
14setCursor(value: PointerStyle): void
15
16**Atomic service API**: This API can be used in atomic services since API version 12.
17
18**System capability**: SystemCapability.ArkUI.ArkUI.Full
19
20Sets the current mouse cursor style. This API can be used globally in method statements.
21
22**Parameters**
23
24| Name| Type| Mandatory| Description|
25| ----- | ------ | ---- | ---- |
26| value | [PointerStyle](../../apis-input-kit/js-apis-pointer.md#pointerstyle) | All consistent  | Cursor style.|
27
28
29### restoreDefault
30
31restoreDefault(): void
32
33**Atomic service API**: This API can be used in atomic services since API version 12.
34
35**System capability**: SystemCapability.ArkUI.ArkUI.Full
36
37Restores the mouse cursor to the default arrow style. This API can be used globally in method statements.
38
39
40## Example
41
42This example demonstrates how to change the mouse cursor style using **setCursor**.
43
44> **NOTE**
45>
46> Directly using **cursorControl** can lead to [ambiguous instance issues](../../../ui/arkts-global-interface.md). To avoid this, obtain a **UIContext** instance using [getUIContext](../js-apis-arkui-UIContext.md#uicontext), and then obtain the associated **cursorControl** object using [getCursorController](../js-apis-arkui-UIContext.md#getcursorcontroller12).
47
48```ts
49// xxx.ets
50import { pointer } from '@kit.InputKit';
51
52@Entry
53@Component
54struct CursorControlExample {
55  @State text: string = '';
56  controller: TextInputController = new TextInputController()
57
58  build() {
59    Column() {
60      Row().height(200).width(200).backgroundColor(Color.Green).position({x: 150 ,y:70})
61        .onHover((flag) => {
62          if (flag) {
63            // You are advised to use this.getUIContext().getCursorController().setCursor().
64            cursorControl.setCursor(pointer.PointerStyle.EAST)
65          } else {
66            // You are advised to use this.getUIContext().getCursorController().restoreDefault().
67            cursorControl.restoreDefault()
68          }
69        })
70      Row().height(200).width(200).backgroundColor(Color.Blue).position({x: 220 ,y:120})
71        .onHover((flag) => {
72          if (flag) {
73            // You are advised to use this.getUIContext().getCursorController().setCursor().
74            cursorControl.setCursor(pointer.PointerStyle.WEST)
75          } else {
76            // You are advised to use this.getUIContext().getCursorController().restoreDefault().
77            cursorControl.restoreDefault()
78          }
79        })
80    }.width('100%')
81  }
82}
83```
84Diagrams:
85
86When the mouse hovers over the blue area, it displays a west-pointing arrow cursor style.
87
88![cursor_blue](figures/cursor_blue.jpg)
89
90When the mouse hovers over the blue area, it displays an east-pointing arrow cursor style.
91
92![cursor_green](figures/cursor_green.jpg)
93