Drawer

Use the function chi.drawer(elem) to instantiate a new drawer component in the DOM element passed as a parameter. You must use the trigger element as the parameter.

Base

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eu dignissim nisi, gravida pharetra elit. Etiam eu urna orci. Nulla et lorem eleifend, ultrices massa id, molestie urna. Nulla nec quam in turpis fermentum dictum vitae ac nibh. Suspendisse lacus nisi, sollicitudin in commodo quis, euismod id enim. Donec semper nunc et tellus convallis, tristique varius turpis gravida. Quisque hendrerit magna ac bibendum molestie. Nullam scelerisque libero vitae lorem dignissim ullamcorper. Integer mollis auctor enim vel molestie. Etiam id vestibulum augue, vitae dapibus quam. Nunc tincidunt aliquet lacus nec malesuada. Donec ultricies augue non lorem eleifend, eget ullamcorper lacus elementum. Donec condimentum enim nec justo auctor, nec bibendum ipsum dapibus.

Drawer content here

Button
Drawer
JS

<button id="drawer-trigger-1" class="a-btn -icon m-drawer__trigger" data-target="#drawer-1" aria-label="Toggle navigation">
  <div class="a-btn__content">
    <i class="a-icon -sm--2 icon-menu"></i>
  </div>
</button>

<div id="drawer-1" class="m-drawer -right">
  <div class="m-drawer__header">
    <button class="a-btn -icon -close" aria-label="Close">
      <div class="a-btn__content">
        <i class="a-icon icon-x"></i>
      </div>
    </button>
  </div>
  <div class="m-drawer__content">
    <div class="-px--2 -text">Drawer content here</div>
  </div>
</div>

<script>chi.drawer(document.getElementById('drawer-trigger-1'));</script>

With backdrop

Drawer content here

Button
Drawer
JS

<button id="drawer-trigger-2" class="a-btn -icon m-drawer__trigger" data-target="#drawer-2" aria-label="Toggle navigation">
  <div class="a-btn__content">
    <i class="a-icon -sm--2 icon-menu"></i>
  </div>
</button>

<div class="m-backdrop -closed">
  <div class="m-backdrop__wrapper">
    <div id="drawer-2" class="m-drawer -right">
      <div class="m-drawer__header">
        <button class="a-btn -icon -close" aria-label="Close">
          <div class="a-btn__content">
            <i class="a-icon icon-x"></i>
          </div>
        </button>
      </div>
      <div class="m-drawer__content">
        <div class="-px--2 -text">Drawer content here</div>
      </div>
    </div>
  </div>
</div>

<script>chi.drawer(document.getElementById('drawer-trigger-2'));</script>

Options

This component accepts options to configure its behavior.

Option	Default	Description
`animated`	`true`	Enables animation on drawer display and hide, and fade effect in the backdrop.
`target`	`null`	Lets the developer referer the target programmatically instead of by data-target attribute. It accepts Element object and xpath selector string.

Methods

hide() => void

Hides the drawer

Returns

Type: void

show() => void

Shows the drawer

Returns

Type: void

toggle() => void

Toggles active state (show/hide)

Returns

Type: void

Preventing memory leaks

Drawer components have a dispose function to free all resources attached to the element, such as event listeners and object data. You should call this method when you want to remove the component.

var elem = document.getElementById('drawer-1');
var drawer = chi.drawer(elem);
// do stuff
drawer.dispose();

TipIt is safe to call the drawer method more than once, as it will return any previously created drawer component associated to the trigger.

var elem = document.getElementById('drawer-2');
var drawer = chi.drawer(elem);
var elem2 = document.getElementById('drawer-2');
var drawer2 = chi.drawer(elem2);
drawer === drawer2; // returns true

drawer.dispose(); // Only have to do it once.