mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-11 16:14:04 +02:00
Code Issues Releases Wiki 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
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 = { const AttachmentMap = {
TOP : 'top-start', TOP : 'top-start',
BOTTOM : 'bottom-start' TOPEND : 'top-end',
BOTTOM : 'bottom-start',
BOTTOMEND : 'bottom-end'
} }
const Default = { const Default = {
@@ -144,21 +146,21 @@ const Dropdown = (($) => {
return return
} }
// Handle dropup let element = this._element
const dropdownPlacement = $(this._element).parent().hasClass(ClassName.DROPUP) ? AttachmentMap.TOP : this._config.placement // for dropup with alignment we use the parent as popper container
this._popper = new Popper(this._element, this._menu, { if ($(parent).hasClass(ClassName.DROPUP)) {
placement : dropdownPlacement, if ($(this._menu).hasClass(ClassName.MENULEFT) || $(this._menu).hasClass(ClassName.MENURIGHT)) {
element = parent
}
}
this._popper = new Popper(element, this._menu, {
placement : this._getPlacement(),
modifiers : { modifiers : {
offset : { offset : {
offset : this._config.offset offset : this._config.offset
}, },
flip : { flip : {
enabled : this._config.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 return this._menu
} }
_beforePopperApplyStyle(data) { _getPlacement() {
if ($(data.instance.popper).hasClass(ClassName.MENURIGHT)) { const $parentDropdown = $(this._element).parent()
data.styles = { let placement = this._config.placement
right: 0,
left: 'auto'
}
}
if ($(data.instance.popper).hasClass(ClassName.MENULEFT)) { // Handle dropup
data.styles = { if ($parentDropdown.hasClass(ClassName.DROPUP) || this._config.placement === AttachmentMap.TOP) {
right: 'auto', placement = AttachmentMap.TOP
left: 0 if ($(this._menu).hasClass(ClassName.MENURIGHT)) {
placement = AttachmentMap.TOPEND
} }
} }
return data else {
if ($(this._menu).hasClass(ClassName.MENURIGHT)) {
placement = AttachmentMap.BOTTOMEND
}
}
return placement
} }
// static // static

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

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