rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-01 13:24:25 +01:00
Code Issues Actions Packages Releases Activity

Add centered dropdown and dropup options

Browse Source
This commit is contained in:
Mark Otto 2022-02-25 08:53:17 -08:00 committed by Mark Otto
parent efc5914667
commit c0f30366ac
3 changed files with 49 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
js/src/dropdown.js
View File

@ -48,6 +48,8 @@ const CLASS_NAME_SHOW = 'show'
const CLASS_NAME_DROPUP = 'dropup'
const CLASS_NAME_DROPEND = 'dropend'
const CLASS_NAME_DROPSTART = 'dropstart'
const CLASS_NAME_DROPUP_CENTER = 'dropup-center'
const CLASS_NAME_DROPDOWN_CENTER = 'dropdown-center'
const SELECTOR_DATA_TOGGLE = '[data-bs-toggle="dropdown"]:not(.disabled):not(:disabled)'
const SELECTOR_DATA_TOGGLE_SHOWN = `${SELECTOR_DATA_TOGGLE}.${CLASS_NAME_SHOW}`
@ -62,6 +64,8 @@ const PLACEMENT_BOTTOM = isRTL() ? 'bottom-end' : 'bottom-start'
const PLACEMENT_BOTTOMEND = isRTL() ? 'bottom-start' : 'bottom-end'
const PLACEMENT_RIGHT = isRTL() ? 'left-start' : 'right-start'
const PLACEMENT_LEFT = isRTL() ? 'right-start' : 'left-start'
const PLACEMENT_TOPCENTER = 'top'
const PLACEMENT_BOTTOMCENTER = 'bottom'
const Default = {
offset: [0, 2],
@ -248,6 +252,14 @@ class Dropdown extends BaseComponent {
return PLACEMENT_LEFT
}
if (parentDropdown.classList.contains(CLASS_NAME_DROPUP_CENTER)) {
return PLACEMENT_TOPCENTER
}
if (parentDropdown.classList.contains(CLASS_NAME_DROPDOWN_CENTER)) {
return PLACEMENT_BOTTOMCENTER
}
// We need to trim the value because custom properties can also include spaces
const isEnd = getComputedStyle(this._menu).getPropertyValue('--bs-position').trim() === 'end'

4
scss/_dropdown.scss
View File

@ -2,7 +2,9 @@
.dropup,
.dropend,
.dropdown,
.dropstart {
.dropstart,
.dropup-center,
.dropdown-center {
position: relative;
}

34
site/content/docs/5.1/components/dropdowns.md
View File

@ -400,6 +400,23 @@ And putting it to use in a navbar:
Directions are mirrored when using Bootstrap in RTL, meaning `.dropstart` will appear on the right side.
{{< /callout >}}
### Centered
Make the dropdown menu centered below the toggle with `.dropdown-center` on the parent element.
{{< example >}}
<div class="dropdown-center">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownCenterBtn" data-bs-toggle="dropdown" aria-expanded="false">
Centered dropdown
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownCenterBtn">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Action two</a></li>
<li><a class="dropdown-item" href="#">Action three</a></li>
</ul>
</div>
{{< /example >}}
### Dropup
Trigger dropdown menus above elements by adding `.dropup` to the parent element.
@ -459,6 +476,23 @@ Trigger dropdown menus above elements by adding `.dropup` to the parent element.
</div>
```
### Dropup centered
Make the dropup menu centered above the toggle with `.dropup-center` on the parent element.
{{< example >}}
<div class="dropup-center">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropupCenterBtn" data-bs-toggle="dropdown" aria-expanded="false">
Centered dropup
</button>
<ul class="dropdown-menu" aria-labelledby="dropupCenterBtn">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Action two</a></li>
<li><a class="dropdown-item" href="#">Action three</a></li>
</ul>
</div>
{{< /example >}}
### Dropend
Trigger dropdown menus at the right of the elements by adding `.dropend` to the parent element.