Tronic247 Material

Drawer

Edit this page

Usage

<div class="drawer">
  <h3>Mail</h3>
  <p>By Tronic247</p>
  <nav class="list small">
    <a href="#!" class="list-item active"><i class="material-icons">inbox</i>Item</a>
    <a href="#!" class="list-item"><i class="material-icons">star</i>Item</a>
    <a href="#!" class="list-item"><i class="material-icons">send</i>Item</a>
    <a href="#!" class="list-item"><i class="material-icons">drafts</i>Item</a>
    <hr>
    <a href="#!" class="list-item"><i class="material-icons">label</i>Label 1</a>
    <a href="#!" class="list-item"><i class="material-icons">label</i>Label 2</a>
    <a href="#!" class="list-item"><i class="material-icons">label</i>Label 3</a>
    <a href="#!" class="list-item"><i class="material-icons">label</i>Label 4</a>
    <a href="#!" class="list-item"><i class="material-icons">label</i>Label 5</a>
    <hr>
    <a href="#!" class="list-item"><i class="material-icons">feedback</i>Feedback</a>
    <a href="#!" class="list-item"><i class="material-icons">settings</i>Options</a>
  </nav>
</div>
<button data-trigger="drawer" data-drawer="#drawer">Toggle</button>
<div class="drawer-overlay" id="drawer">
  <div class="drawer modal">
    <h3>Mail</h3>
    <p>By Tronic247</p>
    <nav class="list small">
      <a href="#!" class="list-item active"><i class="material-icons">inbox</i>Item</a>
      <a href="#!" class="list-item"><i class="material-icons">star</i>Item</a>
      <a href="#!" class="list-item"><i class="material-icons">send</i>Item</a>
      <a href="#!" class="list-item"><i class="material-icons">drafts</i>Item</a>
      <hr>
      <a href="#!" class="list-item"><i class="material-icons">label</i>Label 1</a>
      <a href="#!" class="list-item"><i class="material-icons">label</i>Label 2</a>
      <a href="#!" class="list-item"><i class="material-icons">label</i>Label 3</a>
      <a href="#!" class="list-item"><i class="material-icons">label</i>Label 4</a>
      <a href="#!" class="list-item" data-trigger="drawer" data-drawer="#drawer"><i class="material-icons">close</i>Close Me</a>
      <hr>
      <a href="#!" class="list-item"><i class="material-icons">feedback</i>Feedback</a>
      <a href="#!" class="list-item"><i class="material-icons">settings</i>Options</a>
    </nav>
  </div>
</div>

Here are available attributes.

Attribute Value Action
data-trigger drawer Tell the js that It's a trigger
data-dialog queryselector (#id , .class) The parent class or ID of the dialog
data-action open , close , (blank) The action to be performed