You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
This repository was archived by the owner on Mar 27, 2025. It is now read-only.
Copy file name to clipboardExpand all lines: apps/docs/src/docs/components/toast.md
+9-9Lines changed: 9 additions & 9 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -10,11 +10,11 @@
10
10
11
11
<divclass="lead mb-5">
12
12
13
-
Push notifications to your visitors with `BToast` and `BToaster`. These are lightweight components which are generally easily customizable for generating alert messages
13
+
Push notifications to your visitors with `BToast` and `BToaster`. These are lightweight components that are generally easily customizable for generating alert messages
14
14
15
15
</div>
16
16
17
-
Toasts are lightweight notifications designed to mimic the push notifications that have been popularized by mobile and desktop operating systems. Toasts are intended to be small interruptions to your visitors or users, and therefore should contain minimal, to-the-point, non-interactive content. Please refer to the Accessibility tips section below for important usage information
17
+
Toasts are lightweight notifications designed to mimic the push notifications that have been popularized by mobile and desktop operating systems. Toasts are intended to be small interruptions to your visitors or users and therefore should contain minimal, to-the-point, non-interactive content. Please refer to the Accessibility Tips section below for important usage information
18
18
19
19
## Overview
20
20
@@ -53,12 +53,12 @@ const {show} = useToast()
53
53
54
54
### String
55
55
56
-
There are two acceptable options for the `show` function. The first set of options are a `string` followed by an `object`. The string corresponds to the body of the `Toast`. If only the string is passed, a simple `Toast` is made, and by default it is made at the `top-right` and it will expire in `5000` ms. You can pass in an optional `object` for the second parameter where you have a list of options, such as `pos`, `value`, `variant`, etc. Many of the values correspond to props for the `BToast` component. However, some props are taken out as they are reserved
56
+
There are two acceptable options for the `show` function. The first set of options is a `string` followed by an `object`. The string corresponds to the body of the `Toast`. If only the string is passed, a simple `Toast` is made, and by default, it is made at the `top-right` and it will expire in `5000` ms. You can pass in an optional `object` for the second parameter where you have a list of options, such as `pos`, `value`, `variant`, etc. Many of the values correspond to props for the `BToast` component. However, some props are taken out as they are reserved
57
57
58
58
<HighlightCard>
59
59
<BButton
60
60
@click="
61
-
show('Bar (this Toast will not autoexpire)', {
61
+
show('Bar (this Toast will not auto-expire)', {
62
62
title: 'Foo',
63
63
variant: 'danger',
64
64
pos: 'top-center',
@@ -74,7 +74,7 @@ There are two acceptable options for the `show` function. The first set of optio
74
74
<template>
75
75
<BButton
76
76
@click="
77
-
show('Bar (this Toast will not autoexpire)', {
77
+
show('Bar (this Toast will not auto-expire)', {
78
78
title: 'Foo',
79
79
variant: 'danger',
80
80
pos: 'top-center',
@@ -103,7 +103,7 @@ The second option is to use a full object, this is similar to the string, howeve
103
103
<BButton
104
104
@click="
105
105
show({
106
-
body: 'Bar (this Toast will not autoexpire)',
106
+
body: 'Bar (this Toast will not auto-expire)',
107
107
title: 'Foo',
108
108
variant: 'danger',
109
109
pos: 'top-center',
@@ -120,7 +120,7 @@ The second option is to use a full object, this is similar to the string, howeve
120
120
<BButton
121
121
@click="
122
122
show({
123
-
body: 'Bar (this Toast will not autoexpire)',
123
+
body: 'Bar (this Toast will not auto-expire)',
124
124
title: 'Foo',
125
125
variant: 'danger',
126
126
pos: 'top-center',
@@ -219,7 +219,7 @@ You can place toasts in static static placements, and with more control by using
219
219
220
220
## Automatic Countdown
221
221
222
-
As you may have noticed, `BToast` counts down similar to `BAlert`, in fact, it actually uses the same underlying engine that powers the countdown timer of `BAlert`, albeit with some minor adjustments. So, many of the same props are shared, including the `interval` props and others. So, similar quirks apply
222
+
As you may have noticed, `BToast` counts down similarly to `BAlert` it uses the same underlying engine that powers the countdown timer of `BAlert`, albeit with some minor adjustments. So, many of the same props are shared, including the `interval` props and others. So, similar quirks apply
223
223
224
224
<HighlightCard>
225
225
<BButton
@@ -271,7 +271,7 @@ const {show} = useToast()
271
271
272
272
### ProgressBar Integration
273
273
274
-
As you may have noticed in that example, there was a built-in progress bar. This is triggered when using a value that is a `number` and when `progressProps` is not `undefined`. This was implemented because it can be difficult do modify the behavior of `BToast` when using a pure method, and the appearance of a ticking down progress bar is a "nice to have". Although, it is not out of the box behavior by Bootstrap, so its behavior is opt-in. This functions similarly to examples in `BAlert`
274
+
As you may have noticed in that example, there was a built-in progress bar. This is triggered when using a value that is a `number` and when `progressProps` is not `undefined`. This was implemented because it can be difficult to modify the behavior of `BToast` when using a pure method, and the appearance of a ticking down progress bar is a "nice to have". Although it is not out of the box behavior by Bootstrap, its behavior is opt-in. This functions similarly to examples in `BAlert`
0 commit comments