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

Method #1 Method #2

1. Import `drawer-layout` module

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

2. Add component to the page

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

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

</drawer-layout>

1. Include `zuix.js` library

If not already included, add the following line right before the end of the head section in the HTML document:

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

2. Load the drawer layout

Add the ctrl z-load attributes to the container of your navigation drawer

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

Controllers

Components

Support this work