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

Manipulator: Add JSON parse support (#35077)

Browse Source 
Support parsing JSON from each component's main element using the `data-bs-config` attribute.

The `bs-config` attribute will be reserved and omitted during `getDataAttributes` parsing.

With this commit, every component, will create its config object, using:

* defaults
* data-bs-config
* the rest of data attributes
* configuration object given during instance initialization

Co-authored-by: XhmikosR <xhmikosr@gmail.com>
Co-authored-by: Mark Otto <markd.otto@gmail.com>
Co-authored-by: Mark Otto <markdotto@gmail.com>
This commit is contained in:
GeoSot
2022-04-21 21:41:43 +03:00
committed by GitHub
parent 01cffa6822
commit 584600bda3
16 changed files with 163 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
site/content/docs/5.1/components/carousel.md
View File

@@ -308,7 +308,9 @@ var carousel = new bootstrap.Carousel(myCarousel)
### Options
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-bs-`, as in `data-bs-interval=""`.
{{< markdown >}}
{{< partial "js-data-attributes.md" >}}
{{< /markdown >}}
{{< bs-table >}}
| Name | Type | Default | Description |

4
site/content/docs/5.1/components/collapse.md
View File

@@ -141,7 +141,9 @@ var collapseList = collapseElementList.map(function (collapseEl) {
### Options
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-bs-`, as in `data-bs-parent=""`.
{{< markdown >}}
{{< partial "js-data-attributes.md" >}}
{{< /markdown >}}
{{< bs-table "table" >}}
| Name | Type | Default | Description |

4
site/content/docs/5.1/components/dropdowns.md
View File

@@ -1064,7 +1064,9 @@ Regardless of whether you call your dropdown via JavaScript or instead use the d
### Options
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-bs-`, as in `data-bs-offset=""`. Make sure to change the case type of the option name from camelCase to kebab-case when passing the options via data attributes. For example, instead of using `data-bs-autoClose="false"`, use `data-bs-auto-close="false"`.
{{< markdown >}}
{{< partial "js-data-attributes.md" >}}
{{< /markdown >}}
{{< bs-table "table" >}}
| Name | Type | Default | Description |

4
site/content/docs/5.1/components/modal.md
View File

@@ -820,7 +820,9 @@ var myModal = new bootstrap.Modal(document.getElementById('myModal'), options)
### Options
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-bs-`, as in `data-bs-backdrop=""`.
{{< markdown >}}
{{< partial "js-data-attributes.md" >}}
{{< /markdown >}}
{{< bs-table "table" >}}
| Name | Type | Default | Description |

4
site/content/docs/5.1/components/offcanvas.md
View File

@@ -279,7 +279,9 @@ var offcanvasList = offcanvasElementList.map(function (offcanvasEl) {
### Options
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-bs-`, as in `data-bs-backdrop=""`.
{{< markdown >}}
{{< partial "js-data-attributes.md" >}}
{{< /markdown >}}
{{< bs-table "table" >}}
| Name | Type | Default | Description |

4
site/content/docs/5.1/components/popovers.md
View File

@@ -166,7 +166,9 @@ Additionally, while it is possible to also include interactive controls (such as
### Options
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-bs-`, as in `data-bs-animation=""`. Make sure to change the case type of the option name from camelCase to kebab-case when passing the options via data attributes. For example, instead of using `data-bs-customClass="beautifier"`, use `data-bs-custom-class="beautifier"`.
{{< markdown >}}
{{< partial "js-data-attributes.md" >}}
{{< /markdown >}}
{{< callout warning >}}
Note that for security reasons the `sanitize`, `sanitizeFn`, and `allowList` options cannot be supplied using data attributes.

4
site/content/docs/5.1/components/scrollspy.md
View File

@@ -338,7 +338,9 @@ Target elements that are not visible will be ignored and their corresponding nav
### Options
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-bs-`, as in `data-bs-root-margin=""`.
{{< markdown >}}
{{< partial "js-data-attributes.md" >}}
{{< /markdown >}}
{{< bs-table "table" >}}
| Name | Type | Default | Description |

4
site/content/docs/5.1/components/toasts.md
View File

@@ -355,7 +355,9 @@ var toastList = toastElList.map(function (toastEl) {
### Options
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-bs-`, as in `data-bs-animation=""`.
{{< markdown >}}
{{< partial "js-data-attributes.md" >}}
{{< /markdown >}}
{{< bs-table "table" >}}
| Name | Type | Default | Description |

4
site/content/docs/5.1/components/tooltips.md
View File

@@ -193,7 +193,9 @@ Elements with the `disabled` attribute aren't interactive, meaning users cannot
### Options
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-bs-`, as in `data-bs-animation=""`. Make sure to change the case type of the option name from camelCase to kebab-case when passing the options via data attributes. For example, instead of using `data-bs-customClass="beautifier"`, use `data-bs-custom-class="beautifier"`.
{{< markdown >}}
{{< partial "js-data-attributes.md" >}}
{{< /markdown >}}
{{< callout warning >}}
Note that for security reasons the `sanitize`, `sanitizeFn`, and `allowList` options cannot be supplied using data attributes.