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

›Layouts

Introduction

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

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

    Build a project targeting…

    • Android
    • Electron
    • HashLink VM
    • iOS
    • Linux
    • macOS
    • Neko VM
    • Web
    • Windows
  • Introduction to OpenFL

UI Components

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

Layouts

  • Intro to Layouts
  • AnchorLayout
  • FlowRowsLayout
  • HorizontalLayout
  • HorizontalListLayout
  • HorizontalDistributedLayout
  • ResponsiveGridLayout
  • TiledRowsLayout
  • TiledRowsListLayout
  • PagedTiledRowsListLayout
  • VerticalLayout
  • VerticalListFixedRowLayout
  • VerticalListLayout
  • VerticalDistributedLayout
  • Layout Data
  • Custom layouts

Styles and Skins

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

Animation

  • Navigator animated transitions
  • Custom navigator transitions

Custom UI Components

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

Miscellaneous

  • CLI commands
  • Collections
  • Focus management
  • haxedef options
  • Displaying pop-ups
  • Semantic versioning
  • Tool-tips
  • Cookbook
  • Install Prerelease Builds
Edit

Introduction to layouts and containers

A number of layouts are available to position and size children in Feathers UI containers, and it's also possible to create custom layouts.

There are two types of containers in Feathers UI, and certain layouts may be better suited for one type over the other.

  • Simple containers use standard display list APIs (like addChild() and removeChild()) to manage children.
  • Data containers render children by interpreting objects that have been added to data collections.

Every layout may be used with both container types, but data containers support special layouts that are better optimized for displaying a large number of children.

Simple containers

Use the standard display list APIs to add and remove children from simple containers like the ones below.

  • LayoutGroup
  • ScrollContainer
  • Panel

The following layouts are best suited for simple containers.

  • AnchorLayout
  • FlowRowsLayout
  • HorizontalLayout
  • ResponsiveGridLayout
  • TiledRowsLayout
  • VerticalLayout

Data containers

Components that render data collections may take advantage of special layouts that are better optimized for displaying many more children than a typical container.

  • ListView
  • GridView
  • GroupListView
  • TreeView
  • TreeGridView

The following layouts are optimized for data containers by providing virtualization and item renderer recycling.

  • HorizontalListLayout
  • TiledRowsListLayout
  • PagedTiledRowsListLayout
  • VerticalListLayout
  • VerticalListFixedRowLayout

Other containers

Some containers work similarly to simple containers, where one can use the standard display list APIs to add and remove children, but these containers have their own built-in layout and don't support custom layouts.

  • HDividedBox and VDividedBox

Related Links

  • Layout data
  • Create custom layouts for Feathers UI containers
Last updated on 6/3/2022
← TreeViewAnchorLayout →
  • Simple containers
  • Data containers
  • Other containers
  • Related Links
Feathers UI
Feathers UI
  • Downloads
  • Showcase
  • Testimonials
  • Premium Support
Documentation
  • Getting Started
  • API Reference
  • Samples
    Github
  • Source Code
  • Issue Tracker
Community
  • Forum
  • Discord
  • Stack Overflow
News & Updates
  • Blog (RSS, Atom)
  • Twitter
Make a Donation
  • Join Github Sponsors
  • Donate with PayPal
  • Buy a T-Shirt
Copyright © 2022 Bowler Hat LLC — Illustrations by unDraw.