diff options
author | Mark Otto <markd.otto@gmail.com> | 2022-03-14 10:38:04 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2022-03-14 10:38:04 +0300 |
commit | a9a89debc7535a1c5857ced28c1002a2f682889f (patch) | |
tree | c12f21a8b666d8a0605126dd4488cff41e1861b4 /site/content/docs/5.1/components/toasts.md | |
parent | 8fe82c7176a577190f2d69f9cbdd990b7f3c8493 (diff) |
Rewrite docs tables in Markdown with table shortcode (#31337)
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
Co-authored-by: GeoSot <geo.sotis@gmail.com>
Diffstat (limited to 'site/content/docs/5.1/components/toasts.md')
-rw-r--r-- | site/content/docs/5.1/components/toasts.md | 124 |
1 files changed, 24 insertions, 100 deletions
diff --git a/site/content/docs/5.1/components/toasts.md b/site/content/docs/5.1/components/toasts.md index 531181c2f9..a982c47db3 100644 --- a/site/content/docs/5.1/components/toasts.md +++ b/site/content/docs/5.1/components/toasts.md @@ -349,38 +349,13 @@ var toastList = toastElList.map(function (toastEl) { Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-bs-`, as in `data-bs-animation=""`. -<table class="table"> - <thead> - <tr> - <th style="width: 100px;">Name</th> - <th style="width: 100px;">Type</th> - <th style="width: 50px;">Default</th> - <th>Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>animation</code></td> - <td>boolean</td> - <td><code>true</code></td> - <td>Apply a CSS fade transition to the toast</td> - </tr> - <tr> - <td><code>autohide</code></td> - <td>boolean</td> - <td><code>true</code></td> - <td>Auto hide the toast</td> - </tr> - <tr> - <td><code>delay</code></td> - <td>number</td> - <td> - <code>5000</code> - </td> - <td>Delay hiding the toast (ms)</td> - </tr> - </tbody> -</table> +{{< bs-table "table" >}} +| Name | Type | Default | Description | +| --- | --- | --- | --- | +| `animation` | boolean | `true` | Apply a CSS fade transition to the toast | +| `autohide` | boolean | `true` | Automatically hide the toast after the delay | +| `delay` | number | `5000` | Delay in milliseconds before hiding the toast | +{{< /bs-table >}} ### Methods @@ -388,77 +363,26 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap {{< partial "callout-danger-async-methods.md" >}} {{< /callout >}} -#### show - -Reveals an element's toast. **Returns to the caller before the toast has actually been shown** (i.e. before the `shown.bs.toast` event occurs). -You have to manually call this method, instead your toast won't show. - -```js -toast.show() -``` - -#### hide - -Hides an element's toast. **Returns to the caller before the toast has actually been hidden** (i.e. before the `hidden.bs.toast` event occurs). You have to manually call this method if you made `autohide` to `false`. - -```js -toast.hide() -``` - -#### dispose - -Hides an element's toast. Your toast will remain on the DOM but won't show anymore. - -```js -toast.dispose() -``` - -#### getInstance - -*Static* method which allows you to get the toast instance associated with a DOM element - -```js -var myToastEl = document.getElementById('myToastEl') -var myToast = bootstrap.Toast.getInstance(myToastEl) // Returns a Bootstrap toast instance -``` - -#### getOrCreateInstance - -*Static* method which allows you to get the toast instance associated with a DOM element, or create a new one in case it wasn't initialized - -```js -var myToastEl = document.getElementById('myToastEl') -var myToast = bootstrap.Toast.getOrCreateInstance(myToastEl) // Returns a Bootstrap toast instance -``` +{{< bs-table "table" >}} +| Method | Description | +| --- | --- | +| `show` | Reveals an element's toast. **Returns to the caller before the toast has actually been shown** (i.e. before the `shown.bs.toast` event occurs). You have to manually call this method, instead your toast won't show. | +| `hide` | Hides an element's toast. **Returns to the caller before the toast has actually been hidden** (i.e. before the `hidden.bs.toast` event occurs). You have to manually call this method if you made `autohide` to `false`. | +| `dispose` | Hides an element's toast. Your toast will remain on the DOM but won't show anymore. | +| `getInstance` | *Static* method which allows you to get the scrollspy instance associated with a DOM element. <br> Par example: `var myToastEl = document.getElementById('myToastEl')` `var myToast = bootstrap.Toast.getInstance(myToastEl)` Returns a Bootstrap toast instance| +| `getOrCreateInstance` | *Static* method which allows you to get the scrollspy instance associated with a DOM element, or create a new one, in case it wasn't initialized. <br>`var myToastEl = document.getElementById('myToastEl')` `var myToast = bootstrap.Toast.getOrCreateInstance(myToastEl)` Returns a Bootstrap toast instance | +{{< /bs-table >}} ### Events -<table class="table"> - <thead> - <tr> - <th style="width: 150px;">Event type</th> - <th>Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>show.bs.toast</code></td> - <td>This event fires immediately when the <code>show</code> instance method is called.</td> - </tr> - <tr> - <td><code>shown.bs.toast</code></td> - <td>This event is fired when the toast has been made visible to the user.</td> - </tr> - <tr> - <td><code>hide.bs.toast</code></td> - <td>This event is fired immediately when the <code>hide</code> instance method has been called.</td> - </tr> - <tr> - <td><code>hidden.bs.toast</code></td> - <td>This event is fired when the toast has finished being hidden from the user.</td> - </tr> - </tbody> -</table> +{{< bs-table "table" >}} +| Event | Description | +| --- | --- | +| `show.bs.toast` | This event fires immediately when the `show` instance method is called. | +| `shown.bs.toast` | This event is fired when the toast has been made visible to the user. | +| `hide.bs.toast` | This event is fired immediately when the `hide` instance method has been called. | +| `hidden.bs.toast` | This event is fired when the toast has finished being hidden from the user. | +{{< /bs-table >}} ```js var myToastEl = document.getElementById('myToast') |