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.
Drawer componentThe 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;
});