10 KiB
| layout | title | group |
|---|---|---|
| docs | Drawers | material-design |
The Bootstrap Material Design Drawer provides a markup structure and plugin that allows you to display content on the bounds of any containing element. Drawers are commonly referred to as a side nav or offcanvas nav. The BMD 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/drawer/) is a basic fully responsive template.
- [Dashboard example]({{ site.baseurl }}/examples/dashboard/) is a comprehensive fully responsive demonstration.
Behavior
The default behavior for any drawer is to be out of the frame of view. It can be set in the frame of view either by using using one of the gridpoint responsive classes such as bmd-drawer-in-lg-up, or by using bmd-drawer-in. Any drawer, be it responsive or statically set to in can be forced out by using bmd-drawer-out.
Markup
In order to use the drawer component you must use BMD's flex based layout structure. If this layout structure is not a direct child of <body>, be sure that the containing element has set position: relative as this layout structure utilizes an outer element that is absolutely positioned in order to enable features such as content scrolling and sticky header.
{% highlight html %}
Toggle
A manual drawer toggle can be integrated with data attributes. For responsive display or hiding, use the standard Bootstrap classes. The following example will target a drawer with the id of my-drawer
{% highlight html %} Toggle drawer menu {% endhighlight %}
Styles
Push
The default behavior is for content to be pushed. {% example html id=drawer-s1 %}
- Title
-
Link 1
Link 2
Link 3
Main content
Overlay
Optional behavior will overlay the drawer and provide a backdrop. This can be marked with bmd-drawer-overlay to always overlay, or you can use a responsive class such as bmd-drawer-overlay-md-down.
{% example html id=drawer-s2 %}
- Title
-
Link 1
Link 2
Link 3
Main content
Positions
The following positioning marker classes should be placed on the bmd-layout-container element:
| Classes | Notes |
|---|---|
.bmd-drawer-f-t
|
{% markdown %}Fixed top{% endmarkdown %} |
.bmd-drawer-f-r
|
{% markdown %}Fixed right{% endmarkdown %} |
.bmd-drawer-f-b
|
{% markdown %}Fixed bottom{% endmarkdown %} |
.bmd-drawer-f-l
|
{% markdown %}Fixed left{% endmarkdown %} |
Fixed left
{% example html id=drawer-p1 %}
- Title
-
Link 1
Link 2
Link 3
Fixed right
{% example html id=drawer-p2 %}
- Title
-
Link 1
Link 2
Link 3
Fixed top
{% example html id=drawer-p3 %}
- Title
-
Link 1
Link 2
Link 3
Fixed bottom
{% example html id=drawer-p4 %}
- Title
-
Link 1
Link 2
Link 3
Customization
Variables
Globally, you may alter the size of x vs y drawers with the following variables:
$bmd-drawer-x-size$bmd-drawer-y-size
Custom responsive drawer
The following will create x drawers (left/right) at the size of 500px that will respond to both marker classes and grid-based responsive classes such as bmd-drawer-in-lg-up:
{% highlight scss %}
.kitchen-sink-drawer {
$custom-size: 500px;
@include bmd-drawer-x-out($custom-size);
&:not(.bmd-drawer-out) {
@each $breakpoint in map-keys($grid-breakpoints) {
@include bmd-drawer-x-in-up($custom-size, $breakpoint);
}
}
}
{% endhighlight %}
Custom static drawer
The following generates a custom drawer at the size of 500px that is out by default and can be triggered in with bmd-drawer-in.
{% highlight scss %} .kitchen-sink-drawer-static { $custom-size: 500px; @include bmd-drawer-x-out($custom-size); // closed by default @include bmd-drawer-x-in($custom-size); // triggered with bmd-drawer-in @include bmd-drawer-x-overlay(); // overlay by default, no other classes necessary } {% endhighlight %}