mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2025-02-02 21:04:13 +03:00
Code Issues Packages Projects Releases Wiki Activity

#822 drawer implementation complete

Browse Source
This commit is contained in:
Kevin Ross 2016-01-22 15:05:43 -06:00
parent 6f78ca4bf7
commit 63c8cf491b
5 changed files with 79 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/examples/drawer/index.html
View File

@ -41,7 +41,7 @@ group: material-design
</div> </div>
</header> </header>
<div id="dw-1" class="mdb-layout-drawer"> <div id="dw-1" class="mdb-layout-drawer bg-faded">
<header> <header>
<a class="navbar-brand">Title</a> <a class="navbar-brand">Title</a>
</header> </header>

83
docs/material-design/drawers.md
View File

@ -4,7 +4,7 @@ title: Drawers
group: material-design 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. The Material Design for Bootstrap `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 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 ## Contents
@ -22,11 +22,11 @@ The following examples provide a good starting point:
### Behavior ### 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 or the gridpoint responsive classes such as `mdb-drawer-in-lg-up`, or by using `mdb-drawer-in`. Any drawer, be it responsive or statically set to _in_ can be _forced_ out by using `mdb-drawer-out`. 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 `mdb-drawer-in-lg-up`, or by using `mdb-drawer-in`. Any drawer, be it responsive or statically set to _in_ can be _forced_ out by using `mdb-drawer-out`.
### Markup ### Markup
In order to use the drawer component, MDB has created the following flex based layout structure: In order to use the drawer component you must use MDB'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 %} {% highlight html %}
<div class="mdb-layout-container"> <div class="mdb-layout-container">
@ -36,6 +36,17 @@ In order to use the drawer component, MDB has created the following flex based l
</div> </div>
{% endhighlight %} {% endhighlight %}
### 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 %}
<button class="navbar-toggler hidden-lg-up" data-toggle="drawer" data-target="#my-drawer" type="button">
<span class="sr-only">Toggle drawer</span>
<i class="material-icons">menu</i>
</button>
{% endhighlight %}
## Styles ## Styles
### Push ### Push
@ -54,7 +65,7 @@ The default behavior is for content to be pushed.
</ul> </ul>
</div> </div>
</header> </header>
<div id="dw-s1" class="mdb-layout-drawer"> <div id="dw-s1" class="mdb-layout-drawer bg-faded">
<header> <header>
<a class="navbar-brand">Title</a> <a class="navbar-brand">Title</a>
</header> </header>
@ -73,7 +84,8 @@ The default behavior is for content to be pushed.
{% endexample %} {% endexample %}
### Overlay ### Overlay
Optional behavior will overlay the drawer and provide a backdrop: Optional behavior will overlay the drawer and provide a backdrop. This can be marked with `mdb-drawer-overlay` to always overlay, or you can use a responsive class such as `mdb-drawer-overlay-md-down`.
{% example html id=drawer-s2 %} {% example html id=drawer-s2 %}
<div class="mdb-layout-container mdb-drawer-f-l mdb-drawer-overlay"> <div class="mdb-layout-container mdb-drawer-f-l mdb-drawer-overlay">
<header class="mdb-layout-header"> <header class="mdb-layout-header">
@ -87,7 +99,7 @@ Optional behavior will overlay the drawer and provide a backdrop:
</ul> </ul>
</div> </div>
</header> </header>
<div id="dw-s2" class="mdb-layout-drawer"> <div id="dw-s2" class="mdb-layout-drawer bg-faded">
<header> <header>
<a class="navbar-brand">Title</a> <a class="navbar-brand">Title</a>
</header> </header>
@ -107,8 +119,6 @@ Optional behavior will overlay the drawer and provide a backdrop:
## Positions ## Positions
### Classes
The following positioning marker classes should be placed on the `mdb-layout-container` element: The following positioning marker classes should be placed on the `mdb-layout-container` element:
<table> <table>
<thead> <thead>
@ -169,7 +179,7 @@ The following positioning marker classes should be placed on the `mdb-layout-con
</ul> </ul>
</div> </div>
</header> </header>
<div id="dw-p1" class="mdb-layout-drawer"> <div id="dw-p1" class="mdb-layout-drawer bg-faded">
<header> <header>
<a class="navbar-brand">Title</a> <a class="navbar-brand">Title</a>
</header> </header>
@ -202,7 +212,7 @@ The following positioning marker classes should be placed on the `mdb-layout-con
</ul> </ul>
</div> </div>
</header> </header>
<div id="dw-p2" class="mdb-layout-drawer"> <div id="dw-p2" class="mdb-layout-drawer bg-faded">
<header> <header>
<a class="navbar-brand">Title</a> <a class="navbar-brand">Title</a>
</header> </header>
@ -235,7 +245,7 @@ The following positioning marker classes should be placed on the `mdb-layout-con
</ul> </ul>
</div> </div>
</header> </header>
<div id="dw-p3" class="mdb-layout-drawer"> <div id="dw-p3" class="mdb-layout-drawer bg-faded">
<header> <header>
<a class="navbar-brand">Title</a> <a class="navbar-brand">Title</a>
</header> </header>
@ -268,7 +278,7 @@ The following positioning marker classes should be placed on the `mdb-layout-con
</ul> </ul>
</div> </div>
</header> </header>
<div id="dw-p4" class="mdb-layout-drawer"> <div id="dw-p4" class="mdb-layout-drawer bg-faded">
<header> <header>
<a class="navbar-brand">Title</a> <a class="navbar-brand">Title</a>
</header> </header>
@ -286,20 +296,41 @@ The following positioning marker classes should be placed on the `mdb-layout-con
</div> </div>
{% endexample %} {% endexample %}
## Responsiveness vs Static
### Static
in
out
overlay
### Responsive in
### Responsive overlay
## Customization ## Customization
## Variables ### Variables
Globally, you may alter the size of _x_ vs _y_ drawers with the following variables:
- `$mdb-drawer-x-size`
- `$mdb-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 `mdb-drawer-in-lg-up`:
{% highlight scss %}
.kitchen-sink-drawer {
$custom-size: 500px;
@include mdb-drawer-x-out($custom-size);
&:not(.mdb-drawer-out) {
@each $breakpoint in map-keys($grid-breakpoints) {
@include mdb-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 `mdb-drawer-in`.
{% highlight scss %}
.kitchen-sink-drawer-static {
$custom-size: 500px;
@include mdb-drawer-x-out($custom-size); // closed by default
@include mdb-drawer-x-in($custom-size); // triggered with mdb-drawer-in
@include mdb-drawer-x-overlay(); // overlay by default, no other classes necessary
}
{% endhighlight %}
## Using mixins

47
scss/_drawer.scss
View File

@ -13,8 +13,8 @@
overflow: visible; overflow: visible;
overflow-y: auto; overflow-y: auto;
font-size: .875rem; font-size: .875rem;
color: $mdb-layout-drawer-text-color; //color: $mdb-layout-drawer-text-color;
background: $mdb-layout-drawer-bg-color; //background: $mdb-layout-drawer-bg-color;
// Transform offscreen. // Transform offscreen.
transition: transform; transition: transform;
@ -57,10 +57,10 @@
// Sizing and positioning below here // Sizing and positioning below here
// for left or right drawers, setup widths, heights and positions // for left or right drawers, setup widths, heights and positions
@include mdb-drawer-x-out($mdb-layout-drawer-x-size); @include mdb-drawer-x-out($mdb-drawer-x-size);
// for top or bottom drawers, setup widths, heights and positions // for top or bottom drawers, setup widths, heights and positions
@include mdb-drawer-y-out($mdb-layout-drawer-y-size); @include mdb-drawer-y-out($mdb-drawer-y-size);
// Marker class for both triggering the opening of the drawer (i.e. javascript #addClass('.mdb-drawer-in')), as well // Marker class for both triggering the opening of the drawer (i.e. javascript #addClass('.mdb-drawer-in')), as well
// as responsive sizes (i.e. mdb-drawer-in-md will open once the browser is wider than 768px). // as responsive sizes (i.e. mdb-drawer-in-md will open once the browser is wider than 768px).
@ -89,42 +89,33 @@
:not(.mdb-drawer-out) { // first eliminate positioning or sizing rules if the drawer is already forced closed :not(.mdb-drawer-out) { // first eliminate positioning or sizing rules if the drawer is already forced closed
@each $breakpoint in map-keys($grid-breakpoints) { @each $breakpoint in map-keys($grid-breakpoints) {
@include mdb-drawer-x-in-up($mdb-layout-drawer-x-size, $breakpoint); @include mdb-drawer-x-in-up($mdb-drawer-x-size, $breakpoint);
@include mdb-drawer-y-in-up($mdb-layout-drawer-y-size, $breakpoint); @include mdb-drawer-y-in-up($mdb-drawer-y-size, $breakpoint);
@include mdb-drawer-x-overlay-down($breakpoint); @include mdb-drawer-x-overlay-down($breakpoint);
@include mdb-drawer-y-overlay-down($breakpoint); @include mdb-drawer-y-overlay-down($breakpoint);
} }
} }
//---- ////----
// Example 1: creates a media responsive kitchen-sink-drawer that pairs with mdb-drawer-in-lg and allows for the mdb-drawer-in trigger //// Example 1: creates a media responsive kitchen-sink-drawer that pairs with mdb-drawer-in-lg and allows for the mdb-drawer-in trigger
//
// Used with <div class="mdb-layout-container mdb-drawer-f-l mdb-drawer-overlay-md-down mdb-drawer-in-lg-up kitchen-sink-drawer">
//
//.kitchen-sink-drawer { //.kitchen-sink-drawer {
// @include mdb-drawer-x-out(500px); // $custom-size: 500px;
// // @include mdb-drawer-x-out($custom-size);
// &:not(.mdb-drawer-out) { // &:not(.mdb-drawer-out) {
// @each $breakpoint in (xs lg) { // @each $breakpoint in map-keys($grid-breakpoints) {
// // xs gives us the static marker class i.e. mdb-drawer-in, while lg gives us a responsive open/overlay // @include mdb-drawer-x-in-up($custom-size, $breakpoint);
// @include mdb-drawer-x-in-up(500px, $breakpoint);
// } // }
// } // }
//} //}
// // Create a responsive overlay at mdb-drawer-overlay-md-down - this specificity is required
// @include mdb-drawer-x-overlay-down(md);
//}
// //
//---- ////
// Example 2: creates a NON-responsive kitchen-sink-drawer and allows for the mdb-drawer-in trigger ////----
// //// Example 2: creates a NON-responsive kitchen-sink-drawer and allows for the mdb-drawer-in trigger
// Used with <div class="mdb-layout-container mdb-drawer-f-l mdb-drawer-in kitchen-sink-drawer-triggered"> //.kitchen-sink-drawer-static {
// // $custom-size: 500px;
//.kitchen-sink-drawer-triggered { // @include mdb-drawer-x-out($custom-size); // closed by default
// @include mdb-drawer-x-out(500px); // closed by default // @include mdb-drawer-x-in($custom-size); // triggered with mdb-drawer-in
// @include mdb-drawer-x-in(500px); // triggered with mdb-drawer-in
// @include mdb-drawer-x-overlay(); // overlay by default, no other classes necessary // @include mdb-drawer-x-overlay(); // overlay by default, no other classes necessary
//} //}

27
scss/mixins/_drawer.scss
View File

@ -1,31 +1,4 @@
// Mixins to allow creation of additional custom drawer sizes when using the defaults at the same time // Mixins to allow creation of additional custom drawer sizes when using the defaults at the same time
//
//----
// Example 1: creates a media responsive kitchen-sink-drawer that pairs with mdb-drawer-in-lg and allows for the mdb-drawer-in trigger
//
// Used with <div class="mdb-layout-container mdb-drawer-f-l mdb-drawer-overlay-md-down mdb-drawer-in-lg-up kitchen-sink-drawer">
//
//.kitchen-sink-drawer:not(.mdb-drawer-out) {
// @each $breakpoint in (xs lg) {
// // xs gives us the static marker class i.e. mdb-drawer-in, while lg gives us a responsive open/overlay
// @include mdb-drawer-x-out(500px);
// @include mdb-drawer-x-in-up(500px, $breakpoint);
// }
// // Create a responsive overlay at mdb-drawer-overlay-md-down - this specificity is required
// @include mdb-drawer-x-overlay-down(md);
//}
//
//----
// Example 2: creates a NON-responsive kitchen-sink-drawer and allows for the mdb-drawer-in trigger
//
// Used with <div class="mdb-layout-container mdb-drawer-f-l mdb-drawer-in kitchen-sink-drawer-triggered">
//
//.kitchen-sink-drawer-triggered {
// @include mdb-drawer-x-out(500px); // closed by default
// @include mdb-drawer-x-in(500px); // triggered with mdb-drawer-in
// @include mdb-drawer-x-overlay(); // overlay by default, no other classes necessary
//}
@mixin mdb-drawer-x-out($size) { @mixin mdb-drawer-x-out($size) {
@each $side, $abbrev in (left: l, right: r) { @each $side, $abbrev in (left: l, right: r) {

7
scss/variables/_drawer.scss
View File

@ -1,8 +1,5 @@
// Drawer // Drawer
// FIXME: review and integrate other variables from nav or something instead of these
$mdb-layout-drawer-bg-color: rgba($grey-50, 1) !default;
$mdb-layout-drawer-text-color: rgba($grey-800, 1) !default;
// Sizing // Sizing
$mdb-layout-drawer-x-size: 240px !default; $mdb-drawer-x-size: 240px !default;
$mdb-layout-drawer-y-size: 100px !default; $mdb-drawer-y-size: 100px !default;