mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-07 06:06:47 +02:00
Code Issues Releases Wiki 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
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_DROPUP = 'dropup'
const CLASS_NAME_DROPEND = 'dropend' const CLASS_NAME_DROPEND = 'dropend'
const CLASS_NAME_DROPSTART = 'dropstart' 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 = '[data-bs-toggle="dropdown"]:not(.disabled):not(:disabled)'
const SELECTOR_DATA_TOGGLE_SHOWN = `${SELECTOR_DATA_TOGGLE}.${CLASS_NAME_SHOW}` 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_BOTTOMEND = isRTL() ? 'bottom-start' : 'bottom-end'
const PLACEMENT_RIGHT = isRTL() ? 'left-start' : 'right-start' const PLACEMENT_RIGHT = isRTL() ? 'left-start' : 'right-start'
const PLACEMENT_LEFT = isRTL() ? 'right-start' : 'left-start' const PLACEMENT_LEFT = isRTL() ? 'right-start' : 'left-start'
const PLACEMENT_TOPCENTER = 'top'
const PLACEMENT_BOTTOMCENTER = 'bottom'
const Default = { const Default = {
offset: [0, 2], offset: [0, 2],
@@ -248,6 +252,14 @@ class Dropdown extends BaseComponent {
return PLACEMENT_LEFT 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 // We need to trim the value because custom properties can also include spaces
const isEnd = getComputedStyle(this._menu).getPropertyValue('--bs-position').trim() === 'end' const isEnd = getComputedStyle(this._menu).getPropertyValue('--bs-position').trim() === 'end'

4
scss/_dropdown.scss
View File

@@ -2,7 +2,9 @@
.dropup, .dropup,
.dropend, .dropend,
.dropdown, .dropdown,
.dropstart { .dropstart,
.dropup-center,
.dropdown-center {
position: relative; 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. Directions are mirrored when using Bootstrap in RTL, meaning `.dropstart` will appear on the right side.
{{< /callout >}} {{< /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 ### Dropup
Trigger dropdown menus above elements by adding `.dropup` to the parent element. 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> </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 ### Dropend
Trigger dropdown menus at the right of the elements by adding `.dropend` to the parent element. Trigger dropdown menus at the right of the elements by adding `.dropend` to the parent element.