mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-22 05:03:16 +02:00
Code Issues Releases Wiki Activity

Use a streamlined way to trigger component dismiss (#34170)

Browse Source 
* use a streamlined way to trigger component dismiss

* add documentation

Co-authored-by: XhmikosR <xhmikosr@gmail.com>
This commit is contained in:
GeoSot
2021-07-28 17:39:32 +03:00
committed by GitHub
parent 047145e808
commit 4bfd8a2cbc
12 changed files with 184 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
site/content/docs/5.0/components/alerts.md
View File

@@ -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.**

11
site/content/docs/5.0/components/modal.md
View File

@@ -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 >}}

10
site/content/docs/5.0/components/offcanvas.md
View File

@@ -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:

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

@@ -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=""`.