< Jewel Components list

Jewel Drawer

Reference

Available since version 0.9.4.

^{Note: This component is currently only available for JavaScript.}

Overview

The Drawer class is a container component used for navigation that can be opened with the menu icon, or be always visible. It use to be positioned at the left (or right) side of the application screen.

It can be used in float or fixed modes:

• float make the drawer appear over the screen without make any other application elements change size. Clicking outside the drawer will hide it. Usually clicking in some navigation option will hide it as well.
• fixed will need some place and make the other application content shrink. Clicking on any navigation option in the drawer usually doesn’t hide it.

Drawer has other complementary components:

Example of use

In MXML declare a Drawer like this:

<j:Drawer>
	<j:beads>
		<j:ResponsiveDrawer auto="true"/>
	</j:beads>

	<j:DrawerHeader>
		<j:ImageButton src="assets/apache-royale-jewel-logo-white.svg"/>
	</j:DrawerHeader>

	<j:DrawerContent>
		<j:Navigation/>
		<j:Divider/>
		<j:Navigation/>
	</j:DrawerContent>

	<j:DrawerFooter>
		<j:BarSection>
			<j:Label text="Some Footer Content"/>
		</j:BarSection>
	</j:DrawerFooter>

</j:Drawer>

In ActionScript we can do the same in the following way:

var d:Drawer = new Drawer();
// create the DrawerContent
var dc:DrawerContent = new DrawerContent();
// add elements to DrawerContent like Navigation, Divider...
// ...and add the DrawerContent to the Drawer
d.addElement(dc);
// finally add the Drawer to the parent (usually a ResponsiveView)
parent.addElement(d);

where parent is the container where the control will be added. Usually parent is Jewel ResponsiveView, since Drawers are used on responsive applications.

Relevant Properties and Methods

Check the Reference of org.apache.royale.jewel.Drawer for a more detailed list of properties and methods.