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
    • 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

How to use the PageNavigator component

The PageNavigator class supports navigation between views using a PageIndicator component to select the current view.

Navigation can be enhanced with animation, called a transition. Feathers UI provides a number of animated transitions out of the box, and a simple API allows anyone to create custom transitions.

⚠️ Beta Notice: This component is still quite new to Feathers UI. It was included in the latest release because it should be stable enough for production use. However, some APIs may go through minor changes in upcoming releases — based on feedback from developers like you. Learn more about Beta APIs.

The Basics

Start by creating a PageNavigator, and add it to the display list.

var navigator = new PageNavigator();
addChild(navigator);

Data provider

A page can be a Feathers UI component or any OpenFL display object. The following example creates a simple page view with a label.

class Page1 extends LayoutGroup {
    public function new() {
        super();

        var message = new Label();
        message.text = "Hello World";
        addChild(message);
    }
}

To add a new view that the navigator can show, create one or more PageItem objects and add them to a collection:

navigator.dataProvider = new ArrayCollection([
    PageItem.withClass(Page1),
    PageItem.withClass(Page2),
    PageItem.withClass(Page3)
]);

The first argument passed to PageItem.withClass() is the text to be displayed on the page. The second argument is the Page1 class from earlier. The navigator will automatically create an instance of this class when the view needs to be shown.

The PageItem class defines three static functions for creating items.

  • withClass() accepts any subclass of DisplayObject. Each time that the view is shown, a new instance of the class will be instantiated.
  • withFunction() accepts a function that returns a display object. Each time that the view is shown, this function will be called. Using a function can be useful for adding children to a view or setting its properties before showing it in the navigator.
  • withDisplayObject() accepts an already-instantiated display object. When the view is shown, the same instance will always be reused. This one can allocate a lot of memory if overused, so be careful!

Navigation

To show the view at a specific index in the data provider, set the navigator's selectedIndex property

navigator.selectedIndex = 2;

Alternatively, pass one of the PageItem instances from the collection to the selectedItem property.

navigator.selectedItem = navigator.dataProvider.get(2);

Related Links

  • feathers.controls.navigators.PageNavigator API Documentation
  • Animated transitions for view navigators
  • Custom transitions for view navigators
Last updated on 3/21/2022
← PageIndicatorPanel →
  • The Basics
    • Data provider
  • Navigation
  • 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.