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

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.13/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);
arrow_left  Previous
Next arrow_right 
Support this work
extension
zKit components v1.2.1
web enhancing bits