mirror of
https://github.com/twbs/bootstrap.git
synced 2024-11-29 11:24:18 +01:00
Add dropright and dropleft (right and left placements for our dropdown) (#23860)
* Add dropright (right placement for our dropdown) * Add dropleft * moves drop left arrow to the left
This commit is contained in:
Johann-S
Mark Otto
parent
b1623c4429
commit
e454c8ec1e
@ -410,6 +410,132 @@ Trigger dropdown menus above elements by adding `.dropup` to the parent element.
|
|||||||
</div>
|
</div>
|
||||||
{% endhighlight %}
|
{% endhighlight %}
|
||||||
|
|
||||||
|
## Dropright variation
|
||||||
|
|
||||||
|
Trigger dropdown menus at the right of the elements by adding `.dropright` to the parent element.
|
||||||
|
|
||||||
|
<div class="bd-example">
|
||||||
|
<div class="btn-group dropright">
|
||||||
|
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||||
|
Dropright
|
||||||
|
</button>
|
||||||
|
<div class="dropdown-menu">
|
||||||
|
<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 class="dropdown-divider"></div>
|
||||||
|
<a class="dropdown-item" href="#">Separated link</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="btn-group dropright">
|
||||||
|
<button type="button" class="btn btn-secondary">
|
||||||
|
Split dropright
|
||||||
|
</button>
|
||||||
|
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||||
|
<span class="sr-only">Toggle Dropdright</span>
|
||||||
|
</button>
|
||||||
|
<div class="dropdown-menu">
|
||||||
|
<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 class="dropdown-divider"></div>
|
||||||
|
<a class="dropdown-item" href="#">Separated link</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% highlight html %}
|
||||||
|
<!-- Default dropright button -->
|
||||||
|
<div class="btn-group dropright">
|
||||||
|
<button type="button" class="btn btn-secondary">Dropright</button>
|
||||||
|
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||||
|
<span class="sr-only">Toggle Dropright</span>
|
||||||
|
</button>
|
||||||
|
<div class="dropdown-menu">
|
||||||
|
<!-- Dropdown menu links -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Split dropright button -->
|
||||||
|
<div class="btn-group dropright">
|
||||||
|
<button type="button" class="btn btn-secondary">
|
||||||
|
Split dropright
|
||||||
|
</button>
|
||||||
|
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||||
|
<span class="sr-only">Toggle Dropright</span>
|
||||||
|
</button>
|
||||||
|
<div class="dropdown-menu">
|
||||||
|
<!-- Dropdown menu links -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
|
## Dropleft variation
|
||||||
|
|
||||||
|
Trigger dropdown menus at the left of the elements by adding `.dropleft` to the parent element.
|
||||||
|
|
||||||
|
<div class="bd-example">
|
||||||
|
<div class="btn-group dropleft">
|
||||||
|
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||||
|
Dropleft
|
||||||
|
</button>
|
||||||
|
<div class="dropdown-menu">
|
||||||
|
<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 class="dropdown-divider"></div>
|
||||||
|
<a class="dropdown-item" href="#">Separated link</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="btn-group">
|
||||||
|
<div class="btn-group dropleft" role="group">
|
||||||
|
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||||
|
<span class="sr-only">Toggle Dropleft</span>
|
||||||
|
</button>
|
||||||
|
<div class="dropdown-menu">
|
||||||
|
<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 class="dropdown-divider"></div>
|
||||||
|
<a class="dropdown-item" href="#">Separated link</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button type="button" class="btn btn-secondary">
|
||||||
|
Split dropleft
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% highlight html %}
|
||||||
|
<!-- Default dropleft button -->
|
||||||
|
<div class="btn-group dropleft">
|
||||||
|
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||||
|
Dropleft
|
||||||
|
</button>
|
||||||
|
<div class="dropdown-menu">
|
||||||
|
<!-- Dropdown menu links -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Split dropleft button -->
|
||||||
|
<div class="btn-group">
|
||||||
|
<div class="btn-group dropleft" role="group">
|
||||||
|
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||||
|
<span class="sr-only">Toggle Dropleft</span>
|
||||||
|
</button>
|
||||||
|
<div class="dropdown-menu">
|
||||||
|
<!-- Dropdown menu links -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button type="button" class="btn btn-secondary">
|
||||||
|
Split dropleft
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
|
|
||||||
## Menu items
|
## Menu items
|
||||||
|
|
||||||
Historically dropdown menu contents *had* to be links, but that's no longer the case with v4. Now you can optionally use `<button>` elements in your dropdowns instead of just `<a>`s.
|
Historically dropdown menu contents *had* to be links, but that's no longer the case with v4. Now you can optionally use `<button>` elements in your dropdowns instead of just `<a>`s.
|
||||||
|
|||||||
@ -55,6 +55,8 @@ const Dropdown = (($) => {
|
|||||||
DISABLED : 'disabled',
|
DISABLED : 'disabled',
|
||||||
SHOW : 'show',
|
SHOW : 'show',
|
||||||
DROPUP : 'dropup',
|
DROPUP : 'dropup',
|
||||||
|
DROPRIGHT : 'dropright',
|
||||||
|
DROPLEFT : 'dropleft',
|
||||||
MENURIGHT : 'dropdown-menu-right',
|
MENURIGHT : 'dropdown-menu-right',
|
||||||
MENULEFT : 'dropdown-menu-left'
|
MENULEFT : 'dropdown-menu-left'
|
||||||
}
|
}
|
||||||
@ -71,7 +73,11 @@ const Dropdown = (($) => {
|
|||||||
TOP : 'top-start',
|
TOP : 'top-start',
|
||||||
TOPEND : 'top-end',
|
TOPEND : 'top-end',
|
||||||
BOTTOM : 'bottom-start',
|
BOTTOM : 'bottom-start',
|
||||||
BOTTOMEND : 'bottom-end'
|
BOTTOMEND : 'bottom-end',
|
||||||
|
RIGHT : 'right-start',
|
||||||
|
RIGHTEND : 'right-end',
|
||||||
|
LEFT : 'left-start',
|
||||||
|
LEFTEND : 'left-end'
|
||||||
}
|
}
|
||||||
|
|
||||||
const Default = {
|
const Default = {
|
||||||
@ -235,6 +241,10 @@ const Dropdown = (($) => {
|
|||||||
if ($(this._menu).hasClass(ClassName.MENURIGHT)) {
|
if ($(this._menu).hasClass(ClassName.MENURIGHT)) {
|
||||||
placement = AttachmentMap.TOPEND
|
placement = AttachmentMap.TOPEND
|
||||||
}
|
}
|
||||||
|
} else if ($parentDropdown.hasClass(ClassName.DROPRIGHT)) {
|
||||||
|
placement = AttachmentMap.RIGHT
|
||||||
|
} else if ($parentDropdown.hasClass(ClassName.DROPLEFT)) {
|
||||||
|
placement = AttachmentMap.LEFT
|
||||||
} else if ($(this._menu).hasClass(ClassName.MENURIGHT)) {
|
} else if ($(this._menu).hasClass(ClassName.MENURIGHT)) {
|
||||||
placement = AttachmentMap.BOTTOMEND
|
placement = AttachmentMap.BOTTOMEND
|
||||||
}
|
}
|
||||||
|
|||||||
@ -93,6 +93,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="col-sm-12 mt-4">
|
<div class="col-sm-12 mt-4">
|
||||||
<div class="btn-group dropup" role="group">
|
<div class="btn-group dropup" role="group">
|
||||||
<a href="#" class="btn btn-secondary">Dropup split align right</a>
|
<a href="#" class="btn btn-secondary">Dropup split align right</a>
|
||||||
@ -114,6 +115,53 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="col-sm-12 mt-4">
|
||||||
|
<div class="btn-group dropright" role="group">
|
||||||
|
<a href="#" class="btn btn-secondary">Dropright split</a>
|
||||||
|
<button type="button" id="dropdown-page-subheader-button-4" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||||
|
<span class="sr-only">Product actions</span>
|
||||||
|
</button>
|
||||||
|
<div class="dropdown-menu">
|
||||||
|
<button class="dropdown-item" type="button">Action</button>
|
||||||
|
<button class="dropdown-item" type="button">Another action</button>
|
||||||
|
<button class="dropdown-item" type="button">Something else here with a long text</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="btn-group dropright">
|
||||||
|
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuRight" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||||
|
Dropright
|
||||||
|
</button>
|
||||||
|
<div class="dropdown-menu" aria-labelledby="dropdownMenuRight">
|
||||||
|
<button class="dropdown-item" type="button">Action</button>
|
||||||
|
<button class="dropdown-item" type="button">Another action</button>
|
||||||
|
<button class="dropdown-item" type="button">Something else here</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- dropleft -->
|
||||||
|
<div class="btn-group dropleft" role="group">
|
||||||
|
<a href="#" class="btn btn-secondary">Dropleft split</a>
|
||||||
|
<button type="button" id="dropdown-page-subheader-button-5" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||||
|
<span class="sr-only">Product actions</span>
|
||||||
|
</button>
|
||||||
|
<div class="dropdown-menu">
|
||||||
|
<button class="dropdown-item" type="button">Action</button>
|
||||||
|
<button class="dropdown-item" type="button">Another action</button>
|
||||||
|
<button class="dropdown-item" type="button">Something else here with a long text</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="btn-group dropleft">
|
||||||
|
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropleftMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||||
|
Dropleft
|
||||||
|
</button>
|
||||||
|
<div class="dropdown-menu" aria-labelledby="dropleftMenu">
|
||||||
|
<button class="dropdown-item" type="button">Action</button>
|
||||||
|
<button class="dropdown-item" type="button">Another action</button>
|
||||||
|
<button class="dropdown-item" type="button">Something else here</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@ -44,6 +44,34 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.dropright {
|
||||||
|
.dropdown-menu {
|
||||||
|
margin-top: 0;
|
||||||
|
margin-left: $dropdown-spacer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-toggle {
|
||||||
|
@include caret(right);
|
||||||
|
&::after {
|
||||||
|
vertical-align: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropleft {
|
||||||
|
.dropdown-menu {
|
||||||
|
margin-top: 0;
|
||||||
|
margin-right: $dropdown-spacer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-toggle {
|
||||||
|
@include caret(left);
|
||||||
|
&::before {
|
||||||
|
vertical-align: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// Dividers (basically an `<hr>`) within the dropdown
|
// Dividers (basically an `<hr>`) within the dropdown
|
||||||
.dropdown-divider {
|
.dropdown-divider {
|
||||||
@include nav-divider($dropdown-divider-bg);
|
@include nav-divider($dropdown-divider-bg);
|
||||||
|
|||||||
@ -12,6 +12,18 @@
|
|||||||
border-left: $caret-width solid transparent;
|
border-left: $caret-width solid transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@mixin caret-right {
|
||||||
|
border-top: $caret-width solid transparent;
|
||||||
|
border-bottom: $caret-width solid transparent;
|
||||||
|
border-left: $caret-width solid;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin caret-left {
|
||||||
|
border-top: $caret-width solid transparent;
|
||||||
|
border-right: $caret-width solid;
|
||||||
|
border-bottom: $caret-width solid transparent;
|
||||||
|
}
|
||||||
|
|
||||||
@mixin caret($direction: down) {
|
@mixin caret($direction: down) {
|
||||||
@if $enable-caret {
|
@if $enable-caret {
|
||||||
&::after {
|
&::after {
|
||||||
@ -25,6 +37,24 @@
|
|||||||
@include caret-down;
|
@include caret-down;
|
||||||
} @else if $direction == up {
|
} @else if $direction == up {
|
||||||
@include caret-up;
|
@include caret-up;
|
||||||
|
} @else if $direction == right {
|
||||||
|
@include caret-right;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@if $direction == left {
|
||||||
|
&::after {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
display: inline-block;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
margin-right: $caret-width * .85;
|
||||||
|
vertical-align: $caret-width * .85;
|
||||||
|
content: "";
|
||||||
|
@include caret-left;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user