mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-14 18:42:30 +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)
}
})
site/content/docs/5.1/getting-started/parcel.md
+1
View File
@@ -36,6 +36,7 @@ project-name/
Import [Bootstrap's JavaScript]({{< docsref "/getting-started/javascript" >}}) in your app's entry point (usually `src/index.js`). You can import all our plugins in one file or separately if you require only a subset of them.
<!-- eslint-skip -->
```js
// Import all plugins
import * as bootstrap from 'bootstrap';
site/content/docs/5.1/getting-started/webpack.md
+6 -2
View File
@@ -14,6 +14,7 @@ toc: true
Import [Bootstrap's JavaScript]({{< docsref "/getting-started/javascript" >}}) by adding this line to your app's entry point (usually `index.js` or `app.js`):
<!-- eslint-skip -->
```js
import 'bootstrap';
@@ -23,6 +24,7 @@ import * as bootstrap from 'bootstrap';
Alternatively, if you only need just a few of our plugins, you may **import plugins individually** as needed:
<!-- eslint-skip -->
```js
import Alert from 'bootstrap/js/dist/alert';
@@ -48,6 +50,7 @@ First, create your own `_custom.scss` and use it to override the [built-in custo
For Bootstrap to compile, make sure you install and use the required loaders: [sass-loader](https://github.com/webpack-contrib/sass-loader), [postcss-loader](https://github.com/webpack-contrib/postcss-loader) with [Autoprefixer](https://github.com/postcss/autoprefixer#webpack). With minimal setup, your webpack config should include this rule or similar:
<!-- eslint-skip -->
```js
// ...
{
@@ -66,8 +69,8 @@ For Bootstrap to compile, make sure you install and use the required loaders: [s
// if you use postcss 7.x skip the key
postcssOptions: {
// postcss plugins, can be exported to postcss.config.js
plugins: function () {
return [
plugins: () => {
[
require('autoprefixer')
];
}
@@ -85,6 +88,7 @@ For Bootstrap to compile, make sure you install and use the required loaders: [s
Alternatively, you may use Bootstrap's ready-to-use CSS by simply adding this line to your project's entry point:
<!-- eslint-skip -->
```js
import 'bootstrap/dist/css/bootstrap.min.css';
```