diff options
| author | GeoSot <[email protected]> | 2022-04-26 19:38:41 +0300 |
|---|---|---|
| committer | GitHub <[email protected]> | 2022-04-26 09:38:41 -0700 |
| commit | 00d45b11e7088981d52027df65bebf7f5e4c6050 (patch) | |
| tree | b0ac4857b69e124a7ed066fb066477311dab8ded /site/content/docs/5.1/getting-started/javascript.md | |
| parent | 3edead4ffef40bd86c0bcb114b1f0206f66b51e8 (diff) | |
| download | bootstrap-00d45b11e7088981d52027df65bebf7f5e4c6050.tar.xz bootstrap-00d45b11e7088981d52027df65bebf7f5e4c6050.zip | |
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
Diffstat (limited to 'site/content/docs/5.1/getting-started/javascript.md')
| -rw-r--r-- | site/content/docs/5.1/getting-started/javascript.md | 42 |
1 files changed, 21 insertions, 21 deletions
diff --git a/site/content/docs/5.1/getting-started/javascript.md b/site/content/docs/5.1/getting-started/javascript.md index 8ee428921..5e4321034 100644 --- a/site/content/docs/5.1/getting-started/javascript.md +++ b/site/content/docs/5.1/getting-started/javascript.md @@ -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) } }) |