Mdl-slideout NPM

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>

material design styleguide style guide mdl select

material-design-lite

@infinitebrahmanuniverse/nolb-mdl @everything-registry/sub-chunk-2148

1.0.0

9 years ago