Overlays

Drawer

A panel that slides in from an edge of the screen: for filters, a cart, details or a phone menu.

Right, left and bottom

HTML

<button class="pw-btn" data-pw-open="#demo-drawer">Right</button>
<button class="pw-btn" data-pw-open="#demo-drawer-left">Left</button>
<button class="pw-btn" data-pw-open="#demo-drawer-bottom">Bottom</button>

<div class="pw-drawer" id="demo-drawer" data-pw-drawer hidden>
  <div class="pw-drawer-panel">
    <div class="pw-drawer-head">
      <h2>Filters</h2>
      <button class="pw-close" data-pw-close aria-label="Close"></button>
    </div>
    <div class="pw-drawer-body">
      <label class="pw-check"><input type="checkbox" checked> In stock</label><br><br>
      <label class="pw-check"><input type="checkbox"> On sale</label>
    </div>
    <div class="pw-drawer-foot">
      <button class="pw-btn" data-pw-close>Reset</button>
      <button class="pw-btn pw-btn--primary" data-pw-close>Show results</button>
    </div>
  </div>
</div>
<div class="pw-drawer" id="demo-drawer-left" data-pw-drawer data-side="left" hidden>
  <div class="pw-drawer-panel">
    <div class="pw-drawer-head"><h2>Menu</h2><button class="pw-close" data-pw-close aria-label="Close"></button></div>
    <div class="pw-drawer-body"><p>Put your navigation links here.</p></div>
  </div>
</div>
<div class="pw-drawer" id="demo-drawer-bottom" data-pw-drawer data-side="bottom" hidden>
  <div class="pw-drawer-panel">
    <div class="pw-drawer-head"><h2>Share</h2><button class="pw-close" data-pw-close aria-label="Close"></button></div>
    <div class="pw-drawer-body"><p>A bottom sheet suits short lists of actions on phones.</p></div>
  </div>
</div>

Options

Set them as attributes on the element.

Attribute	Default	What it does
`data-side`	`right`	`left` or `bottom`. In right-to-left pages, right and left swap.
`data-static`		A click outside and Esc do not close it.
`data-focus`		A selector for the element that gets the focus first.

Events

Listen with addEventListener. Details are in event.detail.

Event	When
`pw:open, pw:opened`	Before and after it opens.
`pw:close, pw:closed`	Before and after it closes.

From your script

var d = Partwise.get('#demo-drawer', 'modal');   // a drawer is a modal that sits at an edge
d.open(); d.close(); d.toggle();

Keyboard

Key	Action
`Esc`	Close
`Tab`	Move through the controls inside. The focus stays in the drawer.

Good to know

Change the width with CSS: .pw-drawer-panel { width: 520px; }.
The menu button of this page on a phone is a left drawer.

Files

Everything is in dist/partwise.css and dist/partwise.js. To load only this component, use src/css/00-base.css and src/js/00-core.js plus: css/12-dialog.css, js/12-dialog.js.