mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-02 16:04:07 +03:00
Code Activity

Docs: update documentation js examples, using es6 (#36203)

Browse Source 
* 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
2022-04-26 19:38:41 +03:00
committed by GitHub
parent 3edead4ffe
commit 00d45b11e7
21 changed files with 504 additions and 179 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/content/docs/5.1/getting-started/javascript.md
+21 -21
View File
@@ -59,9 +59,9 @@ Bootstrap provides custom events for most plugins' unique actions. Generally, th
All infinitive events provide [`preventDefault()`](https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault) functionality. This provides the ability to stop the execution of an action before it starts. Returning false from an event handler will also automatically call `preventDefault()`.
```js
var myModal = document.getElementById('myModal')
const myModal = document.getElementById('myModal')
myModal.addEventListener('show.bs.modal', function (event) {
myModal.addEventListener('show.bs.modal', event => {
if (!data) {
return event.preventDefault() // stops modal from being shown
}
@@ -74,7 +74,7 @@ myModal.addEventListener('show.bs.modal', function (event) {
Bootstrap will detect jQuery if `jQuery` is present in the `window` object and there is no `data-bs-no-jquery` attribute set on `<body>`. If jQuery is found, Bootstrap will emit events thanks to jQuery's event system. So if you want to listen to Bootstrap's events, you'll have to use the jQuery methods (`.on`, `.one`) instead of `addEventListener`.
```js
$('#myTab a').on('shown.bs.tab', function () {
$('#myTab a').on('shown.bs.tab', () => {
// do something...
})
```
@@ -85,10 +85,10 @@ $('#myTab a').on('shown.bs.tab', function () {
All constructors accept an optional options object or nothing (which initiates a plugin with its default behavior):
```js
var myModalEl = document.getElementById('myModal')
const myModalEl = document.getElementById('myModal')
var modal = new bootstrap.Modal(myModalEl) // initialized with defaults
var modal = new bootstrap.Modal(myModalEl, { keyboard: false }) // initialized with no keyboard
const modal = new bootstrap.Modal(myModalEl) // initialized with defaults
const modal1 = new bootstrap.Modal(myModalEl, { keyboard: false }) // initialized with no keyboard
```
If you'd like to get a particular plugin instance, each plugin exposes a `getInstance` method. In order to retrieve it directly from an element, do this: `bootstrap.Popover.getInstance(myPopoverEl)`.
@@ -98,8 +98,8 @@ If you'd like to get a particular plugin instance, each plugin exposes a `getIns
You can also use a CSS selector as the first argument instead of a DOM element to initialize the plugin. Currently the element for the plugin is found by the `querySelector` method since our plugins support a single element only.
```js
var modal = new bootstrap.Modal('#myModal')
var dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
const modal = new bootstrap.Modal('#myModal')
const dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
```
### Asynchronous functions and transitions
@@ -109,9 +109,9 @@ All programmatic API methods are **asynchronous** and return to the caller once
In order to execute an action once the transition is complete, you can listen to the corresponding event.
```js
var myCollapseEl = document.getElementById('myCollapse')
const myCollapseEl = document.getElementById('myCollapse')
myCollapseEl.addEventListener('shown.bs.collapse', function (event) {
myCollapseEl.addEventListener('shown.bs.collapse', event => {
// Action to execute once the collapsible area is expanded
})
```
@@ -119,10 +119,10 @@ myCollapseEl.addEventListener('shown.bs.collapse', function (event) {
In addition a method call on a **transitioning component will be ignored**.
```js
var myCarouselEl = document.getElementById('myCarousel')
var carousel = bootstrap.Carousel.getInstance(myCarouselEl) // Retrieve a Carousel instance
const myCarouselEl = document.getElementById('myCarousel')
const carousel = bootstrap.Carousel.getInstance(myCarouselEl) // Retrieve a Carousel instance
myCarouselEl.addEventListener('slid.bs.carousel', function (event) {
myCarouselEl.addEventListener('slid.bs.carousel', event => {
carousel.to('2') // Will slide to the slide 2 as soon as the transition to slide 1 is finished
})
@@ -144,7 +144,7 @@ bootstrap.Modal.Default.keyboard = false
Sometimes it is necessary to use Bootstrap plugins with other UI frameworks. In these circumstances, namespace collisions can occasionally occur. If this happens, you may call `.noConflict` on the plugin you wish to revert the value of.
```js
var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
const bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton // give $().bootstrapBtn the Bootstrap functionality
```
@@ -173,8 +173,8 @@ Tooltips and Popovers use our built-in sanitizer to sanitize options which accep
The default `allowList` value is the following:
```js
var ARIA_ATTRIBUTE_PATTERN = /^aria-[\w-]*$/i
var DefaultAllowlist = {
const ARIA_ATTRIBUTE_PATTERN = /^aria-[\w-]*$/i
const DefaultAllowlist = {
// Global attributes allowed on any supplied element below.
'*': ['class', 'dir', 'id', 'lang', 'role', ARIA_ATTRIBUTE_PATTERN],
a: ['target', 'href', 'title', 'rel'],
@@ -212,7 +212,7 @@ var DefaultAllowlist = {
If you want to add new values to this default `allowList` you can do the following:
```js
var myDefaultAllowList = bootstrap.Tooltip.Default.allowList
const myDefaultAllowList = bootstrap.Tooltip.Default.allowList
// To allow table elements
myDefaultAllowList.table = []
@@ -222,16 +222,16 @@ myDefaultAllowList.td = ['data-bs-option']
// You can push your custom regex to validate your attributes.
// Be careful about your regular expressions being too lax
var myCustomRegex = /^data-my-app-[\w-]+/
const myCustomRegex = /^data-my-app-[\w-]+/
myDefaultAllowList['*'].push(myCustomRegex)
```
If you want to bypass our sanitizer because you prefer to use a dedicated library, for example [DOMPurify](https://www.npmjs.com/package/dompurify), you should do the following:
```js
var yourTooltipEl = document.getElementById('yourTooltip')
var tooltip = new bootstrap.Tooltip(yourTooltipEl, {
sanitizeFn: function (content) {
const yourTooltipEl = document.getElementById('yourTooltip')
const tooltip = new bootstrap.Tooltip(yourTooltipEl, {
sanitizeFn(content) {
return DOMPurify.sanitize(content)
}
})