mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2025-02-09 08:10:39 +03:00
#950 - refine samples and move dropdowns to btn-group for more consistent alignment - see twbs/bootstrap#18852
This commit is contained in:
Kevin Ross
parent
72f612fda6
commit
d3253dd10e
|
|
@ -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">
|
||||
<i class="material-icons">more_vert</i>
|
||||
</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 disabled" 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
|
||||
{% 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">
|
||||
<i class="material-icons">more_vert</i>
|
||||
</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 disabled" href="#">Disabled 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
|
||||
{% 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">
|
||||
<i class="material-icons">more_vert</i>
|
||||
</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">Another action</button>
|
||||
</div>
|
||||
|
|
@ -56,11 +56,11 @@ Bootstrap users know these as [dropdowns]({{ site.baseurl }}/components/dropdown
|
|||
|
||||
### Default fab
|
||||
{% 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">
|
||||
<i class="material-icons">more_vert</i>
|
||||
</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">Another action</button>
|
||||
</div>
|
||||
|
|
@ -70,7 +70,7 @@ Bootstrap users know these as [dropdowns]({{ site.baseurl }}/components/dropdown
|
|||
|
||||
### Default button
|
||||
{% 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">
|
||||
Dropdown
|
||||
</button>
|
||||
|
|
@ -87,11 +87,11 @@ Bootstrap users know these as [dropdowns]({{ site.baseurl }}/components/dropdown
|
|||
|
||||
### Lower left side
|
||||
{% 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">
|
||||
<i class="material-icons">more_vert</i>
|
||||
</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">Another 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 %}
|
||||
|
||||
### 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 %}
|
||||
<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">
|
||||
|
|
@ -118,12 +120,28 @@ Bootstrap users know these as [dropdowns]({{ site.baseurl }}/components/dropdown
|
|||
{% 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
|
||||
|
||||
### Minimum width
|
||||
|
||||
{% 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">
|
||||
<i class="material-icons">more_vert</i>
|
||||
</button>
|
||||
|
|
@ -138,7 +156,7 @@ Bootstrap users know these as [dropdowns]({{ site.baseurl }}/components/dropdown
|
|||
### Maximum width
|
||||
|
||||
{% 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">
|
||||
<i class="material-icons">more_vert</i>
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
//}
|
||||
@mixin menu-bottom-left {
|
||||
top: 100%;
|
||||
left: 0;
|
||||
transform-origin: 0 0;
|
||||
}
|
||||
|
||||
@mixin menu-bottom-right {
|
||||
right: 0;
|
||||
left: auto;
|
||||
transform-origin: 100% 0;
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
display: block; // utilize transition transform instead of flipping display
|
||||
|
|
@ -29,19 +29,18 @@
|
|||
transform: scale(1);
|
||||
}
|
||||
|
||||
// Default the alignment on the button to bottom right
|
||||
//@extend %menu-bottom-right;
|
||||
// Default the alignment of the dropdown to originate on the bottom right of the button
|
||||
@include 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 {
|
||||
// @extend %menu-bottom-right;
|
||||
//}
|
||||
//
|
||||
&.dropdown-menu-left {
|
||||
@include menu-bottom-left();
|
||||
}
|
||||
|
||||
&.dropdown-menu-right {
|
||||
@include 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
|
||||
|
|
@ -89,39 +88,39 @@
|
|||
}
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
|
||||
.dropdown-toggle {
|
||||
// this could be in a .btn-group or .dropdown
|
||||
.dropdown-toggle {
|
||||
|
||||
&.bmd-btn-icon,
|
||||
&.bmd-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
|
||||
}
|
||||
}
|
||||
&.bmd-btn-icon,
|
||||
&.bmd-btn-fab {
|
||||
// remove the dropdown icon
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.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;
|
||||
~ .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-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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user