Difference between revisions of "UI Editor/Components"
(Created page with "Components represent the various bits of UI that appear on windows (labels, buttons, menus, etc). They also have scripting interfaces for mod...") |
|||
| (6 intermediate revisions by the same user not shown) | |||
| Line 3: | Line 3: | ||
When selecting a Component or [[UI Editor/Window|Window]] in the [[UI Editor/Hierarchy|Hierarchy]] panel, its relevant properties are displayed in the [[UI Editor/Inspector|Inspector]] tab. | When selecting a Component or [[UI Editor/Window|Window]] in the [[UI Editor/Hierarchy|Hierarchy]] panel, its relevant properties are displayed in the [[UI Editor/Inspector|Inspector]] tab. | ||
| − | == Label == | + | == Creating Components == |
| + | Adding new components to the UI is a simple workflow: | ||
| + | # Find the window or component you would like as the parent for the new component in the Hierarchy panel | ||
| + | # Right click the desired parent and expand the "Add" sub-menu | ||
| + | # Select the type of component from the sub-menu list | ||
| + | # The new component will be automatically selected when created | ||
| + | |||
| + | == Basic Components == | ||
| + | === Label === | ||
A label represents a static piece of text on the screen. Labels can be used by themselves or as a sub-component of more complex components like buttons. | A label represents a static piece of text on the screen. Labels can be used by themselves or as a sub-component of more complex components like buttons. | ||
| − | == Imagebox == | + | === Imagebox === |
An image box provides a static image to display as part of a window. This is often used for icons, legend/key images, and non-interactive stylistic elements. | An image box provides a static image to display as part of a window. This is often used for icons, legend/key images, and non-interactive stylistic elements. | ||
| − | == Button == | + | == User Interaction Components == |
| + | === Button === | ||
Buttons are one of the most ubiquitous UI components, providing click-handling functionality, a label, and optionally an icon. | Buttons are one of the most ubiquitous UI components, providing click-handling functionality, a label, and optionally an icon. | ||
| − | == | + | === Slider === |
| − | A | + | Horizontal or vertical slider for adjusting a value between a minimum and a maximum. |
| + | |||
| + | === Toggle === | ||
| + | Checkbox or radio button type control. Has on/off state and can be part of a group to ensure only one of them is active at a time. | ||
| + | |||
| + | == Text Input Components == | ||
| + | === Textfield === | ||
| + | Single-line text entry field for getting user input (names, numeric values, etc.) | ||
| + | |||
| + | === Textarea === | ||
| + | Multi-line text entry field for getting longer user input (comments, feedback, etc.) | ||
| + | |||
| + | === Searchfield === | ||
| + | Single-line text entry field for user input that behaves more like a typical search field on a web page (clear button, etc) | ||
| + | |||
| + | == Layout Components == | ||
| + | === Panel === | ||
| + | A panel provides a simple way of grouping and laying out other components. | ||
| + | |||
| + | === Collapsible Panel === | ||
| + | A panel with a header that can be collapsed and reopened. Best used inside a larger panel with Vertical layout turned on | ||
| + | |||
| + | === Grid === | ||
| + | A panel which can arrange things in a consistent grid pattern (like Windows Explorer) | ||
| + | |||
| + | === Scrollbox === | ||
| + | A panel with scrollbars and an internal surface for arranging items that you can then scroll through. | ||
| + | |||
| + | == Dropdown Components == | ||
| + | === Combobox === | ||
| + | Dropdown allowing the user to select from a list of input values. | ||
| + | |||
| + | === Menu === | ||
| + | Dropdown allowing the user to select from multiple actions, with support for submenus. | ||
| + | |||
| + | == Other Components == | ||
| + | === 3D View === | ||
| + | Surface that creates a camera to display a MiniDOM. ''Note: Requires a server component to create and supply the MiniDOM to view'' | ||
| + | |||
| + | === Chat Surface === | ||
| + | A scrollbox that automatically displays your incoming chat messages on a set of channels | ||
| + | |||
| + | === Color Picker === | ||
| + | ''(Deprecated)'' Input component for selecting colors using RGB sliders. | ||
| + | |||
| + | === File Picker === | ||
| + | Text field with a browse option to select a local file (and | ||
| + | |||
| + | === Friend Surface === | ||
| + | A scrollbox that automatically displays your friends list or the local list (no longer as important because you can construct this functionality yourself from the Social global) | ||
| + | |||
| + | === Large Color Picker === | ||
| + | A larger, more comprehensive color picker with HSV options. | ||
| + | |||
| + | === Tab Control === | ||
| + | Split component that offers tab buttons to select which of its child panels to display. | ||
| + | |||
| + | === Tree === | ||
| + | Trees are a special type of Scrollbox with features for displaying a hierarchy of collapsible nodes. | ||
| + | |||
| + | === Webview === | ||
| + | Provides a surface for displaying a webpage, useful for TOS or other online content. | ||
| + | |||
| + | |||
| + | |||
| + | [[Category:UI Editor]] | ||
Latest revision as of 17:05, 28 November 2017
Components represent the various bits of UI that appear on windows (labels, buttons, menus, etc). They also have scripting interfaces for modifying them from JavaScript.
When selecting a Component or Window in the Hierarchy panel, its relevant properties are displayed in the Inspector tab.
Contents
Creating Components
Adding new components to the UI is a simple workflow:
- Find the window or component you would like as the parent for the new component in the Hierarchy panel
- Right click the desired parent and expand the "Add" sub-menu
- Select the type of component from the sub-menu list
- The new component will be automatically selected when created
Basic Components
Label
A label represents a static piece of text on the screen. Labels can be used by themselves or as a sub-component of more complex components like buttons.
Imagebox
An image box provides a static image to display as part of a window. This is often used for icons, legend/key images, and non-interactive stylistic elements.
User Interaction Components
Button
Buttons are one of the most ubiquitous UI components, providing click-handling functionality, a label, and optionally an icon.
Slider
Horizontal or vertical slider for adjusting a value between a minimum and a maximum.
Toggle
Checkbox or radio button type control. Has on/off state and can be part of a group to ensure only one of them is active at a time.
Text Input Components
Textfield
Single-line text entry field for getting user input (names, numeric values, etc.)
Textarea
Multi-line text entry field for getting longer user input (comments, feedback, etc.)
Searchfield
Single-line text entry field for user input that behaves more like a typical search field on a web page (clear button, etc)
Layout Components
Panel
A panel provides a simple way of grouping and laying out other components.
Collapsible Panel
A panel with a header that can be collapsed and reopened. Best used inside a larger panel with Vertical layout turned on
Grid
A panel which can arrange things in a consistent grid pattern (like Windows Explorer)
Scrollbox
A panel with scrollbars and an internal surface for arranging items that you can then scroll through.
Dropdown Components
Combobox
Dropdown allowing the user to select from a list of input values.
Menu
Dropdown allowing the user to select from multiple actions, with support for submenus.
Other Components
3D View
Surface that creates a camera to display a MiniDOM. Note: Requires a server component to create and supply the MiniDOM to view
Chat Surface
A scrollbox that automatically displays your incoming chat messages on a set of channels
Color Picker
(Deprecated) Input component for selecting colors using RGB sliders.
File Picker
Text field with a browse option to select a local file (and
Friend Surface
A scrollbox that automatically displays your friends list or the local list (no longer as important because you can construct this functionality yourself from the Social global)
Large Color Picker
A larger, more comprehensive color picker with HSV options.
Tab Control
Split component that offers tab buttons to select which of its child panels to display.
Tree
Trees are a special type of Scrollbox with features for displaying a hierarchy of collapsible nodes.
Webview
Provides a surface for displaying a webpage, useful for TOS or other online content.
