Skip to content

Commit 7f35892

Browse files
Johann-SJohann-S
committed
Add dropleft
1 parent 4d364d0 commit 7f35892

File tree

5 files changed

+113
-3
lines changed

5 files changed

+113
-3
lines changed

‎docs/4.0/components/dropdowns.md

+63-2
Original file line numberDiff line numberDiff line change
@@ -450,7 +450,7 @@ Trigger dropdown menus at the right of the elements by adding `.dropright` to th
450450
<div class="btn-group dropright">
451451
<button type="button" class="btn btn-secondary">Dropright</button>
452452
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
453-
<span class="sr-only">Toggle Dropdright</span>
453+
<span class="sr-only">Toggle Dropright</span>
454454
</button>
455455
<div class="dropdown-menu">
456456
<!-- Dropdown menu links -->
@@ -463,7 +463,68 @@ Trigger dropdown menus at the right of the elements by adding `.dropright` to th
463463
Split dropright
464464
</button>
465465
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
466-
<span class="sr-only">Toggle Dropdright</span>
466+
<span class="sr-only">Toggle Dropright</span>
467+
</button>
468+
<div class="dropdown-menu">
469+
<!-- Dropdown menu links -->
470+
</div>
471+
</div>
472+
{% endhighlight %}
473+
474+
## Dropleft variation
475+
476+
Trigger dropdown menus at the left of the elements by adding `.dropleft` to the parent element.
477+
478+
<div class="bd-example">
479+
<div class="btn-group dropleft">
480+
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
481+
Dropleft
482+
</button>
483+
<div class="dropdown-menu">
484+
<a class="dropdown-item" href="#">Action</a>
485+
<a class="dropdown-item" href="#">Another action</a>
486+
<a class="dropdown-item" href="#">Something else here</a>
487+
<div class="dropdown-divider"></div>
488+
<a class="dropdown-item" href="#">Separated link</a>
489+
</div>
490+
</div>
491+
492+
<div class="btn-group dropleft">
493+
<button type="button" class="btn btn-secondary">
494+
Split dropleft
495+
</button>
496+
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
497+
<span class="sr-only">Toggle Dropleft</span>
498+
</button>
499+
<div class="dropdown-menu">
500+
<a class="dropdown-item" href="#">Action</a>
501+
<a class="dropdown-item" href="#">Another action</a>
502+
<a class="dropdown-item" href="#">Something else here</a>
503+
<div class="dropdown-divider"></div>
504+
<a class="dropdown-item" href="#">Separated link</a>
505+
</div>
506+
</div>
507+
</div>
508+
509+
{% highlight html %}
510+
<!-- Default dropleft button -->
511+
<div class="btn-group dropleft">
512+
<button type="button" class="btn btn-secondary">Dropleft</button>
513+
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
514+
<span class="sr-only">Toggle Dropleft</span>
515+
</button>
516+
<div class="dropdown-menu">
517+
<!-- Dropdown menu links -->
518+
</div>
519+
</div>
520+
521+
<!-- Split dropleft button -->
522+
<div class="btn-group dropleft">
523+
<button type="button" class="btn btn-secondary">
524+
Split dropleft
525+
</button>
526+
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
527+
<span class="sr-only">Toggle Dropleft</span>
467528
</button>
468529
<div class="dropdown-menu">
469530
<!-- Dropdown menu links -->

‎js/src/dropdown.js

+6-1
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,7 @@ const Dropdown = (() => {
5656
SHOW : 'show',
5757
DROPUP : 'dropup',
5858
DROPRIGHT : 'dropright',
59+
DROPLEFT : 'dropleft',
5960
MENURIGHT : 'dropdown-menu-right',
6061
MENULEFT : 'dropdown-menu-left'
6162
}
@@ -74,7 +75,9 @@ const Dropdown = (() => {
7475
BOTTOM : 'bottom-start',
7576
BOTTOMEND : 'bottom-end',
7677
RIGHT : 'right-start',
77-
RIGHTEND : 'right-end'
78+
RIGHTEND : 'right-end',
79+
LEFT : 'left-start',
80+
LEFTEND : 'left-end'
7881
}
7982

8083
const Default = {
@@ -240,6 +243,8 @@ const Dropdown = (() => {
240243
}
241244
} else if ($parentDropdown.hasClass(ClassName.DROPRIGHT)) {
242245
placement = AttachmentMap.RIGHT
246+
} else if ($parentDropdown.hasClass(ClassName.DROPLEFT)) {
247+
placement = AttachmentMap.LEFT
243248
} else if ($(this._menu).hasClass(ClassName.MENURIGHT)) {
244249
placement = AttachmentMap.BOTTOMEND
245250
}

‎js/tests/visual/dropdown.html

+22
Original file line numberDiff line numberDiff line change
@@ -138,6 +138,28 @@ <h1>Dropdown <small>Bootstrap Visual Test</small></h1>
138138
<button class="dropdown-item" type="button">Something else here</button>
139139
</div>
140140
</div>
141+
<!-- dropleft -->
142+
<div class="btn-group dropleft" role="group">
143+
<a href="#" class="btn btn-secondary">Dropleft split</a>
144+
<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">
145+
<span class="sr-only">Product actions</span>
146+
</button>
147+
<div class="dropdown-menu">
148+
<button class="dropdown-item" type="button">Action</button>
149+
<button class="dropdown-item" type="button">Another action</button>
150+
<button class="dropdown-item" type="button">Something else here with a long text</button>
151+
</div>
152+
</div>
153+
<div class="btn-group dropleft">
154+
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropleftMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
155+
Dropleft
156+
</button>
157+
<div class="dropdown-menu" aria-labelledby="dropleftMenu">
158+
<button class="dropdown-item" type="button">Action</button>
159+
<button class="dropdown-item" type="button">Another action</button>
160+
<button class="dropdown-item" type="button">Something else here</button>
161+
</div>
162+
</div>
141163
</div>
142164

143165
</div>

‎scss/_dropdown.scss

+14
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,20 @@
5858
}
5959
}
6060

61+
.dropleft {
62+
.dropdown-menu {
63+
margin-top: 0;
64+
margin-right: $dropdown-spacer;
65+
}
66+
67+
.dropdown-toggle {
68+
@include caret(left);
69+
&::after {
70+
vertical-align: 0;
71+
}
72+
}
73+
}
74+
6175
// Dividers (basically an `<hr>`) within the dropdown
6276
.dropdown-divider {
6377
@include nav-divider($dropdown-divider-bg);

‎scss/mixins/_caret.scss

+8
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,12 @@
1818
border-left: $caret-width solid;
1919
}
2020

21+
@mixin caret-left {
22+
border-top: $caret-width solid transparent;
23+
border-right: $caret-width solid;
24+
border-bottom: $caret-width solid transparent;
25+
}
26+
2127
@mixin caret($direction: down) {
2228
@if $enable-caret {
2329
&::after {
@@ -33,6 +39,8 @@
3339
@include caret-up;
3440
} @else if $direction == right {
3541
@include caret-right;
42+
} @else if $direction == left {
43+
@include caret-left;
3644
}
3745
}
3846

0 commit comments

Comments
 (0)