A special modal that slides out from the right or left side of the screen.

$ component install segmentio/sheet

var sheet = require('sheet');
sheet(el).show();

To use it, pass in the el you want to "sheet-ize".

<div class="Modal" effect="sheet-left">
  <div class="Sheet">
    <a class="Sheet-close-button"></a>
    { Your element gets injected here. }
  </div>
</div>
<div class="Overlay"></div>

A segmentio/overlay element (with an .overlay class) is used to create the mask above the screen, so if you've already themed it you've got no more work to do.

Create a new Sheet instance with the given el.

Show the sheet, emitting show, optionally calling fn.

Hide the sheet, emitting hide, optionally calling fn.

Add a class name to the .sheet and .sheet-overlay.

Remove a class name from the .sheet and .sheet-overlay.

MIT