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

#950 - refine samples and move dropdowns to btn-group for more consistent alignment - see twbs/bootstrap#18852

Browse Source
This commit is contained in:
Kevin Ross 2016-03-28 14:46:33 -05:00
parent 72f612fda6
commit d3253dd10e
2 changed files with 79 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -19,7 +19,7 @@ Bootstrap users know these as [dropdowns]({{ site.baseurl }}/components/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>
<div class="dropdown-menu" aria-labelledby="ex1"> <div class="dropdown-menu dropdown-menu-left" 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>
@ -29,11 +29,11 @@ Bootstrap users know these as [dropdowns]({{ site.baseurl }}/components/dropdown
### Icon with links ### Icon with links
{% example html %} {% example html %}
<div class="dropdown"> <div class="btn-group">
<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>
<div class="dropdown-menu" aria-labelledby="ex2"> <div class="dropdown-menu dropdown-menu-left" 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>
@ -43,11 +43,11 @@ Bootstrap users know these as [dropdowns]({{ site.baseurl }}/components/dropdown
### Small fab ### Small fab
{% example html %} {% example html %}
<div class="dropdown"> <div class="btn-group">
<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>
<div class="dropdown-menu" aria-labelledby="ex3"> <div class="dropdown-menu dropdown-menu-left" 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>
@ -56,11 +56,11 @@ Bootstrap users know these as [dropdowns]({{ site.baseurl }}/components/dropdown
### Default fab ### Default fab
{% example html %} {% example html %}
<div class="dropdown"> <div class="btn-group">
<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>
<div class="dropdown-menu" aria-labelledby="ex4"> <div class="dropdown-menu dropdown-menu-left" 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>
@ -70,7 +70,7 @@ Bootstrap users know these as [dropdowns]({{ site.baseurl }}/components/dropdown
### Default button ### Default button
{% example html %} {% example html %}
<div class="dropdown open"> <div class="btn-group 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
</button> </button>
@ -87,11 +87,11 @@ 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="btn-group open">
<button class="btn bmd-btn-icon dropdown-toggle" type="button" id="ll1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <button class="btn bmd-btn-icon 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="ll1"> <div class="dropdown-menu dropdown-menu-left" 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 disabled" type="button">Disabled action</button> <button class="dropdown-item disabled" type="button">Disabled action</button>
@ -102,6 +102,8 @@ Bootstrap users know these as [dropdowns]({{ site.baseurl }}/components/dropdown
{% endexample %} {% endexample %}
### Lower right side ### Lower right side
`dropdown` usage misaligned - see [upstream Bootstrap issue #18552](https://github.com/twbs/bootstrap/issues/18852#issuecomment-202524375). Use `btn-group` instead until issue is resolved (next example).
{% example html %} {% example html %}
<div class="dropdown open pull-xs-right"> <div class="dropdown open pull-xs-right">
<button class="btn bmd-btn-icon dropdown-toggle" type="button" id="lr1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <button class="btn bmd-btn-icon dropdown-toggle" type="button" id="lr1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
@ -118,12 +120,28 @@ Bootstrap users know these as [dropdowns]({{ site.baseurl }}/components/dropdown
{% endexample %} {% endexample %}
`btn-group` usage works fine in this alignment.
{% example html %}
<div class="btn-group open pull-xs-right">
<button class="btn bmd-btn-icon dropdown-toggle" type="button" id="lr2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="material-icons">more_vert</i>
</button>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="lr2">
<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
### Minimum width ### Minimum width
{% example html %} {% example html %}
<div class="dropdown open pull-xs-right"> <div class="btn-group open pull-xs-right">
<button class="btn bmd-btn-icon dropdown-toggle" type="button" id="mw1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <button class="btn bmd-btn-icon 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>
@ -138,7 +156,7 @@ Bootstrap users know these as [dropdowns]({{ site.baseurl }}/components/dropdown
### Maximum width ### Maximum width
{% example html %} {% example html %}
<div class="dropdown open pull-xs-right"> <div class="btn-group open pull-xs-right">
<button class="btn bmd-btn-icon dropdown-toggle" type="button" id="mw2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <button class="btn bmd-btn-icon 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>

99
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 { @mixin menu-bottom-left {
// top: 100%; top: 100%;
// left: 0; left: 0;
// transform-origin: 0 0; transform-origin: 0 0;
//} }
//
//%menu-bottom-right { @mixin 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
@ -29,19 +29,18 @@
transform: scale(1); transform: scale(1);
} }
// Default the alignment on the button to bottom right // Default the alignment of the dropdown to originate on the bottom right of the button
//@extend %menu-bottom-right; @include menu-bottom-right();
// 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
//&.dropdown-menu-left { &.dropdown-menu-left {
// @extend %menu-bottom-left; @include menu-bottom-left();
//} }
//
//&.dropdown-menu-right { &.dropdown-menu-right {
// @extend %menu-bottom-right; @include 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
@ -89,39 +88,39 @@
} }
} }
.dropdown {
.dropdown-toggle { // this could be in a .btn-group or .dropdown
.dropdown-toggle {
&.bmd-btn-icon, &.bmd-btn-icon,
&.bmd-btn-fab { &.bmd-btn-fab {
// remove the dropdown icon // remove the dropdown icon
&::after { &::after {
display: none; 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
}
}
} }
&.bmd-btn-fab-sm { ~ .dropdown-menu {
~ .dropdown-menu { &.dropdown-menu-top-left,
&.dropdown-menu-top-left, &.dropdown-menu-top-right {
&.dropdown-menu-top-right { bottom: $mdb-btn-icon-size; // push up the bottom of the menu the height of the button
bottom: $mdb-btn-fab-size-sm; // push up the bottom of the menu the height of the button
}
}
}
&.bmd-btn-icon {
~ .dropdown-menu {
// collapse some spacing
margin: 0;
} }
} }
} }
&.bmd-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
}
}
}
&.bmd-btn-icon {
~ .dropdown-menu {
// collapse some spacing
margin: 0;
}
}
} }