diff options
author | GeoSot <geo.sotis@gmail.com> | 2021-06-28 16:34:47 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-06-28 16:34:47 +0300 |
commit | 70dd7f6ff51a0bd3b09b0de3640b0517b8b08f64 (patch) | |
tree | 5c72cbf572eb3b4dc8ba721ca2f166a64567f0cc /site/content/docs | |
parent | 45d26de72817b295c5f94c8426354fd5b7d0a1f9 (diff) |
Changes to Alert component to match the others (#33402)
Alert.js: Refactor code to match the other components
* Use this._element
* Remove handleDismiss method and keep its functionality on event
* Change JqueryInterface to be more generic
* Correct docs to be aligned with code, and add undocumented functionality
* Update alerts.md
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
Diffstat (limited to 'site/content/docs')
-rw-r--r-- | site/content/docs/5.0/components/alerts.md | 32 |
1 files changed, 18 insertions, 14 deletions
diff --git a/site/content/docs/5.0/components/alerts.md b/site/content/docs/5.0/components/alerts.md index a7e52f5f89..51feb966ed 100644 --- a/site/content/docs/5.0/components/alerts.md +++ b/site/content/docs/5.0/components/alerts.md @@ -147,35 +147,39 @@ Loop that generates the modifier classes with the `alert-variant()` mixin. ## JavaScript behavior -### Triggers +### Initialize -Enable dismissal of an alert via JavaScript: +Initialize elements as alerts ```js var alertList = document.querySelectorAll('.alert') -alertList.forEach(function (alert) { - new bootstrap.Alert(alert) +var alerts = [].slice.call(alertList).map(function (element) { + return new bootstrap.Alert(element) }) ``` +{{< callout info >}} +For the sole purpose of dismissing an alert, it isn't necessary to initialize the component manually via the JS API. By making use of `data-bs-dismiss="alert"`, the component will be initialized automatically and properly dismissed. -Or with `data` attributes on a button **within the alert**, as demonstrated above: +See the [triggers](#triggers) section for more details. +{{< /callout >}} + +### 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> ``` -Note that closing an alert will remove it from the DOM. - -### Methods - -You can create an alert instance with the alert constructor, for example: +or on a button **outside the alert** using the `data-bs-target` as demonstrated above: -```js -var myAlert = document.getElementById('myAlert') -var bsAlert = new bootstrap.Alert(myAlert) +```html +<button type="button" class="btn-close" data-bs-dismiss="alert" data-bs-target="#my-alert" aria-label="Close"></button> ``` -This makes an alert listen for click events on descendant elements which have the `data-bs-dismiss="alert"` attribute. (Not necessary when using the data-api's auto-initialization.) +**Note that closing an alert will remove it from the DOM.** + +### Methods <table class="table"> <thead> |