diff --git a/js/src/dropdown.js b/js/src/dropdown.js index 4d65008f8..8824935d7 100644 --- a/js/src/dropdown.js +++ b/js/src/dropdown.js @@ -289,6 +289,31 @@ class Dropdown extends BaseComponent { return this._element.closest(`.${CLASS_NAME_NAVBAR}`) !== null } + _getOffset() { + let offset = [0, 0] + + if (!this._config.offset) { + return offset + } + + if (typeof this._config.offset === 'number') { + offset[0] = this._config.offset + } else if (typeof this._config.offset === 'string') { + offset = offset.split(',') + if (offset.length === 1) { + offset = [offset[0], 0] + } + + offset = offset.map(val => Number.parseInt(val, 10)) + } else if (typeof this._config.offset === 'function') { + offset = (popper, reference, placement) => { + return offset({ popper, reference, placement }, this._element) + } + } + + return offset + } + _getPopperConfig() { const popperConfig = { placement: this._getPlacement(), @@ -304,6 +329,12 @@ class Dropdown extends BaseComponent { options: { fallbackPlacements: ['top', 'right', 'bottom', 'left'] } + }, + { + name: 'offset', + options: { + offset: this._getOffset() + } }] } diff --git a/site/content/docs/5.0/components/dropdowns.md b/site/content/docs/5.0/components/dropdowns.md index 50dcde2ba..416b80fd0 100644 --- a/site/content/docs/5.0/components/dropdowns.md +++ b/site/content/docs/5.0/components/dropdowns.md @@ -896,6 +896,16 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
'dynamic'static.offset0Offset of the dropdown relative to its target.
+When a function is used to determine the offset, it is called with an object containing the popper offsets object data as its first argument. The function must return an array with two numbers: [skidding, distance]. The triggering element DOM node is passed as the second argument.
For more information refer to Popper.js's offset docs.
+popperConfig