/sheet

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

Primary LanguageJavaScript

sheet

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

example of a sheet

Installation

$ component install segmentio/sheet

Example

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

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

API

<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.

Sheet(el)

Create a new Sheet instance with the given el.

#show(fn)

Show the sheet, emitting show, optionally calling fn.

#hide(fn)

Hide the sheet, emitting hide, optionally calling fn.

#addClass(name)

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

#removeClass(name)

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

License

MIT