mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-22 13:13:03 +02:00
Code Issues Releases Wiki Activity

Add function type for popperConfig option (#32882)

Browse Source 
* Add function type for `popperConfig` option

* Update .bundlewatch.config.json

* copy edits

Co-authored-by: XhmikosR <xhmikosr@gmail.com>
Co-authored-by: Mark Otto <markdotto@gmail.com>
This commit is contained in:
Rohit Sharma
2021-02-10 00:46:13 +05:30
committed by GitHub
parent 29e0c9dfa1
commit f7088e5d28
9 changed files with 99 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
site/content/docs/5.0/components/dropdowns.md
View File

@@ -993,13 +993,28 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
</tr>
<tr>
<td><code>popperConfig</code></td>
<td>null | object</td>
<td>null | object | function</td>
<td><code>null</code></td>
<td>To change Bootstrap's default Popper config, see <a href="https://popper.js.org/docs/v2/constructors/#options">Popper's configuration</a></td>
<td>
<p>To change Bootstrap's default Popper config, see <a href="https://popper.js.org/docs/v2/constructors/#options">Popper's configuration</a>.</p>
<p>When a function is used to create the Popper configuration, it's called with an object that contains the Bootstrap's default Popper configuration. It helps you use and merge the default with your own configuration. The function must return a configuration object for Popper.</p>
</td>
</tr>
</tbody>
</table>
#### Using function with `popperConfig`
```js
var dropdown = new bootstrap.Dropdown(element, {
popperConfig: function (defaultBsPopperConfig) {
// var newPopperConfig = {...}
// use defaultBsPopperConfig if needed...
// return newPopperConfig
}
})
```
### Methods
<table class="table">

19
site/content/docs/5.0/components/popovers.md
View File

@@ -279,9 +279,12 @@ Note that for security reasons the `sanitize`, `sanitizeFn`, and `allowList` opt
</tr>
<tr>
<td><code>popperConfig</code></td>
<td>null | object</td>
<td>null | object | function</td>
<td><code>null</code></td>
<td>To change Bootstrap's default Popper config, see <a href="https://popper.js.org/docs/v2/constructors/#options">Popper's configuration</a></td>
<td>
<p>To change Bootstrap's default Popper config, see <a href="https://popper.js.org/docs/v2/constructors/#options">Popper's configuration</a>.</p>
<p>When a function is used to create the Popper configuration, it's called with an object that contains the Bootstrap's default Popper configuration. It helps you use and merge the default with your own configuration. The function must return a configuration object for Popper.</p>
</td>
</tr>
</tbody>
</table>
@@ -292,6 +295,18 @@ Note that for security reasons the `sanitize`, `sanitizeFn`, and `allowList` opt
Options for individual popovers can alternatively be specified through the use of data attributes, as explained above.
{{< /callout >}}
#### Using function with `popperConfig`
```js
var popover = new bootstrap.Popover(element, {
popperConfig: function (defaultBsPopperConfig) {
// var newPopperConfig = {...}
// use defaultBsPopperConfig if needed...
// return newPopperConfig
}
})
```
### Methods
{{< callout danger >}}

19
site/content/docs/5.0/components/tooltips.md
View File

@@ -304,9 +304,12 @@ Note that for security reasons the `sanitize`, `sanitizeFn`, and `allowList` opt
</tr>
<tr>
<td><code>popperConfig</code></td>
<td>null | object</td>
<td>null | object | function</td>
<td><code>null</code></td>
<td>To change Bootstrap's default Popper config, see <a href="https://popper.js.org/docs/v2/constructors/#options">Popper's configuration</a></td>
<td>
<p>To change Bootstrap's default Popper config, see <a href="https://popper.js.org/docs/v2/constructors/#options">Popper's configuration</a>.</p>
<p>When a function is used to create the Popper configuration, it's called with an object that contains the Bootstrap's default Popper configuration. It helps you use and merge the default with your own configuration. The function must return a configuration object for Popper.</p>
</td>
</tr>
</tbody>
</table>
@@ -317,6 +320,18 @@ Note that for security reasons the `sanitize`, `sanitizeFn`, and `allowList` opt
Options for individual tooltips can alternatively be specified through the use of data attributes, as explained above.
{{< /callout >}}
#### Using function with `popperConfig`
```js
var tooltip = new bootstrap.Tooltip(element, {
popperConfig: function (defaultBsPopperConfig) {
// var newPopperConfig = {...}
// use defaultBsPopperConfig if needed...
// return newPopperConfig
}
})
```
### Methods
{{< callout danger >}}

1
site/content/docs/5.0/migration.md
View File

@@ -24,6 +24,7 @@ toc: true
- The default value for the `fallbackPlacements` is changed to `['top', 'right', 'bottom', 'left']` for better placement of popper elements.
- All the events for the dropdown are now triggered on the dropdown toggle button and then bubbled up to the parent element.
- Dropdown menus now have a `data-bs-popper="static"` attribute set when the positioning of the dropdown is static and `data-bs-popper="none"` when dropdown is in the navbar. This is added by our JavaScript and helps us use custom position styles without interfering with Popper's positioning.
- `popperConfig` can be passed as a function that accepts the Bootstrap's default Popper config as an argument, so that you can merge this default configuration in your way.
## v5.0.0-beta1