diff options
author | GeoSot <geo.sotis@gmail.com> | 2021-07-28 17:39:32 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-07-28 17:39:32 +0300 |
commit | 4bfd8a2cbcb10610b4078cefa45756b4a96301a0 (patch) | |
tree | 2358a92299ff8fa105623932caacddbf8cd83a41 /site/content/docs/5.0 | |
parent | 047145e8086793e7c39747e70f5d74a8860c2e50 (diff) |
Use a streamlined way to trigger component dismiss (#34170)
* use a streamlined way to trigger component dismiss
* add documentation
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
Diffstat (limited to 'site/content/docs/5.0')
-rw-r--r-- | site/content/docs/5.0/components/alerts.md | 12 | ||||
-rw-r--r-- | site/content/docs/5.0/components/modal.md | 11 | ||||
-rw-r--r-- | site/content/docs/5.0/components/offcanvas.md | 10 | ||||
-rw-r--r-- | site/content/docs/5.0/components/toasts.md | 4 |
4 files changed, 16 insertions, 21 deletions
diff --git a/site/content/docs/5.0/components/alerts.md b/site/content/docs/5.0/components/alerts.md index e3862de483..3389763239 100644 --- a/site/content/docs/5.0/components/alerts.md +++ b/site/content/docs/5.0/components/alerts.md @@ -204,17 +204,7 @@ See the [triggers](#triggers) section for more details. ### Triggers -Dismissal can be achieved with `data` attributes on a button **within the alert** as demonstrated above: - -```html -<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button> -``` - -or on a button **outside the alert** using the `data-bs-target` as demonstrated above: - -```html -<button type="button" class="btn-close" data-bs-dismiss="alert" data-bs-target="#my-alert" aria-label="Close"></button> -``` +{{% js-dismiss "alert" %}} **Note that closing an alert will remove it from the DOM.** diff --git a/site/content/docs/5.0/components/modal.md b/site/content/docs/5.0/components/modal.md index 7ba55b3b50..56fad0297d 100644 --- a/site/content/docs/5.0/components/modal.md +++ b/site/content/docs/5.0/components/modal.md @@ -840,17 +840,8 @@ Activate a modal without writing JavaScript. Set `data-bs-toggle="modal"` on a c ``` #### Dismiss -Dismissal can be achieved with `data` attributes on a button **within the modal** as demonstrated below: +{{% js-dismiss "modal" %}} -```html -<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> -``` - -or on a button **outside the modal** using the `data-bs-target` as demonstrated below: - -```html -<button type="button" class="btn-close" data-bs-dismiss="modal" data-bs-target="#my-modal" aria-label="Close"></button> -``` {{< callout warning >}} While both ways to dismiss a modal are supported, keep in mind that dismissing from outside a modal does not match [the WAI-ARIA modal dialog design pattern](https://www.w3.org/TR/wai-aria-practices-1.1/#dialog_modal). Do this at your own risk. {{< /callout >}} diff --git a/site/content/docs/5.0/components/offcanvas.md b/site/content/docs/5.0/components/offcanvas.md index d0c60db2b2..c28e005e69 100644 --- a/site/content/docs/5.0/components/offcanvas.md +++ b/site/content/docs/5.0/components/offcanvas.md @@ -194,8 +194,18 @@ Add a dismiss button with the `data-bs-dismiss="offcanvas"` attribute, which tri ### Via data attributes +#### Toggle + Add `data-bs-toggle="offcanvas"` and a `data-bs-target` or `href` to the element to automatically assign control of one offcanvas element. The `data-bs-target` attribute accepts a CSS selector to apply the offcanvas to. Be sure to add the class `offcanvas` to the offcanvas element. If you'd like it to default open, add the additional class `show`. +#### Dismiss + +{{% js-dismiss "offcanvas" %}} + +{{< callout warning >}} +While both ways to dismiss an offcanvas are supported, keep in mind that dismissing from outside an offcanvas does not match [the WAI-ARIA modal dialog design pattern](https://www.w3.org/TR/wai-aria-practices-1.1/#dialog_modal). Do this at your own risk. +{{< /callout >}} + ### Via JavaScript Enable manually with: diff --git a/site/content/docs/5.0/components/toasts.md b/site/content/docs/5.0/components/toasts.md index dc9501b677..d17d8b3df8 100644 --- a/site/content/docs/5.0/components/toasts.md +++ b/site/content/docs/5.0/components/toasts.md @@ -341,6 +341,10 @@ var toastList = toastElList.map(function (toastEl) { }) ``` +### Triggers + +{{% js-dismiss "toast" %}} + ### 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=""`. |