Skip to content

README.md

Latest commit

 

History

History
276 lines (221 loc) · 6.03 KB

README.md

File metadata and controls

276 lines (221 loc) · 6.03 KB

Drawer

A navigation drawer that can slide in from the left or right. Based on Polymer's app-drawer element using vanilla web technologies (CSS, JavaScript and HTML).

Demos

Examples

Align the drawer at the start, which is left in LTR layouts (default).

<div class="mdk-drawer mdk-js-drawer">
  <div class="mdk-drawer__content">
    <!-- Drawer content -->
  </div>
</div>

Align the drawer at the end.

<div class="mdk-drawer mdk-js-drawer" align="end">
  <div class="mdk-drawer__content">
    <!-- Drawer content -->
  </div>
</div>

Open the drawer.

<div class="mdk-drawer mdk-js-drawer" opened>
  <div class="mdk-drawer__content">
    <!-- Drawer content -->
  </div>
</div>

Disable the drawer scrim.

<div class="mdk-drawer mdk-js-drawer" persistent>
  <div class="mdk-drawer__content">
    <!-- Drawer content -->
  </div>
</div>

To make the contents of the drawer scrollable, create a wrapper for the scroll content.

.mdk-drawer__inner {
  height: 100%;
  overflow-y: auto;
  text-align: initial;
}
<div class="mdk-drawer mdk-js-drawer">
  <div class="mdk-drawer__content">
    <div class="mdk-drawer__inner">
      <!-- Scrollable drawer content -->
    </div>
  </div>
</div>

JavaScript

Initialize the drawer component by adding the mdk-js-drawer class.

Options

The drawer options can be used programatically (see Programmatic usage below) or via attributes on the HTML element.

Property Description Default
align The alignment of the drawer on the screen (left, right, start or end). start computes to left and end to right in LTR and RTL layouts. left
persistent The drawer does not have a scrim false
opened The opened state of the drawer false

Methods

Method Description
open() Opens the drawer.
close() Closes the drawer.
toggle() Toggles the opened state of the drawer.
getWidth() Get the width of the drawer.
destroy() Destroys the drawer.
init() (Re)Initializes the drawer (only needs to be called after using destroy).

Events

Event Description
mdk-drawer-change Fires when any of the drawer properties change (align, position, persistent or opened).
mdk-drawer-changed Fires after the drawer state has changed (after the CSS transition is complete) 
var drawerNode = document.querySelector('.mdk-js-drawer')
drawerNode.addEventListener('mdk-drawer-change', function () {
  // do something
})

Programmatic usage

Get a reference to a drawer component and interact with the API.

var drawerNode = document.querySelector('.mdk-js-drawer')
var drawer = drawerNode.mdkDrawer

// Set the opened state directly via property
drawer.opened = true

// Open the drawer via method
drawer.open()

// Get the drawer width
console.log(drawer.getWidth())

// Toggle button
var button = document.querySelector('.some-button')
button.addEventListener('click', function () {
	drawer.toggle()
})

Sometimes you need to initialize a drawer dynamically, for example when using libraries like Vue.js or Angular2 where you need to hook into the application lifecycle.

var drawerNode = document.querySelector('.mdk-js-drawer')

// Initialize drawer
domFactory.handler.upgradeElement(drawerNode, 'mdk-drawer')

// Get a reference to the drawer component
var drawer = drawerNode.mdkDrawer

// Use the drawer API
drawer.open()

// You can also destroy the drawer before removing it from the DOM
drawer.destroy()

Reactivity

The drawer options are reactive, which means that when assigning options programatically (i.e. drawer.opened = true) or calling component methods which themselves are assigning options (i.e. drawer.open()), the component will update itself to reflect the new option value and trigger events and DOM changes.

CSS

Customize the drawer width via CSS overrides.

.mdk-drawer__content {
  width: 200px;
}

Customize the drawer background color.

.mdk-drawer__content {
  background-color: #eee;
}

Customize the drawer based on position.

[position=left] .mdk-drawer__content {
  border-right: 1px solid #eee;
}

Customize the drawer scrim.

.mdk-drawer__scrim {
  background-color: rgba(0, 0, 0, .7);
}

Sass

Customize the drawer width using Sass.

$mdk-drawer-width: 200px !default;

@import 'node_modules/material-design-kit/src/variables';
@import 'node_modules/material-design-kit/src/drawer/drawer';

Get help

Get help directly from our team via our Slack channel. Request invite