mdl-slideout v1.0.0
mdl-slideout
An Material Design Lite slideout pane implementation (https://github.com/google/material-design-lite)
A custom implementation of a slideout panel for Material Design Lite
Install
Via npm:
npm install mdl-slideout
Then include in your html:
<link rel="stylesheet" href="dist/mdl-slideout.min.css">
...
<script src="dist/mdl-slideout.min.js"></script>
Basic use
To use any MDL component, you must include the minified CSS and JavaScript files using standard relative-path references in the <head>
section of the page, as described in the MDL Introduction.
To include a MDL slideout component:
1. Code a <div>
element to hold the slideout.
<div>
...
</div>
2. Code a <div>
element directly after the previous to hold the slideout overlay.
<div>
...
</div>
<div>
...
</div>
3. Inside the slideout div, code an <div>
element to be used for the slideout tile.
<div>
<div></div>
</div>
<div><div>
4. Also inside the div, after the <div>
element, code another <div>
element to be used for the slideout actions.
<div>
<div></div>
<div><div>
</div>
<div><div>
5. Also inside the div, after the <div>
elements, code another <div>
element to be used for the slideout content.
<div>
<div></div>
<div><div>
<div><div>
</div>
<div><div>
6. Add one or more MDL classes, separated by spaces, to the div container, title div, action div, content div, and overlay div using the class
attribute.
<div class="mdl-slideout mdl-js-slideout mdl-slideout--right">
<div class="mdl-slideout__title"></div>
<div class="mdl-slideout__actions"><div>
<div class="mdl-slideout__content"><div>
</div>
<div class="mdl-slideout__overlay"><div>
The slideout component is ready for use.
To Show the slideout:
var slideout = document.querySelectorAll(".mdl-slideout")[0];
slideout.MaterialSlideout.show();
To Hide the slideout:
var slideout = document.querySelectorAll(".mdl-slideout")[0];
slideout.MaterialSlideout.hide();
Examples
Slideout with no title or actions (content only)
<div class="mdl-slideout mdl-js-slideout mdl-slideout--right">
<div class="mdl-slideout__content">
This is sample content
</div>
</div>
<div class="mdl-slideout__overlay"></div>
Slideout from right with title and actions
<div class="mdl-slideout mdl-js-slideout mdl-slideout--right">
<div class="mdl-slideout__title">Right Slideout Title</div>
<div class="mdl-slideout__actions">
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">Hide This</button>
</div>
<div class="mdl-slideout__content">
This is sample content
</div>
</div>
<div class="mdl-slideout__overlay"></div>
Slideout from left with title and actions
<div class="mdl-slideout mdl-js-slideout mdl-slideout--left">
<div class="mdl-slideout__title">Left Slideout Title</div>
<div class="mdl-slideout__actions">
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">Hide This</button>
</div>
<div class="mdl-slideout__content">
This is sample content
</div>
</div>
<div class="mdl-slideout__overlay"></div>
Slideout from top with title and actions
<div class="mdl-slideout mdl-js-slideout mdl-slideout--top">
<div class="mdl-slideout__title">Left Slideout Title</div>
<div class="mdl-slideout__actions">
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">Hide This</button>
</div>
<div class="mdl-slideout__content">
This is sample content
</div>
</div>
<div class="mdl-slideout__overlay"></div>
Slideout from bottom with title and actions
<div class="mdl-slideout mdl-js-slideout mdl-slideout--bottom">
<div class="mdl-slideout__title">Left Slideout Title</div>
<div class="mdl-slideout__actions">
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">Hide This</button>
</div>
<div class="mdl-slideout__content">
This is sample content
</div>
</div>
<div class="mdl-slideout__overlay"></div>
7 years ago