Feathers UI
  • Docs
  • API
  • Showcase
  • Blog
  • Community

›UI Components

Introduction

  • Getting Started
  • Installation
  • Create a new project in…

    • Command line terminal
    • HaxeDevelop
    • Moonshine IDE
    • Visual Studio Code

    Build a project targeting…

    • Android
    • iOS
    • Linux
    • macOS
    • Windows
    • Web
  • Introduction to OpenFL

UI Components

  • Intro to UI components
  • Alert
  • Application
  • AssetLoader
  • Button
  • ButtonBar
  • Callout
  • Check
  • ComboBox
  • HDividedBox / VDividedBox
  • Drawer
  • Form
  • GridView
  • GroupListView
  • Header
  • ItemRenderer
  • Label
  • LayoutGroup
  • LayoutGroupItemRenderer
  • ListView
  • PageIndicator
  • PageNavigator
  • Panel
  • PopUpListView
  • HProgressBar / VProgressBar
  • Radio
  • RouterNavigator
  • HScrollBar / VScrollBar
  • ScrollContainer
  • HSlider / VSlider
  • StackNavigator
  • TabBar
  • TabNavigator
  • TextArea
  • TextCallout
  • TextInput
  • ToggleButton
  • ToggleSwitch
  • TreeView

Layouts

  • Intro to Layouts
  • AnchorLayout
  • HorizontalLayout
  • HorizontalListLayout
  • HorizontalDistributedLayout
  • ResponsiveGridLayout
  • VerticalLayout
  • VerticalListFixedRowLayout
  • VerticalListLayout
  • VerticalDistributedLayout

Styles and Skins

  • Intro to skins
  • Common shape skins
  • Custom programmatic skins
  • Intro to themes
  • Create a custom theme

Custom UI Components

  • Custom UI components
  • Component lifecycle
  • Custom item renderers
  • Class-based item renderers

Miscellaneous

  • CLI commands
  • Collections
  • haxedef options
  • Install Prerelease Builds
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.
Last updated on 4/12/2021
← Introduction to OpenFLAlert →
  • Basic UI components
  • Layout containers
  • Data containers
  • Navigators
  • Miscellaneous
Feathers UI
Feathers UI
  • Downloads
  • Showcase
  • Testimonials
  • Join Github Sponsors
  • Make a Donation
Haxe / OpenFL
  • Documentation
  • API Reference
  • Samples
  • GitHub
  • Issue Tracker
ActionScript / Starling
  • Documentation
  • API Reference
  • Samples
  • GitHub
  • Issue Tracker
Feathers SDK (Starling)
  • Documentation
  • GitHub
Community
  • Forum
  • Discord
  • Stack Overflow
News & Updates
  • Blog (RSS, Atom)
  • Twitter
Copyright © 2021 Bowler Hat LLC — Illustrations by unDraw.