mirror of
https://github.com/tenrok/bootstrap.git
synced 2026-06-14 18:42:30 +03:00
Docs: update documentation js examples, using es6 (#36203)
* Docs: update components documentation using es6 * Docs: update js blocks around docs, using es6 * Docs: update components documentation using es6 * Test linter
This commit is contained in:
GeoSot
@@ -35,18 +35,23 @@ Click the button below to show an alert (hidden with inline styles to start), th
|
||||
We use the following JavaScript to trigger our live alert demo:
|
||||
|
||||
```js
|
||||
var alertPlaceholder = document.getElementById('liveAlertPlaceholder')
|
||||
var alertTrigger = document.getElementById('liveAlertBtn')
|
||||
const alertPlaceholder = document.getElementById('liveAlertPlaceholder')
|
||||
|
||||
function alert(message, type) {
|
||||
var wrapper = document.createElement('div')
|
||||
wrapper.innerHTML = '<div class="alert alert-' + type + ' alert-dismissible" role="alert">' + message + '<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button></div>'
|
||||
const alert = (message, type) => {
|
||||
const wrapper = document.createElement('div')
|
||||
wrapper.innerHTML = [
|
||||
`<div class="alert alert-${type} alert-dismissible" role="alert">`,
|
||||
` <div>${message}</div>`,
|
||||
' <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>',
|
||||
'</div>'
|
||||
].join('')
|
||||
|
||||
alertPlaceholder.append(wrapper)
|
||||
}
|
||||
|
||||
const alertTrigger = document.getElementById('liveAlertBtn')
|
||||
if (alertTrigger) {
|
||||
alertTrigger.addEventListener('click', function () {
|
||||
alertTrigger.addEventListener('click', () => {
|
||||
alert('Nice, you triggered this alert message!', 'success')
|
||||
})
|
||||
}
|
||||
@@ -189,10 +194,8 @@ Loop that generates the modifier classes with the `alert-variant()` mixin.
|
||||
Initialize elements as alerts
|
||||
|
||||
```js
|
||||
var alertList = document.querySelectorAll('.alert')
|
||||
var alerts = Array.prototype.slice.call(alertList).map(function (element) {
|
||||
return new bootstrap.Alert(element)
|
||||
})
|
||||
const alertList = document.querySelectorAll('.alert')
|
||||
const alerts = [...alertList].map(element => new bootstrap.Alert(element))
|
||||
```
|
||||
|
||||
{{< callout info >}}
|
||||
@@ -212,8 +215,7 @@ See the [triggers](#triggers) section for more details.
|
||||
You can create an alert instance with the alert constructor, for example:
|
||||
|
||||
```js
|
||||
var myAlert = document.getElementById('myAlert')
|
||||
var bsAlert = new bootstrap.Alert(myAlert)
|
||||
const bsAlert = new bootstrap.Alert('#myAlert')
|
||||
```
|
||||
|
||||
This makes an alert listen for click events on descendant elements which have the `data-bs-dismiss="alert"` attribute. (Not necessary when using the data-api’s auto-initialization.)
|
||||
@@ -230,8 +232,7 @@ This makes an alert listen for click events on descendant elements which have th
|
||||
Basic usage:
|
||||
|
||||
```js
|
||||
var alertNode = document.querySelector('.alert')
|
||||
var alert = bootstrap.Alert.getOrCreateInstance(alertNode)
|
||||
const alert = bootstrap.Alert.getOrCreateInstance('#myAlert')
|
||||
alert.close()
|
||||
```
|
||||
|
||||
@@ -247,8 +248,8 @@ Bootstrap's alert plugin exposes a few events for hooking into alert functionali
|
||||
{{< /bs-table >}}
|
||||
|
||||
```js
|
||||
var myAlert = document.getElementById('myAlert')
|
||||
myAlert.addEventListener('closed.bs.alert', function () {
|
||||
const myAlert = document.getElementById('myAlert')
|
||||
myAlert.addEventListener('closed.bs.alert', event => {
|
||||
// do something, for instance, explicitly move focus to the most appropriate element,
|
||||
// so it doesn't get lost/reset to the start of the page
|
||||
// document.getElementById('...').focus()
|
||||
|
||||
@@ -180,8 +180,7 @@ Add `data-bs-toggle="button"` to toggle a button's `active` state. If you're pre
|
||||
You can create a button instance with the button constructor, for example:
|
||||
|
||||
```js
|
||||
var button = document.getElementById('myButton')
|
||||
var bsButton = new bootstrap.Button(button)
|
||||
const bsButton = new bootstrap.Button('#myButton')
|
||||
```
|
||||
|
||||
{{< bs-table "table" >}}
|
||||
@@ -196,9 +195,8 @@ var bsButton = new bootstrap.Button(button)
|
||||
For example, to toggle all buttons
|
||||
|
||||
```js
|
||||
var buttons = document.querySelectorAll('.btn')
|
||||
buttons.forEach(function (button) {
|
||||
var button = new bootstrap.Button(button)
|
||||
document.querySelectorAll('.btn').forEach(buttonElement => {
|
||||
const button = bootstrap.Button.getOrCreateInstance(buttonElement)
|
||||
button.toggle()
|
||||
})
|
||||
```
|
||||
|
||||
@@ -302,8 +302,7 @@ The `data-bs-ride="carousel"` attribute is used to mark a carousel as animating
|
||||
Call carousel manually with:
|
||||
|
||||
```js
|
||||
var myCarousel = document.querySelector('#myCarousel')
|
||||
var carousel = new bootstrap.Carousel(myCarousel)
|
||||
const carousel = new bootstrap.Carousel('#myCarousel')
|
||||
```
|
||||
|
||||
### Options
|
||||
@@ -332,8 +331,8 @@ var carousel = new bootstrap.Carousel(myCarousel)
|
||||
You can create a carousel instance with the carousel constructor, for example, to initialize with additional options and start cycling through items:
|
||||
|
||||
```js
|
||||
var myCarousel = document.querySelector('#myCarousel')
|
||||
var carousel = new bootstrap.Carousel(myCarousel, {
|
||||
const myCarouselElement = document.querySelector('#myCarousel')
|
||||
const carousel = new bootstrap.Carousel(myCarouselElement, {
|
||||
interval: 2000,
|
||||
wrap: false
|
||||
})
|
||||
@@ -372,9 +371,9 @@ All carousel events are fired at the carousel itself (i.e. at the `<div class="c
|
||||
{{< /bs-table >}}
|
||||
|
||||
```js
|
||||
var myCarousel = document.getElementById('myCarousel')
|
||||
const myCarousel = document.getElementById('myCarousel')
|
||||
|
||||
myCarousel.addEventListener('slide.bs.carousel', function () {
|
||||
myCarousel.addEventListener('slide.bs.carousel', event => {
|
||||
// do something...
|
||||
})
|
||||
```
|
||||
|
||||
@@ -133,10 +133,8 @@ To add accordion-like group management to a collapsible area, add the data attri
|
||||
Enable manually with:
|
||||
|
||||
```js
|
||||
var collapseElementList = Array.prototype.slice.call(document.querySelectorAll('.collapse'))
|
||||
var collapseList = collapseElementList.map(function (collapseEl) {
|
||||
return new bootstrap.Collapse(collapseEl)
|
||||
})
|
||||
const collapseElementList = document.querySelectorAll('.collapse')
|
||||
const collapseList = [...collapseElementList].map(collapseEl => new bootstrap.Collapse(collapseEl))
|
||||
```
|
||||
|
||||
### Options
|
||||
@@ -163,8 +161,7 @@ Activates your content as a collapsible element. Accepts an optional options `ob
|
||||
You can create a collapse instance with the constructor, for example:
|
||||
|
||||
```js
|
||||
var myCollapse = document.getElementById('myCollapse')
|
||||
var bsCollapse = new bootstrap.Collapse(myCollapse, {
|
||||
const bsCollapse = new bootstrap.Collapse('#myCollapse', {
|
||||
toggle: false
|
||||
})
|
||||
```
|
||||
@@ -194,8 +191,8 @@ Bootstrap's collapse class exposes a few events for hooking into collapse functi
|
||||
{{< /bs-table >}}
|
||||
|
||||
```js
|
||||
var myCollapsible = document.getElementById('myCollapsible')
|
||||
myCollapsible.addEventListener('hidden.bs.collapse', function () {
|
||||
const myCollapsible = document.getElementById('myCollapsible')
|
||||
myCollapsible.addEventListener('hidden.bs.collapse', event => {
|
||||
// do something...
|
||||
})
|
||||
```
|
||||
|
||||
@@ -1050,10 +1050,8 @@ Add `data-bs-toggle="dropdown"` to a link or button to toggle a dropdown.
|
||||
Call the dropdowns via JavaScript:
|
||||
|
||||
```js
|
||||
var dropdownElementList = Array.prototype.slice.call(document.querySelectorAll('.dropdown-toggle'))
|
||||
var dropdownList = dropdownElementList.map(function (dropdownToggleEl) {
|
||||
return new bootstrap.Dropdown(dropdownToggleEl)
|
||||
})
|
||||
const dropdownElementList = document.querySelectorAll('.dropdown-toggle')
|
||||
const dropdownList = [...dropdownElementList].map(dropdownToggleEl => new bootstrap.Dropdown(dropdownToggleEl))
|
||||
```
|
||||
|
||||
{{< callout info >}}
|
||||
@@ -1082,9 +1080,9 @@ Regardless of whether you call your dropdown via JavaScript or instead use the d
|
||||
#### Using function with `popperConfig`
|
||||
|
||||
```js
|
||||
var dropdown = new bootstrap.Dropdown(element, {
|
||||
popperConfig: function (defaultBsPopperConfig) {
|
||||
// var newPopperConfig = {...}
|
||||
const dropdown = new bootstrap.Dropdown(element, {
|
||||
popperConfig(defaultBsPopperConfig) {
|
||||
// const newPopperConfig = {...}
|
||||
// use defaultBsPopperConfig if needed...
|
||||
// return newPopperConfig
|
||||
}
|
||||
@@ -1119,8 +1117,8 @@ All dropdown events are fired at the toggling element and then bubbled up. So yo
|
||||
{{< /bs-table >}}
|
||||
|
||||
```js
|
||||
var myDropdown = document.getElementById('myDropdown')
|
||||
myDropdown.addEventListener('show.bs.dropdown', function () {
|
||||
const myDropdown = document.getElementById('myDropdown')
|
||||
myDropdown.addEventListener('show.bs.dropdown', event => {
|
||||
// do something...
|
||||
})
|
||||
```
|
||||
|
||||
@@ -405,11 +405,11 @@ You can activate a list group navigation without writing any JavaScript by simpl
|
||||
Enable tabbable list item via JavaScript (each list item needs to be activated individually):
|
||||
|
||||
```js
|
||||
var triggerTabList = Array.prototype.slice.call(document.querySelectorAll('#myTab a'))
|
||||
triggerTabList.forEach(function (triggerEl) {
|
||||
var tabTrigger = new bootstrap.Tab(triggerEl)
|
||||
const triggerTabList = document.querySelectorAll('#myTab a')
|
||||
triggerTabList.forEach(triggerEl => {
|
||||
const tabTrigger = new bootstrap.Tab(triggerEl)
|
||||
|
||||
triggerEl.addEventListener('click', function (event) {
|
||||
triggerEl.addEventListener('click', event => {
|
||||
event.preventDefault()
|
||||
tabTrigger.show()
|
||||
})
|
||||
@@ -419,10 +419,10 @@ triggerTabList.forEach(function (triggerEl) {
|
||||
You can activate individual list item in several ways:
|
||||
|
||||
```js
|
||||
var triggerEl = document.querySelector('#myTab a[href="#profile"]')
|
||||
const triggerEl = document.querySelector('#myTab a[href="#profile"]')
|
||||
bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name
|
||||
|
||||
var triggerFirstTabEl = document.querySelector('#myTab li:first-child a')
|
||||
const triggerFirstTabEl = document.querySelector('#myTab li:first-child a')
|
||||
bootstrap.Tab.getInstance(triggerFirstTabEl).show() // Select first tab
|
||||
```
|
||||
|
||||
@@ -461,8 +461,8 @@ Activates a list item element and content container. Tab should have either a `d
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var firstTabEl = document.querySelector('#myTab a:last-child')
|
||||
var firstTab = new bootstrap.Tab(firstTabEl)
|
||||
const firstTabEl = document.querySelector('#myTab a:last-child')
|
||||
const firstTab = new bootstrap.Tab(firstTabEl)
|
||||
|
||||
firstTab.show()
|
||||
</script>
|
||||
@@ -473,10 +473,9 @@ Activates a list item element and content container. Tab should have either a `d
|
||||
Selects the given list item and shows its associated pane. Any other list item that was previously selected becomes unselected and its associated pane is hidden. **Returns to the caller before the tab pane has actually been shown** (for example, before the `shown.bs.tab` event occurs).
|
||||
|
||||
```js
|
||||
var someListItemEl = document.querySelector('#someListItem')
|
||||
var tab = new bootstrap.Tab(someListItemEl)
|
||||
const tab = new bootstrap.Tab('#someListItem')
|
||||
|
||||
tab.show()
|
||||
tab.show()
|
||||
```
|
||||
|
||||
#### dispose
|
||||
@@ -488,8 +487,7 @@ Destroys an element's tab.
|
||||
*Static* method which allows you to get the tab instance associated with a DOM element
|
||||
|
||||
```js
|
||||
var triggerEl = document.querySelector('#trigger')
|
||||
var tab = bootstrap.Tab.getInstance(triggerEl) // Returns a Bootstrap tab instance
|
||||
const tab = bootstrap.Tab.getInstance('#trigger') // Returns a Bootstrap tab instance
|
||||
```
|
||||
|
||||
#### getOrCreateInstance
|
||||
@@ -497,8 +495,7 @@ var tab = bootstrap.Tab.getInstance(triggerEl) // Returns a Bootstrap tab instan
|
||||
*Static* method which allows you to get the tab instance associated with a DOM element, or create a new one in case it wasn't initialized
|
||||
|
||||
```js
|
||||
var triggerEl = document.querySelector('#trigger')
|
||||
var tab = bootstrap.Tab.getOrCreateInstance(triggerEl) // Returns a Bootstrap tab instance
|
||||
const tab = bootstrap.Tab.getOrCreateInstance('#trigger') // Returns a Bootstrap tab instance
|
||||
```
|
||||
|
||||
### Events
|
||||
@@ -522,11 +519,11 @@ If no tab was already active, the `hide.bs.tab` and `hidden.bs.tab` events will
|
||||
{{< /bs-table >}}
|
||||
|
||||
```js
|
||||
var tabElms = document.querySelectorAll('a[data-bs-toggle="list"]')
|
||||
tabElms.forEach(function(tabElm) {
|
||||
tabElm.addEventListener('shown.bs.tab', function (event) {
|
||||
const tabElms = document.querySelectorAll('a[data-bs-toggle="list"]')
|
||||
tabElms.forEach(tabElm => {
|
||||
tabElm.addEventListener('shown.bs.tab', event => {
|
||||
event.target // newly activated tab
|
||||
event.relatedTarget // previous active tab
|
||||
})
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
@@ -18,10 +18,10 @@ Before getting started with Bootstrap's modal component, be sure to read the fol
|
||||
- Due to how HTML5 defines its semantics, [the `autofocus` HTML attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-autofocus) has no effect in Bootstrap modals. To achieve the same effect, use some custom JavaScript:
|
||||
|
||||
```js
|
||||
var myModal = document.getElementById('myModal')
|
||||
var myInput = document.getElementById('myInput')
|
||||
const myModal = document.getElementById('myModal')
|
||||
const myInput = document.getElementById('myInput')
|
||||
|
||||
myModal.addEventListener('shown.bs.modal', function () {
|
||||
myModal.addEventListener('shown.bs.modal', () => {
|
||||
myInput.focus()
|
||||
})
|
||||
```
|
||||
@@ -478,20 +478,20 @@ Below is a live demo followed by example HTML and JavaScript. For more informati
|
||||
{{< /example >}}
|
||||
|
||||
```js
|
||||
var exampleModal = document.getElementById('exampleModal')
|
||||
exampleModal.addEventListener('show.bs.modal', function (event) {
|
||||
const exampleModal = document.getElementById('exampleModal')
|
||||
exampleModal.addEventListener('show.bs.modal', event => {
|
||||
// Button that triggered the modal
|
||||
var button = event.relatedTarget
|
||||
const button = event.relatedTarget
|
||||
// Extract info from data-bs-* attributes
|
||||
var recipient = button.getAttribute('data-bs-whatever')
|
||||
const recipient = button.getAttribute('data-bs-whatever')
|
||||
// If necessary, you could initiate an AJAX request here
|
||||
// and then do the updating in a callback.
|
||||
//
|
||||
// Update the modal's content.
|
||||
var modalTitle = exampleModal.querySelector('.modal-title')
|
||||
var modalBodyInput = exampleModal.querySelector('.modal-body input')
|
||||
const modalTitle = exampleModal.querySelector('.modal-title')
|
||||
const modalBodyInput = exampleModal.querySelector('.modal-body input')
|
||||
|
||||
modalTitle.textContent = 'New message to ' + recipient
|
||||
modalTitle.textContent = `New message to ${recipient}`
|
||||
modalBodyInput.value = recipient
|
||||
})
|
||||
```
|
||||
@@ -815,7 +815,9 @@ While both ways to dismiss a modal are supported, keep in mind that dismissing f
|
||||
Create a modal with a single line of JavaScript:
|
||||
|
||||
```js
|
||||
var myModal = new bootstrap.Modal(document.getElementById('myModal'), options)
|
||||
const myModal = new bootstrap.Modal(document.getElementById('myModal'), options)
|
||||
// or
|
||||
const myModalAlternative = new bootstrap.Modal('#myModal', options)
|
||||
```
|
||||
|
||||
### Options
|
||||
@@ -843,7 +845,7 @@ var myModal = new bootstrap.Modal(document.getElementById('myModal'), options)
|
||||
Activates your content as a modal. Accepts an optional options `object`.
|
||||
|
||||
```js
|
||||
var myModal = new bootstrap.Modal(document.getElementById('myModal'), {
|
||||
const myModal = new bootstrap.Modal('#myModal', {
|
||||
keyboard: false
|
||||
})
|
||||
```
|
||||
@@ -852,7 +854,7 @@ var myModal = new bootstrap.Modal(document.getElementById('myModal'), {
|
||||
| Method | Description |
|
||||
| --- | --- |
|
||||
| `toggle` | Manually toggles a modal. **Returns to the caller before the modal has actually been shown or hidden** (i.e. before the `shown.bs.modal` or `hidden.bs.modal` event occurs). |
|
||||
| `show` | Manually opens a modal. **Returns to the caller before the modal has actually been shown** (i.e. before the `shown.bs.modal` event occurs). Also, you can pass a DOM element as an argument that can be received in the modal events (as the `relatedTarget` property). (i.e. `var modalToggle = document.getElementById('toggleMyModal'); myModal.show(modalToggle)` |
|
||||
| `show` | Manually opens a modal. **Returns to the caller before the modal has actually been shown** (i.e. before the `shown.bs.modal` event occurs). Also, you can pass a DOM element as an argument that can be received in the modal events (as the `relatedTarget` property). (i.e. `const modalToggle = document.getElementById('toggleMyModal'); myModal.show(modalToggle)` |
|
||||
| `hide` | Manually hides a modal. **Returns to the caller before the modal has actually been hidden** (i.e. before the `hidden.bs.modal` event occurs). |
|
||||
| `handleUpdate` | Manually readjust the modal's position if the height of a modal changes while it is open (i.e. in case a scrollbar appears). |
|
||||
| `dispose` | Destroys an element's modal. (Removes stored data on the DOM element) |
|
||||
@@ -875,8 +877,8 @@ Bootstrap's modal class exposes a few events for hooking into modal functionalit
|
||||
{{< /bs-table >}}
|
||||
|
||||
```js
|
||||
var myModalEl = document.getElementById('myModal')
|
||||
myModalEl.addEventListener('hidden.bs.modal', function (event) {
|
||||
const myModalEl = document.getElementById('myModal')
|
||||
myModalEl.addEventListener('hidden.bs.modal', event => {
|
||||
// do something...
|
||||
})
|
||||
```
|
||||
|
||||
@@ -553,11 +553,11 @@ You can activate a tab or pill navigation without writing any JavaScript by simp
|
||||
Enable tabbable tabs via JavaScript (each tab needs to be activated individually):
|
||||
|
||||
```js
|
||||
var triggerTabList = Array.prototype.slice.call(document.querySelectorAll('#myTab button'))
|
||||
triggerTabList.forEach(function (triggerEl) {
|
||||
var tabTrigger = new bootstrap.Tab(triggerEl)
|
||||
const triggerTabList = document.querySelectorAll('#myTab button')
|
||||
triggerTabList.forEach(triggerEl => {
|
||||
const tabTrigger = new bootstrap.Tab(triggerEl)
|
||||
|
||||
triggerEl.addEventListener('click', function (event) {
|
||||
triggerEl.addEventListener('click', event => {
|
||||
event.preventDefault()
|
||||
tabTrigger.show()
|
||||
})
|
||||
@@ -567,10 +567,10 @@ triggerTabList.forEach(function (triggerEl) {
|
||||
You can activate individual tabs in several ways:
|
||||
|
||||
```js
|
||||
var triggerEl = document.querySelector('#myTab button[data-bs-target="#profile"]')
|
||||
const triggerEl = document.querySelector('#myTab button[data-bs-target="#profile"]')
|
||||
bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name
|
||||
|
||||
var triggerFirstTabEl = document.querySelector('#myTab li:first-child button')
|
||||
const triggerFirstTabEl = document.querySelector('#myTab li:first-child button')
|
||||
bootstrap.Tab.getInstance(triggerFirstTabEl).show() // Select first tab
|
||||
```
|
||||
|
||||
@@ -621,8 +621,8 @@ Activates a tab element and content container. Tab should have either a `data-bs
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var firstTabEl = document.querySelector('#myTab li:last-child button')
|
||||
var firstTab = new bootstrap.Tab(firstTabEl)
|
||||
const firstTabEl = document.querySelector('#myTab li:last-child button')
|
||||
const firstTab = new bootstrap.Tab(firstTabEl)
|
||||
|
||||
firstTab.show()
|
||||
</script>
|
||||
@@ -633,10 +633,10 @@ Activates a tab element and content container. Tab should have either a `data-bs
|
||||
Selects the given tab and shows its associated pane. Any other tab that was previously selected becomes unselected and its associated pane is hidden. **Returns to the caller before the tab pane has actually been shown** (i.e. before the `shown.bs.tab` event occurs).
|
||||
|
||||
```js
|
||||
var someTabTriggerEl = document.querySelector('#someTabTrigger')
|
||||
var tab = new bootstrap.Tab(someTabTriggerEl)
|
||||
const someTabTriggerEl = document.querySelector('#someTabTrigger')
|
||||
const tab = new bootstrap.Tab(someTabTriggerEl)
|
||||
|
||||
tab.show()
|
||||
tab.show()
|
||||
```
|
||||
|
||||
#### dispose
|
||||
@@ -648,8 +648,7 @@ Destroys an element's tab.
|
||||
*Static* method which allows you to get the tab instance associated with a DOM element
|
||||
|
||||
```js
|
||||
var triggerEl = document.querySelector('#trigger')
|
||||
var tab = bootstrap.Tab.getInstance(triggerEl) // Returns a Bootstrap tab instance
|
||||
const tab = bootstrap.Tab.getInstance('#trigger') // Returns a Bootstrap tab instance
|
||||
```
|
||||
|
||||
#### getOrCreateInstance
|
||||
@@ -657,8 +656,7 @@ var tab = bootstrap.Tab.getInstance(triggerEl) // Returns a Bootstrap tab instan
|
||||
*Static* method which allows you to get the tab instance associated with a DOM element, or create a new one in case it wasn't initialized
|
||||
|
||||
```js
|
||||
var triggerEl = document.querySelector('#trigger')
|
||||
var tab = bootstrap.Tab.getOrCreateInstance(triggerEl) // Returns a Bootstrap tab instance
|
||||
const tab = bootstrap.Tab.getOrCreateInstance('#trigger') // Returns a Bootstrap tab instance
|
||||
```
|
||||
|
||||
### Events
|
||||
@@ -682,8 +680,8 @@ If no tab was already active, then the `hide.bs.tab` and `hidden.bs.tab` events
|
||||
{{< /bs-table >}}
|
||||
|
||||
```js
|
||||
var tabEl = document.querySelector('button[data-bs-toggle="tab"]')
|
||||
tabEl.addEventListener('shown.bs.tab', function (event) {
|
||||
const tabEl = document.querySelector('button[data-bs-toggle="tab"]')
|
||||
tabEl.addEventListener('shown.bs.tab', event => {
|
||||
event.target // newly activated tab
|
||||
event.relatedTarget // previous active tab
|
||||
})
|
||||
|
||||
@@ -271,10 +271,8 @@ While both ways to dismiss an offcanvas are supported, keep in mind that dismiss
|
||||
Enable manually with:
|
||||
|
||||
```js
|
||||
var offcanvasElementList = Array.prototype.slice.call(document.querySelectorAll('.offcanvas'))
|
||||
var offcanvasList = offcanvasElementList.map(function (offcanvasEl) {
|
||||
return new bootstrap.Offcanvas(offcanvasEl)
|
||||
})
|
||||
const offcanvasElementList = document.querySelectorAll('.offcanvas')
|
||||
const offcanvasList = [...offcanvasElementList].map(offcanvasEl => new bootstrap.Offcanvas(offcanvasEl))
|
||||
```
|
||||
|
||||
### Options
|
||||
@@ -302,8 +300,7 @@ Activates your content as an offcanvas element. Accepts an optional options `obj
|
||||
You can create an offcanvas instance with the constructor, for example:
|
||||
|
||||
```js
|
||||
var myOffcanvas = document.getElementById('myOffcanvas')
|
||||
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)
|
||||
const bsOffcanvas = new bootstrap.Offcanvas('#myOffcanvas')
|
||||
```
|
||||
|
||||
{{< bs-table "table" >}}
|
||||
@@ -331,8 +328,8 @@ Bootstrap's offcanvas class exposes a few events for hooking into offcanvas func
|
||||
{{< /bs-table >}}
|
||||
|
||||
```js
|
||||
var myOffcanvas = document.getElementById('myOffcanvas')
|
||||
myOffcanvas.addEventListener('hidden.bs.offcanvas', function () {
|
||||
const myOffcanvas = document.getElementById('myOffcanvas')
|
||||
myOffcanvas.addEventListener('hidden.bs.offcanvas', event => {
|
||||
// do something...
|
||||
})
|
||||
```
|
||||
|
||||
@@ -38,10 +38,8 @@ Keep reading to see how popovers work with some examples.
|
||||
As mentioned above, you must initialize popovers before they can be used. One way to initialize all popovers on a page would be to select them by their `data-bs-toggle` attribute, like so:
|
||||
|
||||
```js
|
||||
var popoverTriggerList = Array.prototype.slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
|
||||
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
|
||||
return new bootstrap.Popover(popoverTriggerEl)
|
||||
})
|
||||
const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
|
||||
const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))
|
||||
```
|
||||
|
||||
### Live demo
|
||||
@@ -76,7 +74,7 @@ Four options are available: top, right, bottom, and left. Directions are mirrore
|
||||
When you have some styles on a parent element that interfere with a popover, you'll want to specify a custom `container` so that the popover's HTML appears within that element instead. This is common in responsive tables, input groups, and the like.
|
||||
|
||||
```js
|
||||
var popover = new bootstrap.Popover(document.querySelector('.example-popover'), {
|
||||
const popover = new bootstrap.Popover('.example-popover', {
|
||||
container: 'body'
|
||||
})
|
||||
```
|
||||
@@ -114,7 +112,7 @@ For proper cross-browser and cross-platform behavior, you must use the `<a>` tag
|
||||
{{< /example >}}
|
||||
|
||||
```js
|
||||
var popover = new bootstrap.Popover(document.querySelector('.popover-dismiss'), {
|
||||
const popover = new bootstrap.Popover('.popover-dismiss', {
|
||||
trigger: 'focus'
|
||||
})
|
||||
```
|
||||
@@ -150,8 +148,8 @@ As part of Bootstrap’s evolving CSS variables approach, popovers now use local
|
||||
Enable popovers via JavaScript:
|
||||
|
||||
```js
|
||||
var exampleEl = document.getElementById('example')
|
||||
var popover = new bootstrap.Popover(exampleEl, options)
|
||||
const exampleEl = document.getElementById('example')
|
||||
const popover = new bootstrap.Popover(exampleEl, options)
|
||||
```
|
||||
|
||||
{{< callout warning >}}
|
||||
@@ -207,9 +205,9 @@ Options for individual popovers can alternatively be specified through the use o
|
||||
#### Using function with `popperConfig`
|
||||
|
||||
```js
|
||||
var popover = new bootstrap.Popover(element, {
|
||||
popperConfig: function (defaultBsPopperConfig) {
|
||||
// var newPopperConfig = {...}
|
||||
const popover = new bootstrap.Popover(element, {
|
||||
popperConfig(defaultBsPopperConfig) {
|
||||
// const newPopperConfig = {...}
|
||||
// use defaultBsPopperConfig if needed...
|
||||
// return newPopperConfig
|
||||
}
|
||||
@@ -241,8 +239,7 @@ var popover = new bootstrap.Popover(element, {
|
||||
|
||||
```js
|
||||
// getOrCreateInstance example
|
||||
var exampleTriggerEl = document.getElementById('example')
|
||||
var popover = bootstrap.Popover.getOrCreateInstance(exampleTriggerEl) // Returns a Bootstrap popover instance
|
||||
const popover = bootstrap.Popover.getOrCreateInstance('#example') // Returns a Bootstrap popover instance
|
||||
|
||||
// setContent example
|
||||
myPopover.setContent({
|
||||
@@ -269,8 +266,8 @@ The `setContent` method accepts an `object` argument, where each property-key is
|
||||
{{< /bs-table >}}
|
||||
|
||||
```js
|
||||
var myPopoverTrigger = document.getElementById('myPopover')
|
||||
myPopoverTrigger.addEventListener('hidden.bs.popover', function () {
|
||||
const myPopoverTrigger = document.getElementById('myPopover')
|
||||
myPopoverTrigger.addEventListener('hidden.bs.popover', () => {
|
||||
// do something...
|
||||
})
|
||||
```
|
||||
|
||||
@@ -319,7 +319,7 @@ To easily add scrollspy behavior to your topbar navigation, add `data-bs-spy="sc
|
||||
### Via JavaScript
|
||||
|
||||
```js
|
||||
var scrollSpy = new bootstrap.ScrollSpy(document.body, {
|
||||
const scrollSpy = new bootstrap.ScrollSpy(document.body, {
|
||||
target: '#navbar-example'
|
||||
})
|
||||
```
|
||||
@@ -371,10 +371,9 @@ To keep backwards compatibility, we will continue to parse a given `offset` to `
|
||||
Here's an example using the refresh method:
|
||||
|
||||
```js
|
||||
var dataSpyList = Array.prototype.slice.call(document.querySelectorAll('[data-bs-spy="scroll"]'))
|
||||
dataSpyList.forEach(function (dataSpyEl) {
|
||||
bootstrap.ScrollSpy.getInstance(dataSpyEl)
|
||||
.refresh()
|
||||
const dataSpyList = document.querySelectorAll('[data-bs-spy="scroll"]')
|
||||
dataSpyList.forEach(dataSpyEl => {
|
||||
bootstrap.ScrollSpy.getInstance(dataSpyEl).refresh()
|
||||
})
|
||||
```
|
||||
|
||||
@@ -387,8 +386,8 @@ dataSpyList.forEach(function (dataSpyEl) {
|
||||
{{< /bs-table >}}
|
||||
|
||||
```js
|
||||
var firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
|
||||
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', function () {
|
||||
const firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
|
||||
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', () => {
|
||||
// do something...
|
||||
})
|
||||
```
|
||||
|
||||
@@ -88,11 +88,11 @@ Click the button below to show a toast (positioned with our utilities in the low
|
||||
We use the following JavaScript to trigger our live toast demo:
|
||||
|
||||
```js
|
||||
var toastTrigger = document.getElementById('liveToastBtn')
|
||||
var toastLiveExample = document.getElementById('liveToast')
|
||||
const toastTrigger = document.getElementById('liveToastBtn')
|
||||
const toastLiveExample = document.getElementById('liveToast')
|
||||
if (toastTrigger) {
|
||||
toastTrigger.addEventListener('click', function () {
|
||||
var toast = new bootstrap.Toast(toastLiveExample)
|
||||
toastTrigger.addEventListener('click', () => {
|
||||
const toast = new bootstrap.Toast(toastLiveExample)
|
||||
|
||||
toast.show()
|
||||
})
|
||||
@@ -343,10 +343,8 @@ As part of Bootstrap's evolving CSS variables approach, toasts now use local CSS
|
||||
Initialize toasts via JavaScript:
|
||||
|
||||
```js
|
||||
var toastElList = Array.prototype.slice.call(document.querySelectorAll('.toast'))
|
||||
var toastList = toastElList.map(function (toastEl) {
|
||||
return new bootstrap.Toast(toastEl, option)
|
||||
})
|
||||
const toastElList = document.querySelectorAll('.toast')
|
||||
const toastList = [...toastElList].map(toastEl => new bootstrap.Toast(toastEl, option))
|
||||
```
|
||||
|
||||
### Triggers
|
||||
@@ -379,8 +377,8 @@ var toastList = toastElList.map(function (toastEl) {
|
||||
| `show` | Reveals an element's toast. **Returns to the caller before the toast has actually been shown** (i.e. before the `shown.bs.toast` event occurs). You have to manually call this method, instead your toast won't show. |
|
||||
| `hide` | Hides an element's toast. **Returns to the caller before the toast has actually been hidden** (i.e. before the `hidden.bs.toast` event occurs). You have to manually call this method if you made `autohide` to `false`. |
|
||||
| `dispose` | Hides an element's toast. Your toast will remain on the DOM but won't show anymore. |
|
||||
| `getInstance` | *Static* method which allows you to get the scrollspy instance associated with a DOM element. <br> For example: `var myToastEl = document.getElementById('myToastEl')` `var myToast = bootstrap.Toast.getInstance(myToastEl)` Returns a Bootstrap toast instance|
|
||||
| `getOrCreateInstance` | *Static* method which allows you to get the scrollspy instance associated with a DOM element, or create a new one, in case it wasn't initialized. <br>`var myToastEl = document.getElementById('myToastEl')` `var myToast = bootstrap.Toast.getOrCreateInstance(myToastEl)` Returns a Bootstrap toast instance |
|
||||
| `getInstance` | *Static* method which allows you to get the scrollspy instance associated with a DOM element. <br> For example: `const myToastEl = document.getElementById('myToastEl')` `const myToast = bootstrap.Toast.getInstance(myToastEl)` Returns a Bootstrap toast instance|
|
||||
| `getOrCreateInstance` | *Static* method which allows you to get the scrollspy instance associated with a DOM element, or create a new one, in case it wasn't initialized. <br>`const myToastEl = document.getElementById('myToastEl')` `const myToast = bootstrap.Toast.getOrCreateInstance(myToastEl)` Returns a Bootstrap toast instance |
|
||||
{{< /bs-table >}}
|
||||
|
||||
### Events
|
||||
@@ -395,8 +393,8 @@ var toastList = toastElList.map(function (toastEl) {
|
||||
{{< /bs-table >}}
|
||||
|
||||
```js
|
||||
var myToastEl = document.getElementById('myToast')
|
||||
myToastEl.addEventListener('hidden.bs.toast', function () {
|
||||
const myToastEl = document.getElementById('myToast')
|
||||
myToastEl.addEventListener('hidden.bs.toast', () => {
|
||||
// do something...
|
||||
})
|
||||
```
|
||||
|
||||
@@ -37,10 +37,8 @@ Got all that? Great, let's see how they work with some examples.
|
||||
As mentioned above, you must initialize tooltips before they can be used. One way to initialize all tooltips on a page would be to select them by their `data-bs-toggle` attribute, like so:
|
||||
|
||||
```js
|
||||
var tooltipTriggerList = Array.prototype.slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
|
||||
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
|
||||
return new bootstrap.Tooltip(tooltipTriggerEl)
|
||||
})
|
||||
const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
|
||||
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
|
||||
```
|
||||
|
||||
### Tooltips on links
|
||||
@@ -139,8 +137,8 @@ The tooltip plugin generates content and markup on demand, and by default places
|
||||
Trigger the tooltip via JavaScript:
|
||||
|
||||
```js
|
||||
var exampleEl = document.getElementById('example')
|
||||
var tooltip = new bootstrap.Tooltip(exampleEl, options)
|
||||
const exampleEl = document.getElementById('example')
|
||||
const tooltip = new bootstrap.Tooltip(exampleEl, options)
|
||||
```
|
||||
|
||||
{{< callout warning >}}
|
||||
@@ -149,8 +147,7 @@ var tooltip = new bootstrap.Tooltip(exampleEl, options)
|
||||
Tooltip position attempts to automatically change when a **parent container** has `overflow: auto` or `overflow: scroll` like our `.table-responsive`, but still keeps the original placement's positioning. To resolve this, set the [`boundary` option](https://popper.js.org/docs/v2/modifiers/flip/#boundary) (for the flip modifier using the `popperConfig` option) to any HTMLElement to override the default value, `'clippingParents'`, such as `document.body`:
|
||||
|
||||
```js
|
||||
var exampleEl = document.getElementById('example')
|
||||
var tooltip = new bootstrap.Tooltip(exampleEl, {
|
||||
const tooltip = new bootstrap.Tooltip('#example', {
|
||||
boundary: document.body // or document.querySelector('#boundary')
|
||||
})
|
||||
```
|
||||
@@ -233,9 +230,9 @@ Options for individual tooltips can alternatively be specified through the use o
|
||||
#### Using function with `popperConfig`
|
||||
|
||||
```js
|
||||
var tooltip = new bootstrap.Tooltip(element, {
|
||||
popperConfig: function (defaultBsPopperConfig) {
|
||||
// var newPopperConfig = {...}
|
||||
const tooltip = new bootstrap.Tooltip(element, {
|
||||
popperConfig(defaultBsPopperConfig) {
|
||||
// const newPopperConfig = {...}
|
||||
// use defaultBsPopperConfig if needed...
|
||||
// return newPopperConfig
|
||||
}
|
||||
@@ -265,9 +262,7 @@ var tooltip = new bootstrap.Tooltip(element, {
|
||||
{{< /bs-table >}}
|
||||
|
||||
```js
|
||||
// getOrCreateInstance example
|
||||
var exampleTriggerEl = document.getElementById('example')
|
||||
var tooltip = bootstrap.Tooltip.getInstance(exampleTriggerEl) // Returns a Bootstrap tooltip instance
|
||||
const tooltip = bootstrap.Tooltip.getInstance('#example') // Returns a Bootstrap tooltip instance
|
||||
|
||||
// setContent example
|
||||
tooltip.setContent({ '.tooltip-inner': 'another title' })
|
||||
@@ -291,10 +286,10 @@ The `setContent` method accepts an `object` argument, where each property-key is
|
||||
{{< /bs-table >}}
|
||||
|
||||
```js
|
||||
var myTooltipEl = document.getElementById('myTooltip')
|
||||
var tooltip = new bootstrap.Tooltip(myTooltipEl)
|
||||
const myTooltipEl = document.getElementById('myTooltip')
|
||||
const tooltip = bootstrap.Tooltip.getOrCreateInstance(myTooltipEl)
|
||||
|
||||
myTooltipEl.addEventListener('hidden.bs.tooltip', function () {
|
||||
myTooltipEl.addEventListener('hidden.bs.tooltip', () => {
|
||||
// do something...
|
||||
})
|
||||
|
||||
|
||||
Reference in New Issue
Block a user