DrawerLayout

A layout controller for implementing a Navigation Drawer. Swipe from left edge or tap the menu button to open the drawer.

The navigation drawer is a UI panel that shows your app's main navigation menu. It is hidden when not in use, but appears when the user swipes a finger from the left edge of the screen or, when at the top level of the app, the user touches the drawer icon in the app bar.

The drawer is currently displaying as fixed since page is wider than 960 pixels. Reduce the window size to switch to auto-hide mode and try gesture control.

Usage

1. Include zUIx library

Add the following line, preferably inside the head section of the HTML document:

<script src="https://zuixjs.github.io/zuix/js/zuix.min.js"></script>

2. Load the drawer layout

Add the data-ui-load attribute to the container of your navigation drawer

<div data-ui-load="@lib/controllers/drawer_layout"
  data-ui-context="menu-drawer"
  data-ui-options="drawer_options">
  
</div>

Set the options object

var drawer_options = {
  on: {
    'drawer:open': function(e) {
      // things to do when drawer is open
    },
    'drawer:close': function(e) {
      // things to do when drawer is closed
    },
    'layout:change': function(e, status) {
        // where `status` object has two fields
        // {
        //    smallScreen, (boolean)
        //    drawerLocked (boolean)
        // }
    }
  },
  autoHideWidth: 960,
  drawerWidth: 280
};

Option attributes

• data-ui-load= "@lib/controllers/drawer_layout" constructor
  load the drawer_layout controller on the element.
• data-ui-context optional
  identifier name to be used to reference this component from JavaScript.
• data-o-width optional
  panel width. Default value is 280 pixels.
• data-o-hide-width optional
  auto-hide panel if available width is less than specified value, otherwise show as fixed. Set to `-1` to always auto-hide. Default value is 960 pixels.

Scripting

Event listeners

var menuDrawer;
// since the component loads asynchronously
// a callback is required to ensure the component is ready
zuix.context('menu-drawer', function() {
  // add event listeners
  this
    .on('drawer:open', function(e) { /* ... */})
    .on('drawer:close', function(e) { /* ... */});
    .on('layout:change', function(e, d) { /* ... */});
  // store a global reference of
  // the component for later use
  menuDrawer = this;
});

Methods

// open the drawer
menuDrawer.open();
// close the drawer
menuDrawer.close();
// toggle open/close drawer
menuDrawer.toggle();
// enable/disable control by gesture
menuDrawer.lock(true);

You can try these command in the console now.

Source code

Source code is available in the lib/controllers folder of zKit repository.