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

reduce menu varieties, leave placement unaltered.

Browse Source
This commit is contained in:
Kevin Ross 2016-03-28 13:30:21 -05:00
parent 91dcb8acf0
commit 72f612fda6
2 changed files with 47 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -13,58 +13,63 @@ Bootstrap users know these as [dropdowns]({{ site.baseurl }}/components/dropdown
## Styles ## Styles
### Icon with buttons
{% example html %} {% example html %}
<!-- icon with buttons -->
<div class="dropdown"> <div class="dropdown">
<button class="btn bmd-btn-icon dropdown-toggle" type="button" id="ex1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <button class="btn bmd-btn-icon 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>.bmd-btn-icon</code> with menu buttons
<div class="dropdown-menu" aria-labelledby="ex1"> <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 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>
{% endexample %}
<!-- icon with links --> ### Icon with links
{% example html %}
<div class="dropdown"> <div class="dropdown">
<button class="btn bmd-btn-icon dropdown-toggle" type="button" id="ex2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <button class="btn bmd-btn-icon dropdown-toggle" type="button" id="ex2" 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>.bmd-btn-icon</code> with menu links
<div class="dropdown-menu" aria-labelledby="ex2"> <div class="dropdown-menu" aria-labelledby="ex2">
<a class="dropdown-item" href="#">Regular link</a> <a class="dropdown-item" href="#">Regular link</a>
<a class="dropdown-item disabled" href="#">Disabled link</a> <a class="dropdown-item disabled" href="#">Disabled link</a>
<a class="dropdown-item" href="#">Another link</a> <a class="dropdown-item" href="#">Another link</a>
</div> </div>
</div> </div>
{% endexample %}
<!-- fab-sm --> ### Small fab
{% example html %}
<div class="dropdown"> <div class="dropdown">
<button class="btn bmd-btn-fab bmd-btn-fab-sm dropdown-toggle" type="button" id="ex3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <button class="btn bmd-btn-fab bmd-btn-fab-sm 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>.bmd-btn-fab-sm</code>
<div class="dropdown-menu" aria-labelledby="ex3"> <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>
</div> </div>
{% endexample %}
<!-- fab --> ### Default fab
{% example html %}
<div class="dropdown"> <div class="dropdown">
<button class="btn bmd-btn-fab dropdown-toggle" type="button" id="ex4" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <button class="btn bmd-btn-fab 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>.bmd-btn-fab</code>
<div class="dropdown-menu" aria-labelledby="ex4"> <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 --> {% endexample %}
### Default button
{% example html %}
<div class="dropdown open"> <div class="dropdown open">
<button class="btn dropdown-toggle" type="button" id="buttonMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <button class="btn dropdown-toggle" type="button" id="buttonMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown Dropdown
@ -112,39 +117,6 @@ Bootstrap users know these as [dropdowns]({{ site.baseurl }}/components/dropdown
</div> </div>
{% endexample %} {% endexample %}
### Top left side
{% example html %}
<div class="dropdown open">
<button class="btn bmd-btn-icon dropdown-toggle" type="button" id="tl1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="material-icons">more_vert</i>
</button>
<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">Another action</button>
<button class="dropdown-item disabled" type="button">Disabled action</button>
<div class="dropdown-divider"> </div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
{% endexample %}
### Top right side
{% example html %}
<div class="dropdown open pull-xs-right">
<button class="btn bmd-btn-icon dropdown-toggle" type="button" id="tr1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="material-icons">more_vert</i>
</button>
<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">Another action</button>
<button class="dropdown-item disabled" type="button">Disabled action</button>
<div class="dropdown-divider"> </div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
{% endexample %}
## Widths ## Widths

64
scss/_dropdown.scss
View File

@ -1,17 +1,17 @@
// 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
%menu-bottom-left { //%menu-bottom-left {
top: 100%; // top: 100%;
left: 0; // left: 0;
transform-origin: 0 0; // transform-origin: 0 0;
} //}
//
%menu-bottom-right { //%menu-bottom-right {
right: 0; // right: 0;
left: auto; // left: auto;
transform-origin: 100% 0; // transform-origin: 100% 0;
} //}
.dropdown-menu { .dropdown-menu {
display: block; // utilize transition transform instead of flipping display display: block; // utilize transition transform instead of flipping display
@ -34,27 +34,27 @@
// FIXME: bootstrap alignment issue - https://github.com/twbs/bootstrap/issues/18852 // 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 // FIXME: once the bug is fixed, want to default origin of menu open to the right of standard buttons
&.dropdown-menu-left { //&.dropdown-menu-left {
@extend %menu-bottom-left; // @extend %menu-bottom-left;
} //}
//
&.dropdown-menu-right { //&.dropdown-menu-right {
@extend %menu-bottom-right; // @extend %menu-bottom-right;
} //}
//
&.dropdown-menu-top-left { //&.dropdown-menu-top-left {
top: auto; // top: auto;
bottom: 0; // needs to be overridden with the toggle-button height, see bmd-btn-icon above // bottom: 0; // needs to be overridden with the toggle-button height, see bmd-btn-icon above
transform-origin: 0 100%; // transform-origin: 0 100%;
} //}
//
&.dropdown-menu-top-right { //&.dropdown-menu-top-right {
top: auto; // top: auto;
right: 0; // right: 0;
bottom: 0; // needs to be overridden with the toggle-button height, see bmd-btn-icon above // bottom: 0; // needs to be overridden with the toggle-button height, see bmd-btn-icon above
left: auto; // left: auto;
transform-origin: 100% 100%; // transform-origin: 100% 100%;
} //}
// https://www.google.com/design/spec/components/menus.html#menus-specs // https://www.google.com/design/spec/components/menus.html#menus-specs
.dropdown-item { .dropdown-item {