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.
...
2. Code a <div>
element directly after the previous to hold the slideout overlay.
......
3. Inside the slideout div, code an <div>
element to be used for the slideout tile.
4. Also inside the div, after the <div>
element, code another <div>
element to be used for the slideout actions.
5. Also inside the div, after the <div>
elements, code another <div>
element to be used for the slideout content.
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.
The slideout component is ready for use.
To Show the slideout:
var slideout = document0;slideoutMaterialSlideout;
To Hide the slideout:
var slideout = document0;slideoutMaterialSlideout;
Examples
Slideout with no title or actions (content only)
This is sample content
Slideout from right with title and actions
Right Slideout Title Hide This This is sample content
Slideout from left with title and actions
Left Slideout Title Hide This This is sample content
Slideout from top with title and actions
Left Slideout Title Hide This This is sample content
Slideout from bottom with title and actions
Left Slideout Title Hide This This is sample content