Skip to content

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

Notifications You must be signed in to change notification settings

segment-boneyard/sheet

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

17 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

About

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

Resources

Stars

Watchers

Forks

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •