A game about forced loneliness, made by TACStudios
tacstudios.tngl.sh
1# Interaction Components
2
3This section covers components in the UI system that handles interaction, such as mouse or touch events and interaction using a keyboard or controller.
4
5The interaction components are not visible on their own, and must be combined with one or more [visual components](UIVisualComponents.md) in order to work correctly.
6
7## Common Functionality
8
9Most of the interaction components have some things in common. They are selectables, which means they have shared built-in functionality for visualising transitions between states (normal, highlighted, pressed, disabled), and for navigation to other selectables using keyboard or controller. This shared functionality is described on the [Selectable](script-Selectable.md) page.
10
11The interaction components have at least one UnityEvent that is invoked when user interacts with the component in specific way. The UI system catches and logs any exceptions that propagate out of code attached to UnityEvent.
12
13## Button
14
15A Button has an **OnClick** UnityEvent to define what it will do when clicked.
16
17
18
19See the [Button](script-Button.md) page for details on using the Button component.
20
21## Toggle
22
23A Toggle has an **Is On** checkbox that determines whether the Toggle is currently on or off. This value is flipped when the user clicks the Toggle, and a visual checkmark can be turned on or off accordingly. It also has an **OnValueChanged** UnityEvent to define what it will do when the value is changed.
24
25
26
27See the [Toggle](script-Toggle.md) page for details on using the Toggle component.
28
29
30## Toggle Group
31
32A Toggle Group can be used to group a set of [Toggles](script-Toggle.md) that are mutually exclusive. Toggles that belong to the same group are constrained so that only one of them can be selected at a time - selecting one of them automatically deselects all the others.
33
34
35
36See the [Toggle Group](script-ToggleGroup.md) page for details on using the Toggle Group component.
37
38
39## Slider
40
41A Slider has a decimal number **Value** that the user can drag between a minimum and maximum value. It can be either horizontal or vertical. It also has a **OnValueChanged** UnityEvent to define what it will do when the value is changed.
42
43
44
45See the [Slider](script-Slider.md) page for details on using the Slider component.
46
47
48## Scrollbar
49
50A Scrollbar has a decimal number **Value** between 0 and 1. When the user drags the scrollbar, the value changes accordingly.
51
52Scrollbars are often used together with a [Scroll Rect](script-ScrollRect.md) and a [Mask](script-Mask.md) to create a scroll view. The Scrollbar has a **Size** value between 0 and 1 that determines how big the handle is as a fraction of the entire scrollbar length. This is often controlled from another component to indicate how big a proportion of the content in a scroll view is visible. The Scroll Rect component can automatically do this.
53
54The Scrollbar can be either horizontal or vertical. It also has a **OnValueChanged** UnityEvent to define what it will do when the value is changed.
55
56
57
58See the [Scrollbar](script-Scrollbar.md) page for details on using the Scrollbar component.
59
60## Dropdown
61
62A Dropdown has a list of options to choose from. A text string and optionally an image can be specified for each option, and can be set either in the Inspector or dynamically from code. It has a **OnValueChanged** UnityEvent to define what it will do when the currently chosen option is changed.
63
64
65
66See the [Dropdown](script-Dropdown.md) page for details on using the Dropdown component.
67
68## Input Field
69
70An Input Field is used to make the text of a [Text Element](script-Text.md) editable by the user. It has a UnityEvent to define what it will do when the text content is changed, and an another to define what it will do when the user has finished editing it.
71
72
73
74See the [Input Field](script-InputField.md) page for details on using the Input Field component.
75
76## Scroll Rect (Scroll View)
77
78A Scroll Rect can be used when content that takes up a lot of space needs to be displayed in a small area. The Scroll Rect provides functionality to scroll over this content.
79
80Usually a Scroll Rect is combined with a [Mask](script-Mask.md) in order to create a scroll view, where only the scrollable content inside the Scroll Rect is visible. It can also additionally be combined with one or two [Scrollbars](script-Scrollbar.md) that can be dragged to scroll horizontally or vertically.
81
82
83
84See the [Scroll Rect](script-ScrollRect.md) page for details on using the Scroll Rect component.