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

Better management of dropdown/dropup with alignment

Browse Source
This commit is contained in:
Johann-S 2017-05-22 16:14:10 +02:00 committed by GitHub
parent b36d8ae6cb
commit 70f4a30def
2 changed files with 55 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
js/src/dropdown.js
View File

@ -68,8 +68,10 @@ const Dropdown = (($) => {
}
const AttachmentMap = {
TOP : 'top-start',
BOTTOM : 'bottom-start'
TOP : 'top-start',
TOPEND : 'top-end',
BOTTOM : 'bottom-start',
BOTTOMEND : 'bottom-end'
}
const Default = {
@ -144,21 +146,21 @@ const Dropdown = (($) => {
return
}
// Handle dropup
const dropdownPlacement = $(this._element).parent().hasClass(ClassName.DROPUP) ? AttachmentMap.TOP : this._config.placement
this._popper = new Popper(this._element, this._menu, {
placement : dropdownPlacement,
let element = this._element
// for dropup with alignment we use the parent as popper container
if ($(parent).hasClass(ClassName.DROPUP)) {
if ($(this._menu).hasClass(ClassName.MENULEFT) || $(this._menu).hasClass(ClassName.MENURIGHT)) {
element = parent
}
}
this._popper = new Popper(element, this._menu, {
placement : this._getPlacement(),
modifiers : {
offset : {
offset : this._config.offset
},
flip : {
enabled : this._config.flip
},
beforeApplyStyle: {
order: 899, // 900 is the order of applyStyle
enabled: true,
fn: this._beforePopperApplyStyle
}
}
})
@ -238,21 +240,23 @@ const Dropdown = (($) => {
return this._menu
}
_beforePopperApplyStyle(data) {
if ($(data.instance.popper).hasClass(ClassName.MENURIGHT)) {
data.styles = {
right: 0,
left: 'auto'
}
}
_getPlacement() {
const $parentDropdown = $(this._element).parent()
let placement = this._config.placement
if ($(data.instance.popper).hasClass(ClassName.MENULEFT)) {
data.styles = {
right: 'auto',
left: 0
// Handle dropup
if ($parentDropdown.hasClass(ClassName.DROPUP) || this._config.placement === AttachmentMap.TOP) {
placement = AttachmentMap.TOP
if ($(this._menu).hasClass(ClassName.MENURIGHT)) {
placement = AttachmentMap.TOPEND
}
}
return data
else {
if ($(this._menu).hasClass(ClassName.MENURIGHT)) {
placement = AttachmentMap.BOTTOMEND
}
}
return placement
}
// static

38
js/tests/visual/dropdown.html
View File

@ -61,11 +61,10 @@
<div class="row">
<div class="col-sm-12 mt-4">
<!-- Default dropup button -->
<div class="btn-group dropup">
<button type="button" class="btn btn-secondary">Dropup</button>
<button type="button" class="btn btn-secondary">Dropup split</button>
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
<span class="sr-only">Dropup split</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
@ -74,6 +73,15 @@
</div>
</div>
<div class="btn-group dropup">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropup</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>
</div>
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
This dropdown's menu is right-aligned
@ -84,20 +92,30 @@
<button class="dropdown-item" type="button">Something else here</button>
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
This dropdown's menu is left-aligned
</div>
<div class="col-sm-12 mt-4">
<div class="btn-group dropup" role="group">
<a href="#" class="btn btn-secondary">Dropup split align right</a>
<button type="button" id="dropdown-page-subheader-button-3" 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 dropdown-menu-left">
<div class="dropdown-menu dropdown-menu-right">
<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>
<button class="dropdown-item" type="button">Something else here with a long text</button>
</div>
</div>
<div class="btn-group dropup">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropup align right</button>
<div class="dropdown-menu dropdown-menu-right">
<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>
</div>
</div>
</div>
<script src="../../../docs/assets/js/vendor/jquery-slim.min.js"></script>
<script src="../../../docs/assets/js/vendor/popper.min.js"></script>