Edit

Intro to UI components

Feathers UI includes many different types of UI components — from basics like buttons, sliders, and inputs, to scrolling containers, navigation managers, and more.

Basic UI components

• AssetLoader displays images and other assets.
• Button is a standard push button that may be clicked or tapped.
• Check is a check box that may be selected and deselected with a click/tap.
• Header displays a title with optional views on the left and right sides.
• HProgressBar and VProgressBar displays a numeric value with a simple linear fill.
• HSlider and VSlider display a numeric value with a thumb that may be dragged along a track.
• Label displays text in a single line or multiple lines.
• PageIndicator selects a page index with a basic row of symbols.
• Radio belongs to a group where only one may be selected.
• TextArea displays editable multiline text.
• TextInput displays editable text on a single line.
• ToggleButton may be clicked or tapped to change selection.
• ToggleSwitch may be clicked, tapped, or dragged to change selection.

Layout containers

Containers that support layout, with additional capabilities like scrolling and extra chrome like headers and footers.

• LayoutGroup is the most basic container that supports layout.
• ScrollContainer supports layout and scrolling.
• Panel adds a header and footer to a scrolling container.
• HDividedBox and VDividedBox displays views horizontally or vertically, with resizing handles between them.
• Form groups a set of input controls with labels.

Data containers

Containers that display data from collections, with layout and scrolling.

• ButtonBar displays a row of buttons.
• ComboBox pops up a list of data, with a text input for filtering.
• GridView displays a flat collection of data in multiple columns.
• GroupListView displays a hierarchical collection of data in a scrollable region.
• ListView displays a flat collection of data in a scrollable region.
• PopUpListView pops up a list of data when clicking or tapping a button.
• TabBar displays a row of tabs, where only one may be selected.
• TreeView displays hierarchical data in a list, and branches may be opened and closed.

The following components are designed for rendering each individual item from the container's collection.

• ItemRenderer displays a background skin, up to two lines of text, and an icon.
• LayoutGroupItemRenderer allows the creation of new types of item renderers with custom content.

Navigators

Containers that support navigation between different views.

• PageNavigator navigates among views using a PageIndicator.
• RouterNavigator navigates among views with web browser's history API integration.
• StackNavigator navigates among views with built-in history tracking.
• TabNavigator navigates among views using a TabBar.

Miscellaneous

Various other UI components that don't necessarily fit in one of the above categories.

• Alert displays a pop-up message box, including a title and set of buttons.
• Callout displays content as a pop-up with an arrow pointing at another component.
• Drawer slides in a view above other content.
• TextCallout displays text as a pop-up with an arrow pointing at another component.