zerodevx
Question about non-dismissible toast
I have the following toast option.
const toastOptions = {
duration: 4000, // duration of progress bar tween to the `next` value
initial: 1, // initial progress bar value
next: 0, // next progress value
pausable: false, // pause progress bar tween on mouse hover
dismissable: false, // allow dismiss with close button
reversed: true, // insert new toast to bottom of stack
intro: { y: 192 }, // toast intro fly animation settings
theme: {}, // css var overrides
};
The toast never goes away. Just as on your demo page.
However, my expectation was that the the toast would disappear after 4 seconds(duration: 4000).
If I wanted a toast to never expire. I would just set duration: 0. The option: dismissable should only control whether an X will appear that will allow the user to dismiss the toast regardless of the value for duration.
I have the following toast option.
const toastOptions = { duration: 4000, // duration of progress bar tween to the `next` value initial: 1, // initial progress bar value next: 0, // next progress value pausable: false, // pause progress bar tween on mouse hover dismissable: false, // allow dismiss with close button reversed: true, // insert new toast to bottom of stack intro: { y: 192 }, // toast intro fly animation settings theme: {}, // css var overrides };
The above options should push a toast that disappears after 4s without a dismiss button. Does it not?
duration does not mean expiry - it refers to the time it takes for the progress bar to travel to the next value. If next is a terminal value (either 0 or 1), the toast is removed.
So if you want a toast to never expire, use these options:
const opts = {
duration: 4000, // any value, it doesn't matter
initial: 0, // because we set `initial` to 0
next: 0, // which is equal to the `next` value, so there's no progress
dismissable: false, // and therefore this toast never expires
...
}
@zerodevx I ran into the same issue, I was looking for settings that don't show the progress bar. Tried all sorts of combinations and could not figure it out.
The easiest way to hide the progress bar is to set its height to 0.
<script>
import { toast, SvelteToast } from '@zerodevx/svelte-toast'
// This toast auto-closes after 8s and doesn't show the progress bar
toast.push('hello', { duration: 8000 ))
</script>
<style>
root: {
--toastBarHeight: 0;
}
</style>
<SvelteToast />
Just to give some context: the duration key refers to the time taken for the progress bar to travel from initial to next; the toast auto-closes when progress bar reaches a terminal position (either 0 or 1).
Hope this helps.