Drawer Layout

This is a responsive implementation of a navigation drawer that will also work on wide screens where the drawer will stay open on the left side.

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.

Usage

<script type="module">
  import "https://zuixjs.github.io/zkit/lib/1.2/controllers/drawer-layout.module.js";
</script>

<drawer-layout z-context="menu-drawer">

  <!-- Add Navigation Drawer menu and content here -->

</drawer-layout>

<script src="https://cdn.jsdelivr.net/npm/zuix-dist@1.1.13/js/zuix.min.js"></script>

<div ctrl z-load="https://zuixjs.github.io/zkit/lib/1.2/controllers/drawer-layout"
     z-context="menu-drawer">

  <!-- Add Navigation Drawer menu and content here -->

</div>

Option attributes

• z-context="<context_id>" optional
  identifier name to be used to access this component from JavaScript.
• :on:<event_name>="<handler>" optional
  set handler function for event <event_name>
• :drawer-width="<width_px>" optional
  panel width. Default value is 280 pixels.
• :auto-hide-width="<width_px>" 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.
• :main-content optional element hosting the main page content. The drawer will automatically resize the content when open and page width is greater than :auto-hide-width

Events

• drawer:open - occurs when the drawer opens
• drawer:close - occurs when the drawer is closed
• layout:change - occurs when the page layout changed.
  The second argument of the callback is a status object with two fields:
  {smallScreen: boolean, drawerLocked: boolean}

Scripting

Get a reference to the component instance:

zuix.context('menu-drawer', (md) => {
  // store a global reference for later use
  self.menuDrawer = md;
});

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);