mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2024-11-14 05:37:01 +03:00
Code Issues Packages Projects Releases Wiki Activity

Resolves #815. Initial implementation of menus is complete.

Browse Source
This commit is contained in:
Kevin Ross 2016-01-11 17:13:01 -06:00
parent e75ede0fca
commit 944b5be391
6 changed files with 118 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
docs/material-design/menus.md
View File

@ -4,35 +4,49 @@ title: Menus
group: material-design group: material-design
--- ---
Bootstrap users know these as [dropdowns]({{ site.baseurl }}/components/dropdowns/), but these are also known as menus in the [Material Design specification](https://www.google.com/design/spec/components/menus.html#menus-specs).
## Contents ## Contents
* Will be replaced with the ToC, excluding the "Contents" header * Will be replaced with the ToC, excluding the "Contents" header
{:toc} {:toc}
Bootstrap users know these as [dropdowns]({{ site.baseurl }}/components/dropdowns/), but these are also known as menus in the [Material Design specification](https://www.google.com/design/spec/components/menus.html#menus-specs).
## Styles ## Styles
{% example html %} {% example html %}
<!-- icon --> <!-- icon with buttons -->
<div class="dropdown"> <div class="dropdown">
<button class="btn mdb-btn-icon btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <button class="btn mdb-btn-icon btn-secondary dropdown-toggle" type="button" id="ex1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="material-icons">more_vert</i> <i class="material-icons">more_vert</i>
</button> </button>
An <code>.mdb-btn-icon</code> An <code>.mdb-btn-icon</code> with menu buttons
<div class="dropdown-menu" aria-labelledby="dropdownMenu2"> <div class="dropdown-menu" aria-labelledby="ex1">
<button class="dropdown-item" type="button">Action</button> <button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item disabled" type="button">Another action</button>
<button class="dropdown-item" type="button">Another action</button> <button class="dropdown-item" type="button">Another action</button>
</div> </div>
</div> </div>
<!-- icon with links -->
<div class="dropdown">
<button class="btn mdb-btn-icon btn-secondary dropdown-toggle" type="button" id="ex2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="material-icons">more_vert</i>
</button>
An <code>.mdb-btn-icon</code> with menu links
<div class="dropdown-menu" aria-labelledby="ex2">
<a class="dropdown-item" href="#">Regular link</a>
<a class="dropdown-item disabled" href="#">Disabled link</a>
<a class="dropdown-item" href="#">Another link</a>
</div>
</div>
<!-- fab-sm --> <!-- fab-sm -->
<div class="dropdown"> <div class="dropdown">
<button class="btn mdb-btn-fab mdb-btn-fab-sm btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <button class="btn mdb-btn-fab mdb-btn-fab-sm btn-secondary dropdown-toggle" type="button" id="ex3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="material-icons">more_vert</i> <i class="material-icons">more_vert</i>
</button> </button>
An <code>.mdb-btn-fab-sm</code> An <code>.mdb-btn-fab-sm</code>
<div class="dropdown-menu" aria-labelledby="dropdownMenu2"> <div class="dropdown-menu" aria-labelledby="ex3">
<button class="dropdown-item" type="button">Action</button> <button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button> <button class="dropdown-item" type="button">Another action</button>
</div> </div>
@ -40,15 +54,27 @@ Bootstrap users know these as [dropdowns]({{ site.baseurl }}/components/dropdown
<!-- fab --> <!-- fab -->
<div class="dropdown"> <div class="dropdown">
<button class="btn mdb-btn-fab btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <button class="btn mdb-btn-fab btn-secondary dropdown-toggle" type="button" id="ex4" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="material-icons">more_vert</i> <i class="material-icons">more_vert</i>
</button> </button>
An <code>.mdb-btn-fab</code> An <code>.mdb-btn-fab</code>
<div class="dropdown-menu" aria-labelledby="dropdownMenu2"> <div class="dropdown-menu" aria-labelledby="ex4">
<button class="dropdown-item" type="button">Action</button> <button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button> <button class="dropdown-item" type="button">Another action</button>
</div> </div>
</div> </div>
<!-- default btn -->
<div class="dropdown open">
<button class="btn btn-secondary dropdown-toggle" type="button" id="buttonMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</button>
<div class="dropdown-menu" aria-labelledby="buttonMenu1">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
{% endexample %} {% endexample %}
@ -57,13 +83,13 @@ Bootstrap users know these as [dropdowns]({{ site.baseurl }}/components/dropdown
### Lower left side ### Lower left side
{% example html %} {% example html %}
<div class="dropdown open"> <div class="dropdown open">
<button class="btn mdb-btn-icon btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <button class="btn mdb-btn-icon btn-secondary dropdown-toggle" type="button" id="ll1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="material-icons">more_vert</i> <i class="material-icons">more_vert</i>
</button> </button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu2"> <div class="dropdown-menu" aria-labelledby="ll1">
<button class="dropdown-item" type="button">Action</button> <button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button> <button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button disabled">Disabled action</button> <button class="dropdown-item disabled" type="button">Disabled action</button>
<div class="dropdown-divider"> </div> <div class="dropdown-divider"> </div>
<a class="dropdown-item" href="#">Separated link</a> <a class="dropdown-item" href="#">Separated link</a>
</div> </div>
@ -73,13 +99,13 @@ Bootstrap users know these as [dropdowns]({{ site.baseurl }}/components/dropdown
### Lower right side ### Lower right side
{% example html %} {% example html %}
<div class="dropdown open pull-xs-right"> <div class="dropdown open pull-xs-right">
<button class="btn mdb-btn-icon btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <button class="btn mdb-btn-icon btn-secondary dropdown-toggle" type="button" id="lr1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="material-icons">more_vert</i> <i class="material-icons">more_vert</i>
</button> </button>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenu2"> <div class="dropdown-menu dropdown-menu-right" aria-labelledby="lr1">
<button class="dropdown-item" type="button">Action</button> <button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button> <button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button disabled">Disabled action</button> <button class="dropdown-item disabled" type="button">Disabled action</button>
<div class="dropdown-divider"> </div> <div class="dropdown-divider"> </div>
<a class="dropdown-item" href="#">Separated link</a> <a class="dropdown-item" href="#">Separated link</a>
</div> </div>
@ -89,13 +115,13 @@ Bootstrap users know these as [dropdowns]({{ site.baseurl }}/components/dropdown
### Top left side ### Top left side
{% example html %} {% example html %}
<div class="dropdown open"> <div class="dropdown open">
<button class="btn mdb-btn-icon btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <button class="btn mdb-btn-icon btn-secondary dropdown-toggle" type="button" id="tl1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="material-icons">more_vert</i> <i class="material-icons">more_vert</i>
</button> </button>
<div class="dropdown-menu dropdown-menu-top-left" aria-labelledby="dropdownMenu2"> <div class="dropdown-menu dropdown-menu-top-left" aria-labelledby="tl1">
<button class="dropdown-item" type="button">Action</button> <button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button> <button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button disabled">Disabled action</button> <button class="dropdown-item disabled" type="button">Disabled action</button>
<div class="dropdown-divider"> </div> <div class="dropdown-divider"> </div>
<a class="dropdown-item" href="#">Separated link</a> <a class="dropdown-item" href="#">Separated link</a>
</div> </div>
@ -105,13 +131,13 @@ Bootstrap users know these as [dropdowns]({{ site.baseurl }}/components/dropdown
### Top right side ### Top right side
{% example html %} {% example html %}
<div class="dropdown open pull-xs-right"> <div class="dropdown open pull-xs-right">
<button class="btn mdb-btn-icon btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <button class="btn mdb-btn-icon btn-secondary dropdown-toggle" type="button" id="tr1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="material-icons">more_vert</i> <i class="material-icons">more_vert</i>
</button> </button>
<div class="dropdown-menu dropdown-menu-top-right" aria-labelledby="dropdownMenu2"> <div class="dropdown-menu dropdown-menu-top-right" aria-labelledby="tr1">
<button class="dropdown-item" type="button">Action</button> <button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button> <button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button disabled">Disabled action</button> <button class="dropdown-item disabled" type="button">Disabled action</button>
<div class="dropdown-divider"> </div> <div class="dropdown-divider"> </div>
<a class="dropdown-item" href="#">Separated link</a> <a class="dropdown-item" href="#">Separated link</a>
</div> </div>
@ -126,10 +152,10 @@ Bootstrap users know these as [dropdowns]({{ site.baseurl }}/components/dropdown
{% example html %} {% example html %}
<div class="dropdown open pull-xs-right"> <div class="dropdown open pull-xs-right">
<button class="btn mdb-btn-icon btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <button class="btn mdb-btn-icon btn-secondary dropdown-toggle" type="button" id="mw1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="material-icons">more_vert</i> <i class="material-icons">more_vert</i>
</button> </button>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenu2"> <div class="dropdown-menu dropdown-menu-right" aria-labelledby="mw1">
<button class="dropdown-item" type="button">A</button> <button class="dropdown-item" type="button">A</button>
<button class="dropdown-item" type="button">B</button> <button class="dropdown-item" type="button">B</button>
</div> </div>
@ -141,10 +167,10 @@ Bootstrap users know these as [dropdowns]({{ site.baseurl }}/components/dropdown
{% example html %} {% example html %}
<div class="dropdown open pull-xs-right"> <div class="dropdown open pull-xs-right">
<button class="btn mdb-btn-icon btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <button class="btn mdb-btn-icon btn-secondary dropdown-toggle" type="button" id="mw2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="material-icons">more_vert</i> <i class="material-icons">more_vert</i>
</button> </button>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenu2"> <div class="dropdown-menu dropdown-menu-right" aria-labelledby="mw2">
<button class="dropdown-item" type="button">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ut malesuada elit. Proin tristique, lorem eu vehicula congue, lectus ipsum porta quam, eget rutrum sapien turpis et libero.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ut malesuada elit. Proin tristique, lorem eu vehicula congue, lectus ipsum porta quam, eget rutrum sapien turpis et libero.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ut malesuada elit. Proin tristique, lorem eu vehicula congue, lectus ipsum porta quam, eget rutrum sapien turpis et libero.</button> <button class="dropdown-item" type="button">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ut malesuada elit. Proin tristique, lorem eu vehicula congue, lectus ipsum porta quam, eget rutrum sapien turpis et libero.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ut malesuada elit. Proin tristique, lorem eu vehicula congue, lectus ipsum porta quam, eget rutrum sapien turpis et libero.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ut malesuada elit. Proin tristique, lorem eu vehicula congue, lectus ipsum porta quam, eget rutrum sapien turpis et libero.</button>
<button class="dropdown-item" type="button">Another action</button> <button class="dropdown-item" type="button">Another action</button>
</div> </div>

99
scss/_menu.scss
View File

@ -1,42 +1,16 @@
// Menus https://www.google.com/design/spec/components/menus.html#menus-specs // Menus https://www.google.com/design/spec/components/menus.html#menus-specs
// Dropdown buttons (mobile and desktop) https://www.google.com/design/spec/components/buttons.html#buttons-dropdown-buttons // Dropdown buttons (mobile and desktop) https://www.google.com/design/spec/components/buttons.html#buttons-dropdown-buttons
.dropdown { %menu-bottom-left {
top: 100%;
left: 0;
transform-origin: 0 0;
}
.dropdown-toggle { %menu-bottom-right {
right: 0;
&.mdb-btn-icon, left: auto;
&.mdb-btn-fab { transform-origin: 100% 0;
// remove the dropdown icon
&::after {
display: none;
}
~ .dropdown-menu {
&.dropdown-menu-top-left,
&.dropdown-menu-top-right {
bottom: $mdb-btn-icon-size; // push up the bottom of the menu the height of the button
}
}
}
&.mdb-btn-fab-sm {
~ .dropdown-menu {
&.dropdown-menu-top-left,
&.dropdown-menu-top-right {
bottom: $mdb-btn-fab-size-sm; // push up the bottom of the menu the height of the button
}
}
}
&.mdb-btn-icon {
~ .dropdown-menu {
// collapse some spacing
margin: 0;
}
}
}
} }
.dropdown-menu { .dropdown-menu {
@ -45,7 +19,7 @@
padding: .5rem 0; padding: .5rem 0;
border: 0; border: 0;
opacity: 0; opacity: 0;
transition: transform $menu-expand-duration $mdb-animation-curve-default, opacity $menu-fade-duration $mdb-animation-curve-default; transition: transform $mdb-menu-expand-duration $mdb-animation-curve-default, opacity $mdb-menu-fade-duration $mdb-animation-curve-default;
transform: scale(0); transform: scale(0);
transform-origin: 0 0; transform-origin: 0 0;
will-change: transform; will-change: transform;
@ -57,10 +31,17 @@
transform: scale(1); transform: scale(1);
} }
// Default the alignment on the button to bottom right
//@extend %menu-bottom-right;
// FIXME: bootstrap alignment issue - https://github.com/twbs/bootstrap/issues/18852
// FIXME: once the bug is fixed, want to default origin of menu open to the right of standard buttons
&.dropdown-menu-left {
@extend %menu-bottom-left;
}
&.dropdown-menu-right { &.dropdown-menu-right {
right: 0; @extend %menu-bottom-right;
left: auto;
transform-origin: 100% 0;
} }
&.dropdown-menu-top-left { &.dropdown-menu-top-left {
@ -122,3 +103,43 @@
// } // }
// } // }
} }
.dropdown {
.dropdown-toggle {
&.mdb-btn-icon,
&.mdb-btn-fab {
// remove the dropdown icon
&::after {
display: none;
}
~ .dropdown-menu {
&.dropdown-menu-top-left,
&.dropdown-menu-top-right {
bottom: $mdb-btn-icon-size; // push up the bottom of the menu the height of the button
}
}
}
&.mdb-btn-fab-sm {
~ .dropdown-menu {
&.dropdown-menu-top-left,
&.dropdown-menu-top-right {
bottom: $mdb-btn-fab-size-sm; // push up the bottom of the menu the height of the button
}
}
}
&.mdb-btn-icon {
~ .dropdown-menu {
// collapse some spacing
margin: 0;
}
}
}
// Default align button menus on the right
}

1
scss/_plugins.scss
View File

@ -2,4 +2,3 @@
@import "plugins/plugin-snackbarjs"; @import "plugins/plugin-snackbarjs";
@import "plugins/plugin-nouislider"; @import "plugins/plugin-nouislider";
@import "plugins/plugin-selectize"; @import "plugins/plugin-selectize";
@import "plugins/plugin-dropdownjs";

4
scss/_variables.scss
View File

@ -136,7 +136,3 @@ $mdb-animation-curve-linear-out-slow-in: cubic-bezier(0, 0, 0.2, 1) !default;
$mdb-animation-curve-fast-out-linear-in: cubic-bezier(0.4, 0, 1, 1) !default; $mdb-animation-curve-fast-out-linear-in: cubic-bezier(0.4, 0, 1, 1) !default;
$mdb-animation-curve-default: $mdb-animation-curve-fast-out-slow-in !default; $mdb-animation-curve-default: $mdb-animation-curve-fast-out-slow-in !default;
// Menu
$menu-expand-duration: 0.3s !default;
$menu-fade-duration: 0.2s !default;

14
scss/plugins/_plugin-dropdownjs.scss
View File

@ -1,14 +0,0 @@
.dropdownjs::after {
position: absolute;
top: 3px;
right: 5px;
font-family: "Material Icons";
font-size: 25px;
font-style: normal;
font-weight: 400;
color: #757575;
pointer-events: none;
// bring in the material icon font and icon by code
content: "\e5c5"; // found here: https://github.com/google/material-design-icons/search?utf8=%E2%9C%93&q=arrow_drop_down
}

6
scss/variables/_menu.scss
View File

@ -15,3 +15,9 @@ $mdb-menu-item-padding-right-md: 1.5rem !default;
$mdb-menu-item-padding-left-md: 1.5rem !default; $mdb-menu-item-padding-left-md: 1.5rem !default;
// Menu
$mdb-menu-expand-duration: 0.3s !default;
$mdb-menu-fade-duration: 0.2s !default;