Nearly Perfected Mystique

    mdl-slideout

    1.0.0 • Public • Published

    mdl-slideout

    An Material Design Lite slideout pane implementation (https://github.com/google/material-design-lite)

    Bower Version NPM Version license

    bitHound Overall Score bitHound Dependencies bitHound Dev Dependencies bitHound Code

    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>

    Install

    npm i mdl-slideout

    DownloadsWeekly Downloads

    0

    Version

    1.0.0

    License

    MIT

    Last publish

    Collaborators

    • rathxxx