mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2024-11-16 14:47:14 +03:00
304 lines
7.9 KiB
Markdown
304 lines
7.9 KiB
Markdown
---
|
|
layout: docs
|
|
title: Drawers
|
|
group: material-design
|
|
---
|
|
|
|
The Material Design for Bootstrap `Drawer` provides a markup structure and plugin that allows you to display content on the bounds of any `position: relative` containing element. Drawers are commonly referred to as a side nav or offcanvas nav. The MDB implementation allows for positioning top, left, bottom, right, as well as two styles including push (default) as well as overlay. Both the drawer position and style can be set statically or responsively with the provided classes.
|
|
|
|
## Contents
|
|
|
|
* Will be replaced with the ToC, excluding the "Contents" header
|
|
{:toc}
|
|
|
|
## Overview
|
|
|
|
### Templates and examples
|
|
|
|
The following examples provide a good starting point:
|
|
|
|
- [Drawer template]({{ site.baseurl }}/examples/dashboard/) is a basic fully responsive template.
|
|
- [Dashboard example]({{ site.baseurl }}/examples/dashboard/) is a comprehensive fully responsive demonstration.
|
|
|
|
### Markup
|
|
|
|
In order to use the drawer component, MDB has created the following flex based layout structure:
|
|
|
|
{% highlight html %}
|
|
<div class="mdb-layout-container">
|
|
<header class="mdb-layout-header"> </header>
|
|
<div class="mdb-layout-drawer"> </div>
|
|
<main class="mdb-layout-content"> </main>
|
|
</div>
|
|
{% endhighlight %}
|
|
|
|
|
|
## Positions
|
|
|
|
### Classes
|
|
|
|
The following positioning marker classes should be placed on the `mdb-layout-container` element:
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Classes</th>
|
|
<th>Notes</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>
|
|
<code>.mdb-drawer-f-t</code>
|
|
</td>
|
|
<td>
|
|
{% markdown %}Fixed top{% endmarkdown %}
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<code>.mdb-drawer-f-r</code>
|
|
</td>
|
|
<td>
|
|
{% markdown %}Fixed right{% endmarkdown %}
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<code>.mdb-drawer-f-b</code>
|
|
</td>
|
|
<td>
|
|
{% markdown %}Fixed bottom{% endmarkdown %}
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<code>.mdb-drawer-f-l</code>
|
|
</td>
|
|
<td>
|
|
{% markdown %}Fixed left{% endmarkdown %}
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
|
|
### Fixed left
|
|
|
|
{% example html id=drawer-p1 %}
|
|
<div class="mdb-layout-container mdb-drawer-f-l mdb-drawer-overlay">
|
|
<header class="mdb-layout-header">
|
|
<div class="navbar navbar-light bg-faded">
|
|
<button class="navbar-toggler" type="button" data-toggle="drawer" data-target="#dw-p1">
|
|
<span class="sr-only">Toggle drawer</span>
|
|
<i class="material-icons">menu</i>
|
|
</button>
|
|
<ul class="nav navbar-nav">
|
|
<li class="nav-item">Title</li>
|
|
</ul>
|
|
</div>
|
|
</header>
|
|
<div id="dw-p1" class="mdb-layout-drawer">
|
|
<header>
|
|
<a class="navbar-brand">Title</a>
|
|
</header>
|
|
<ul class="mdb-nav-x list-group">
|
|
<a class="list-group-item">Link 1</a>
|
|
<a class="list-group-item">Link 2</a>
|
|
<a class="list-group-item">Link 3</a>
|
|
</ul>
|
|
</div>
|
|
<main class="mdb-layout-content">
|
|
<div class="container">
|
|
<!-- main content -->
|
|
</div>
|
|
</main>
|
|
</div>
|
|
{% endexample %}
|
|
|
|
### Fixed right
|
|
|
|
{% example html id=drawer-p2 %}
|
|
<div class="mdb-layout-container mdb-drawer-f-r mdb-drawer-overlay">
|
|
<header class="mdb-layout-header">
|
|
<div class="navbar navbar-light bg-faded">
|
|
<button class="navbar-toggler" type="button" data-toggle="drawer" data-target="#dw-p2">
|
|
<span class="sr-only">Toggle drawer</span>
|
|
<i class="material-icons">menu</i>
|
|
</button>
|
|
<ul class="nav navbar-nav">
|
|
<li class="nav-item">Title</li>
|
|
</ul>
|
|
</div>
|
|
</header>
|
|
<div id="dw-p2" class="mdb-layout-drawer">
|
|
<header>
|
|
<a class="navbar-brand">Title</a>
|
|
</header>
|
|
<ul class="mdb-nav-x list-group">
|
|
<a class="list-group-item">Link 1</a>
|
|
<a class="list-group-item">Link 2</a>
|
|
<a class="list-group-item">Link 3</a>
|
|
</ul>
|
|
</div>
|
|
<main class="mdb-layout-content">
|
|
<div class="container">
|
|
<!-- main content -->
|
|
</div>
|
|
</main>
|
|
</div>
|
|
{% endexample %}
|
|
|
|
### Fixed top
|
|
|
|
{% example html id=drawer-p3 %}
|
|
<div class="mdb-layout-container mdb-drawer-f-t mdb-drawer-overlay">
|
|
<header class="mdb-layout-header">
|
|
<div class="navbar navbar-light bg-faded">
|
|
<button class="navbar-toggler" type="button" data-toggle="drawer" data-target="#dw-p3">
|
|
<span class="sr-only">Toggle drawer</span>
|
|
<i class="material-icons">menu</i>
|
|
</button>
|
|
<ul class="nav navbar-nav">
|
|
<li class="nav-item">Title</li>
|
|
</ul>
|
|
</div>
|
|
</header>
|
|
<div id="dw-p3" class="mdb-layout-drawer">
|
|
<header>
|
|
<a class="navbar-brand">Title</a>
|
|
</header>
|
|
<ul class="mdb-nav-x list-group">
|
|
<a class="list-group-item">Link 1</a>
|
|
<a class="list-group-item">Link 2</a>
|
|
<a class="list-group-item">Link 3</a>
|
|
</ul>
|
|
</div>
|
|
<main class="mdb-layout-content">
|
|
<div class="container">
|
|
<!-- main content -->
|
|
</div>
|
|
</main>
|
|
</div>
|
|
{% endexample %}
|
|
|
|
### Fixed bottom
|
|
|
|
{% example html id=drawer-p4 %}
|
|
<div class="mdb-layout-container mdb-drawer-f-b mdb-drawer-overlay">
|
|
<header class="mdb-layout-header">
|
|
<div class="navbar navbar-light bg-faded">
|
|
<button class="navbar-toggler" type="button" data-toggle="drawer" data-target="#dw-p4">
|
|
<span class="sr-only">Toggle drawer</span>
|
|
<i class="material-icons">menu</i>
|
|
</button>
|
|
<ul class="nav navbar-nav">
|
|
<li class="nav-item">Title</li>
|
|
</ul>
|
|
</div>
|
|
</header>
|
|
<div id="dw-p4" class="mdb-layout-drawer">
|
|
<header>
|
|
<a class="navbar-brand">Title</a>
|
|
</header>
|
|
<ul class="mdb-nav-x list-group">
|
|
<a class="list-group-item">Link 1</a>
|
|
<a class="list-group-item">Link 2</a>
|
|
<a class="list-group-item">Link 3</a>
|
|
</ul>
|
|
</div>
|
|
<main class="mdb-layout-content">
|
|
<div class="container">
|
|
<!-- main content -->
|
|
</div>
|
|
</main>
|
|
</div>
|
|
{% endexample %}
|
|
|
|
## Styles
|
|
|
|
### Push
|
|
|
|
The default behavior is for content to be pushed.
|
|
{% example html id=drawer-s1 %}
|
|
<div class="mdb-layout-container mdb-drawer-f-l">
|
|
<header class="mdb-layout-header">
|
|
<div class="navbar navbar-light bg-faded">
|
|
<button class="navbar-toggler" type="button" data-toggle="drawer" data-target="#dw-s1">
|
|
<span class="sr-only">Toggle drawer</span>
|
|
<i class="material-icons">menu</i>
|
|
</button>
|
|
<ul class="nav navbar-nav">
|
|
<li class="nav-item">Title</li>
|
|
</ul>
|
|
</div>
|
|
</header>
|
|
<div id="dw-s1" class="mdb-layout-drawer">
|
|
<header>
|
|
<a class="navbar-brand">Title</a>
|
|
</header>
|
|
<ul class="mdb-nav-x list-group">
|
|
<a class="list-group-item">Link 1</a>
|
|
<a class="list-group-item">Link 2</a>
|
|
<a class="list-group-item">Link 3</a>
|
|
</ul>
|
|
</div>
|
|
<main class="mdb-layout-content">
|
|
<div class="container">
|
|
<p>Main content</p>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
{% endexample %}
|
|
|
|
### Overlay
|
|
Optional behavior will overlay the drawer and provide a backdrop:
|
|
{% example html id=drawer-s2 %}
|
|
<div class="mdb-layout-container mdb-drawer-f-l mdb-drawer-overlay">
|
|
<header class="mdb-layout-header">
|
|
<div class="navbar navbar-light bg-faded">
|
|
<button class="navbar-toggler" type="button" data-toggle="drawer" data-target="#dw-s2">
|
|
<span class="sr-only">Toggle drawer</span>
|
|
<i class="material-icons">menu</i>
|
|
</button>
|
|
<ul class="nav navbar-nav">
|
|
<li class="nav-item">Title</li>
|
|
</ul>
|
|
</div>
|
|
</header>
|
|
<div id="dw-s2" class="mdb-layout-drawer">
|
|
<header>
|
|
<a class="navbar-brand">Title</a>
|
|
</header>
|
|
<ul class="mdb-nav-x list-group">
|
|
<a class="list-group-item">Link 1</a>
|
|
<a class="list-group-item">Link 2</a>
|
|
<a class="list-group-item">Link 3</a>
|
|
</ul>
|
|
</div>
|
|
<main class="mdb-layout-content">
|
|
<div class="container">
|
|
<p>Main content</p>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
{% endexample %}
|
|
|
|
|
|
## Responsiveness vs Static
|
|
|
|
### Static
|
|
in
|
|
out
|
|
overlay
|
|
|
|
### Responsive in
|
|
|
|
### Responsive overlay
|
|
|
|
|
|
## Customization
|
|
|
|
## Variables
|
|
|
|
## Using mixins
|