mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2024-11-23 01:57:06 +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

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

@ -13,58 +13,63 @@ Bootstrap users know these as [dropdowns]({{ site.baseurl }}/components/dropdown
## Styles
### Icon with buttons
{% example html %}
<!-- icon with buttons -->
<div class="dropdown">
<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>
</button>
An <code>.bmd-btn-icon</code> with menu buttons
<div class="dropdown-menu" aria-labelledby="ex1">
<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>
</div>
</div>
{% endexample %}
<!-- icon with links -->
### Icon with links
{% example html %}
<div class="dropdown">
<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>
</button>
An <code>.bmd-btn-icon</code> with menu links
</button>
<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>
{% endexample %}
<!-- fab-sm -->
### Small fab
{% example html %}
<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">
<i class="material-icons">more_vert</i>
</button>
An <code>.bmd-btn-fab-sm</code>
<div class="dropdown-menu" aria-labelledby="ex3">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
</div>
</div>
{% endexample %}
<!-- fab -->
### Default fab
{% example html %}
<div class="dropdown">
<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>
</button>
An <code>.bmd-btn-fab</code>
<div class="dropdown-menu" aria-labelledby="ex4">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
</div>
</div>
<!-- default btn -->
{% endexample %}
### Default button
{% example html %}
<div class="dropdown open">
<button class="btn dropdown-toggle" type="button" id="buttonMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
@ -112,39 +117,6 @@ Bootstrap users know these as [dropdowns]({{ site.baseurl }}/components/dropdown
</div>
{% 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

64
scss/_dropdown.scss
View File

@ -1,17 +1,17 @@
// 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
%menu-bottom-left {
top: 100%;
left: 0;
transform-origin: 0 0;
}
%menu-bottom-right {
right: 0;
left: auto;
transform-origin: 100% 0;
}
//%menu-bottom-left {
// top: 100%;
// left: 0;
// transform-origin: 0 0;
//}
//
//%menu-bottom-right {
// right: 0;
// left: auto;
// transform-origin: 100% 0;
//}
.dropdown-menu {
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: 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 {
@extend %menu-bottom-right;
}
&.dropdown-menu-top-left {
top: auto;
bottom: 0; // needs to be overridden with the toggle-button height, see bmd-btn-icon above
transform-origin: 0 100%;
}
&.dropdown-menu-top-right {
top: auto;
right: 0;
bottom: 0; // needs to be overridden with the toggle-button height, see bmd-btn-icon above
left: auto;
transform-origin: 100% 100%;
}
//&.dropdown-menu-left {
// @extend %menu-bottom-left;
//}
//
//&.dropdown-menu-right {
// @extend %menu-bottom-right;
//}
//
//&.dropdown-menu-top-left {
// top: auto;
// bottom: 0; // needs to be overridden with the toggle-button height, see bmd-btn-icon above
// transform-origin: 0 100%;
//}
//
//&.dropdown-menu-top-right {
// top: auto;
// right: 0;
// bottom: 0; // needs to be overridden with the toggle-button height, see bmd-btn-icon above
// left: auto;
// transform-origin: 100% 100%;
//}
// https://www.google.com/design/spec/components/menus.html#menus-specs
.dropdown-item {