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 PageIndicator component

The PageIndicator class displays a series of buttons, with one being selected, to show the user which index among a limited set is selected. Typically, it is paired with a component like ListView or PageNavigator that supports scrolling or paging.

Live preview of the PageIndicator component

The Basics

Start by creating a PageIndicator control, give it the maximum number of pages, and add it to the display list.

var pages = new PageIndicator();
pages.maxSelectedIndex = 5;
addChild(pages);

The number of buttons that a page indicator displays is controlled by the maxSelectedIndex property. You'll see that the first symbol is automatically selected. If you tap the page indicator on the right side, it will advance to the next index.

The currently selected page may be changed programmatically by setting the selectedIndex property.

pages.selectedIndex = 2;

Add an event listener for Event.CHANGE to perform an action when the selected index changes.

pages.addEventListener(Event.CHANGE, pageIndicator_changeHandler);

Listeners for Event.CHANGE have the following function signature.

function pageIndicator_changeHandler(event:Event):Void {
    var pages = cast(event.currentTarget, PageIndicator);
    trace("pages.selectedIndex change: " + pages.selectedIndex);
}

Styles

A number of styles may be customized on the toggle buttons displayed in a PageIndicator component.

Toggle Buttons

The toggle buttons in a PageIndicator component is of type ToggleButton. Its appearance may be customized globally in a theme, or it may be customized outside of a theme on an specific, individual PageIndicator.

See How to use the ToggleButton component for complete details about which styles are available for the toggle button.

Style toggle buttons globally

Use the PageIndicator.CHILD_VARIANT_TOGGLE_BUTTON constant in a theme to provide a function that globally styles the toggle buttons in all PageIndicator components.

styleProvider.setStyleFunction(
    ToggleButton,
    PageIndicator.CHILD_VARIANT_TOGGLE_BUTTON,
    setPageIndicator_ToggleButton_Styles);

The function should use the following signature.

function setPageIndicator_ToggleButton_Styles(button:ToggleButton):Void {
    // ... set styles here
}

Style the toggle buttons in a specific PageIndicator

The toggleButtonRecycler property may be used to customize the creation of the toggle buttons.

pages.toggleButtonRecycler = DisplayObjectRecycler.withFunction(() -> {
    var button = new ToggleButton();
    // ... set styles here
    return button;
});

Related Links

  • feathers.controls.PageIndicator API Documentation
  • How to use the PageNavigator component
Last updated on 8/9/2022
← NumericStepperPageNavigator →
  • The Basics
  • Styles
    • Toggle Buttons
  • 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.