diff options
author | GeoSot <geo.sotis@gmail.com> | 2022-04-21 21:41:43 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2022-04-21 21:41:43 +0300 |
commit | 584600bda36ac13ea325617783216d6c6a331c08 (patch) | |
tree | 053f97d3e8401864aca9c0b8e180a3d2c089b4be /site/content/docs/5.1/components | |
parent | 01cffa682249965eafa581058dd993853d82b3c4 (diff) |
Manipulator: Add JSON parse support (#35077)
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>
Diffstat (limited to 'site/content/docs/5.1/components')
-rw-r--r-- | site/content/docs/5.1/components/carousel.md | 4 | ||||
-rw-r--r-- | site/content/docs/5.1/components/collapse.md | 4 | ||||
-rw-r--r-- | site/content/docs/5.1/components/dropdowns.md | 4 | ||||
-rw-r--r-- | site/content/docs/5.1/components/modal.md | 4 | ||||
-rw-r--r-- | site/content/docs/5.1/components/offcanvas.md | 4 | ||||
-rw-r--r-- | site/content/docs/5.1/components/popovers.md | 4 | ||||
-rw-r--r-- | site/content/docs/5.1/components/scrollspy.md | 4 | ||||
-rw-r--r-- | site/content/docs/5.1/components/toasts.md | 4 | ||||
-rw-r--r-- | site/content/docs/5.1/components/tooltips.md | 4 |
9 files changed, 27 insertions, 9 deletions
diff --git a/site/content/docs/5.1/components/carousel.md b/site/content/docs/5.1/components/carousel.md index 86de96a074..14f91911d2 100644 --- a/site/content/docs/5.1/components/carousel.md +++ b/site/content/docs/5.1/components/carousel.md @@ -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 | diff --git a/site/content/docs/5.1/components/collapse.md b/site/content/docs/5.1/components/collapse.md index 4fb6f5e944..60b16826ce 100644 --- a/site/content/docs/5.1/components/collapse.md +++ b/site/content/docs/5.1/components/collapse.md @@ -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 | diff --git a/site/content/docs/5.1/components/dropdowns.md b/site/content/docs/5.1/components/dropdowns.md index 7751a9bade..86b8491ca7 100644 --- a/site/content/docs/5.1/components/dropdowns.md +++ b/site/content/docs/5.1/components/dropdowns.md @@ -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 | diff --git a/site/content/docs/5.1/components/modal.md b/site/content/docs/5.1/components/modal.md index d9bd120d46..011aee2f46 100644 --- a/site/content/docs/5.1/components/modal.md +++ b/site/content/docs/5.1/components/modal.md @@ -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 | diff --git a/site/content/docs/5.1/components/offcanvas.md b/site/content/docs/5.1/components/offcanvas.md index 56ae26e6ba..10d184ed57 100644 --- a/site/content/docs/5.1/components/offcanvas.md +++ b/site/content/docs/5.1/components/offcanvas.md @@ -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 | diff --git a/site/content/docs/5.1/components/popovers.md b/site/content/docs/5.1/components/popovers.md index f2cfdb6d0a..7dce915635 100644 --- a/site/content/docs/5.1/components/popovers.md +++ b/site/content/docs/5.1/components/popovers.md @@ -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. diff --git a/site/content/docs/5.1/components/scrollspy.md b/site/content/docs/5.1/components/scrollspy.md index 6dfd9732fa..e48cc06f27 100644 --- a/site/content/docs/5.1/components/scrollspy.md +++ b/site/content/docs/5.1/components/scrollspy.md @@ -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 | diff --git a/site/content/docs/5.1/components/toasts.md b/site/content/docs/5.1/components/toasts.md index a54a6656a6..32a0f2f413 100644 --- a/site/content/docs/5.1/components/toasts.md +++ b/site/content/docs/5.1/components/toasts.md @@ -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 | diff --git a/site/content/docs/5.1/components/tooltips.md b/site/content/docs/5.1/components/tooltips.md index 9460da2a0b..f913ff5fea 100644 --- a/site/content/docs/5.1/components/tooltips.md +++ b/site/content/docs/5.1/components/tooltips.md @@ -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. |