Tabris.js Navigation Drawer

Tabris.js provides cross-platform access to native gestures and controls through Javascript. In recent articles we have explored images, swipe to dismiss, user input and even parallax scrolling. Today we will explore another native control, The Navigation Drawer.

The Navigation Drawer is a control that can be accessed using a bezel swipe from the left, or tapping on the menu icon in the top left.

A drawer can be included in a Tabris.js app by instantiating the Drawer widget (only one Drawer can be created per app):

var drawer = tabris.create("Drawer");

Drawers as Containers

Drawers act as containers, and thus can contain other controls and even actions on those controls:

var image = tabris.create("ImageView", {
  image: "images/cover.jpg",
  scaleMode: "fill",
  layoutData: {left: 0, right: 0, top: 0, height: 200}
}).appendTo(drawer);
tabris.create("TextView", {  
  text : "My world...",
  layoutData: {top : [image, 10], left : 0},
  font: "22px Arial"
}).on("tap", function() {
  drawer.close();
}).appendTo(drawer);

The Page Selector

Finally, the Drawer is most often used in conjunction with the PageSelector control which enables navigation to all the Pages in your Tabris.js application. Simply add the PageSelector to the drawer to access this functionality.

tabris.create("PageSelector", {
  layoutData: {left: 0, top: 0, right: 0, bottom: 0}
}).appendTo(drawer);

To try the Drawer or any features of Tabris.js, login with your GitHub credentials and get started for free. For more tips and tricks with Tabris.js, follow us on Twitter.