View Cursor
For enhancing user experience by providing visual feedback about interactive elements on a webpage we can use the "cursor" property. It allows us to change the appearance of the mouse pointer when hovering over specific views of the application's page, such as buttons, links, etc. This helps users intuitively understand the functionality and interactivity of these elements, making the interface more intuitive and accessible. Additionally, using appropriate cursor styles can indicate system states like loading or disabled actions, guiding users on how to interact with the application effectively.
Internally "cursor" property holds the values of the integer type and accepts the following values:
| Value | Name | Description |
|---|---|---|
0 |
"auto" | Auto cursor |
1 |
"default" | Default cursor |
2 |
"none" | None cursor |
3 |
"context-menu" | Context menu cursor |
4 |
"help" | Help cursor |
5 |
"pointer" | Pointer cursor |
6 |
"progress" | Progress cursor |
7 |
"wait" | Wait cursor |
8 |
"cell" | Cell cursor |
9 |
"crosshair" | Crosshair cursor |
10 |
"text" | Text cursor |
11 |
"vertical-text" | Vertical text cursor |
12 |
"alias" | Alias cursor |
13 |
"copy" | Copy cursor |
14 |
"move" | Move cursor |
15 |
"no-drop" | No drop cursor |
16 |
"not-allowed" | Not allowed cursor |
17 |
"e-resize" | Resize cursor |
18 |
"n-resize" | Resize cursor |
19 |
"ne-resize" | Resize cursor |
20 |
"nw-resize" | Resize cursor |
21 |
"s-resize" | Resize cursor |
22 |
"se-resize" | Resize cursor |
23 |
"sw-resize" | Resize cursor |
24 |
"w-resize" | Resize cursor |
25 |
"ew-resize" | Resize cursor |
26 |
"ns-resize" | Resize cursor |
27 |
"nesw-resize" | Resize cursor |
28 |
"nwse-resize" | Resize cursor |
29 |
"col-resize" | Col resize cursor |
30 |
"row-resize" | Row resize cursor |
31 |
"all-scroll" | All scroll cursor |
32 |
"zoom-in" | Zoom in cursor |
33 |
"zoom-out" | Zoom out cursor |
34 |
"grab" | Grab cursor |
35 |
"grabbing" | Grabbing cursor |
When setting cursor value in resource description file we use the name of the value.
Below is an example which demostrate all possible types of the cursors supported by the library. When hovering mouse over the text views cursor will be changed to specified type. The results may be different depending on your operating system and browser.
RUI
ListLayout {
width = 100%,
height = 100%,
padding = 1em,
gap = 0.3em,
orientation = up-down,
content = [
TextView{width = 100%, cursor = "auto", text = "Auto cursor"},
TextView{width = 100%, cursor = "default", text = "Default cursor"},
TextView{width = 100%, cursor = "none", text = "None cursor"},
TextView{width = 100%, cursor = "context-menu", text = "Context menu cursor"},
TextView{width = 100%, cursor = "help", text = "Help cursor"},
TextView{width = 100%, cursor = "pointer", text = "Pointer cursor"},
TextView{width = 100%, cursor = "progress", text = "Progress cursor"},
TextView{width = 100%, cursor = "wait", text = "Wait cursor"},
TextView{width = 100%, cursor = "cell", text = "Cell cursor"},
TextView{width = 100%, cursor = "crosshair", text = "Crosshair cursor"},
TextView{width = 100%, cursor = "text", text = "Text cursor"},
TextView{width = 100%, cursor = "vertical-text", text = "Vertical text cursor"},
TextView{width = 100%, cursor = "alias", text = "Alias cursor"},
TextView{width = 100%, cursor = "copy", text = "Copy cursor"},
TextView{width = 100%, cursor = "move", text = "Move cursor"},
TextView{width = 100%, cursor = "no-drop", text = "No drop cursor"},
TextView{width = 100%, cursor = "not-allowed", text = "Not allowed cursor"},
TextView{width = 100%, cursor = "e-resize", text = "Resize cursor"},
TextView{width = 100%, cursor = "n-resize", text = "Resize cursor"},
TextView{width = 100%, cursor = "ne-resize", text = "Resize cursor"},
TextView{width = 100%, cursor = "nw-resize", text = "Resize cursor"},
TextView{width = 100%, cursor = "s-resize", text = "Resize cursor"},
TextView{width = 100%, cursor = "se-resize", text = "Resize cursor"},
TextView{width = 100%, cursor = "sw-resize", text = "Resize cursor"},
TextView{width = 100%, cursor = "w-resize", text = "Resize cursor"},
TextView{width = 100%, cursor = "ew-resize", text = "Resize cursor"},
TextView{width = 100%, cursor = "ns-resize", text = "Resize cursor"},
TextView{width = 100%, cursor = "nesw-resize", text = "Resize cursor"},
TextView{width = 100%, cursor = "nwse-resize", text = "Resize cursor"},
TextView{width = 100%, cursor = "col-resize", text = "Col resize cursor"},
TextView{width = 100%, cursor = "row-resize", text = "Row resize cursor"},
TextView{width = 100%, cursor = "all-scroll", text = "All scroll cursor"},
TextView{width = 100%, cursor = "zoom-in", text = "Zoom in cursor"},
TextView{width = 100%, cursor = "zoom-out", text = "Zoom out cursor"},
TextView{width = 100%, cursor = "grab", text = "Grab cursor"},
TextView{width = 100%, cursor = "grabbing", text = "Grabbing cursor"},
]
}
Go
view := rui.NewListLayout(session, rui.Params{
rui.Width: rui.Percent(100),
rui.Height: rui.Percent(100),
rui.Padding: rui.Em(1),
rui.Gap: rui.Em(0.3),
rui.Orientation: rui.TopDownOrientation,
rui.Content: []rui.View{
rui.NewTextView(session, rui.Params{rui.Width: rui.Percent(100), rui.Cursor: 0, rui.Text: "Auto cursor"}),
rui.NewTextView(session, rui.Params{rui.Width: rui.Percent(100), rui.Cursor: 1, rui.Text: "Default cursor"}),
rui.NewTextView(session, rui.Params{rui.Width: rui.Percent(100), rui.Cursor: 2, rui.Text: "None cursor"}),
rui.NewTextView(session, rui.Params{rui.Width: rui.Percent(100), rui.Cursor: 3, rui.Text: "Context menu cursor"}),
rui.NewTextView(session, rui.Params{rui.Width: rui.Percent(100), rui.Cursor: 4, rui.Text: "Help cursor"}),
rui.NewTextView(session, rui.Params{rui.Width: rui.Percent(100), rui.Cursor: 5, rui.Text: "Pointer cursor"}),
rui.NewTextView(session, rui.Params{rui.Width: rui.Percent(100), rui.Cursor: 6, rui.Text: "Progress cursor"}),
rui.NewTextView(session, rui.Params{rui.Width: rui.Percent(100), rui.Cursor: 7, rui.Text: "Wait cursor"}),
rui.NewTextView(session, rui.Params{rui.Width: rui.Percent(100), rui.Cursor: 8, rui.Text: "Cell cursor"}),
rui.NewTextView(session, rui.Params{rui.Width: rui.Percent(100), rui.Cursor: 9, rui.Text: "Crosshair cursor"}),
rui.NewTextView(session, rui.Params{rui.Width: rui.Percent(100), rui.Cursor: 10, rui.Text: "Text cursor"}),
rui.NewTextView(session, rui.Params{rui.Width: rui.Percent(100), rui.Cursor: 11, rui.Text: "Vertical text cursor"}),
rui.NewTextView(session, rui.Params{rui.Width: rui.Percent(100), rui.Cursor: 12, rui.Text: "Alias cursor"}),
rui.NewTextView(session, rui.Params{rui.Width: rui.Percent(100), rui.Cursor: 13, rui.Text: "Copy cursor"}),
rui.NewTextView(session, rui.Params{rui.Width: rui.Percent(100), rui.Cursor: 14, rui.Text: "Move cursor"}),
rui.NewTextView(session, rui.Params{rui.Width: rui.Percent(100), rui.Cursor: 15, rui.Text: "No drop cursor"}),
rui.NewTextView(session, rui.Params{rui.Width: rui.Percent(100), rui.Cursor: 16, rui.Text: "Not allowed cursor"}),
rui.NewTextView(session, rui.Params{rui.Width: rui.Percent(100), rui.Cursor: 17, rui.Text: "Resize cursor"}),
rui.NewTextView(session, rui.Params{rui.Width: rui.Percent(100), rui.Cursor: 18, rui.Text: "Resize cursor"}),
rui.NewTextView(session, rui.Params{rui.Width: rui.Percent(100), rui.Cursor: 19, rui.Text: "Resize cursor"}),
rui.NewTextView(session, rui.Params{rui.Width: rui.Percent(100), rui.Cursor: 20, rui.Text: "Resize cursor"}),
rui.NewTextView(session, rui.Params{rui.Width: rui.Percent(100), rui.Cursor: 21, rui.Text: "Resize cursor"}),
rui.NewTextView(session, rui.Params{rui.Width: rui.Percent(100), rui.Cursor: 22, rui.Text: "Resize cursor"}),
rui.NewTextView(session, rui.Params{rui.Width: rui.Percent(100), rui.Cursor: 23, rui.Text: "Resize cursor"}),
rui.NewTextView(session, rui.Params{rui.Width: rui.Percent(100), rui.Cursor: 24, rui.Text: "Resize cursor"}),
rui.NewTextView(session, rui.Params{rui.Width: rui.Percent(100), rui.Cursor: 25, rui.Text: "Resize cursor"}),
rui.NewTextView(session, rui.Params{rui.Width: rui.Percent(100), rui.Cursor: 26, rui.Text: "Resize cursor"}),
rui.NewTextView(session, rui.Params{rui.Width: rui.Percent(100), rui.Cursor: 27, rui.Text: "Resize cursor"}),
rui.NewTextView(session, rui.Params{rui.Width: rui.Percent(100), rui.Cursor: 28, rui.Text: "Resize cursor"}),
rui.NewTextView(session, rui.Params{rui.Width: rui.Percent(100), rui.Cursor: 29, rui.Text: "Col resize cursor"}),
rui.NewTextView(session, rui.Params{rui.Width: rui.Percent(100), rui.Cursor: 30, rui.Text: "Row resize cursor"}),
rui.NewTextView(session, rui.Params{rui.Width: rui.Percent(100), rui.Cursor: 31, rui.Text: "All scroll cursor"}),
rui.NewTextView(session, rui.Params{rui.Width: rui.Percent(100), rui.Cursor: 32, rui.Text: "Zoom in cursor"}),
rui.NewTextView(session, rui.Params{rui.Width: rui.Percent(100), rui.Cursor: 33, rui.Text: "Zoom out cursor"}),
rui.NewTextView(session, rui.Params{rui.Width: rui.Percent(100), rui.Cursor: 34, rui.Text: "Grab cursor"}),
rui.NewTextView(session, rui.Params{rui.Width: rui.Percent(100), rui.Cursor: 35, rui.Text: "Grabbing cursor"}),
},
})
