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

›UI Components

Introduction

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

    • Terminal / Command Line
    • HaxeDevelop
    • Moonshine IDE
    • Visual Studio Code

    Build a project targeting…

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

UI Components

  • Intro to UI components
  • ActivityIndicator
  • 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
  • FormLayout
  • 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 Drawer component

The Drawer class is container that adds a special drawer that slides in and out, above all other content. It may be opened or closed with a swipe gesture from one of the four edges.

Live preview of the Drawer component

The Basics

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

var container = new Drawer();
addChild(container);

The container's width and height may be set, but it will automatically resize itself to fill the entire stage if no explicit dimensions are provided.

The container's content property is used to add a child to the container:

var content = new LayoutGroup();
var contentLayout = new VerticalLayout();
contentLayout.horizontalAlign = CENTER;
contentLayout.verticalAlign = MIDDLE;
content.layout = contentLayout;
var openDrawerButton = new Button();
openDrawerButton.text = "Open Drawer";
content.addChild(openDrawerButton);

container.content = content;

The container's drawer property is used to specify the display object that is displayed when the drawer opens.

var drawer = new LayoutGroup();
var drawerLayout = new VerticalLayout();
drawerLayout.horizontalAlign = CENTER;
drawerLayout.verticalAlign = MIDDLE;
drawer.layout = drawerLayout;
var closeDrawerButton = new Button();
closeDrawerButton.text = "Close Drawer";
drawer.addChild(closeDrawerButton);

container.drawer = drawer;

Open or close the drawer programatically

If you want to programmatically open or close the drawer, set the opened property.

openDrawerButton.addEventListener(TriggerEvent.TRIGGER, (event) -> {
  container.opened = true;
});

closeDrawerButton.addEventListener(TriggerEvent.TRIGGER, (event) -> {
  container.opened = false;
});

Related Links

  • feathers.controls.Drawer API Documentation
Last updated on 8/23/2022
← HDividedBox / VDividedBoxForm / FormItem →
  • The Basics
  • Open or close the drawer programatically
  • 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
  • Mastodon
Make a Donation
  • Join Github Sponsors
  • Donate with PayPal
  • Buy a T-Shirt
Copyright © 2023 Bowler Hat LLC — Illustrations by unDraw.