Array of toasts (how to?)

Ask us anything How do I?
1

On WeWeb.io dashboard, there are toasts that popup from the bottom left.

How do you do this with an array of toasts?

I know how to do this for one toast, by binding the display of the section to some variable, to make them transition in and transition out.

But, I cannot figure out how to get multiple toasts in a section to transition in and out.

I’ve also been using a timer on actions to close a toast after it is displayed. But, maybe there is a simpler way so that doesnt need to be done for every toast.

1 Like
2

An array of toast is doable in weweb, you need to add some code if you want animation. If you need multiple mixed toasts (persisent + temporary + dismissable + progress indicator) probably it’s better to create a custom plugin to integrate an existing library.

For the simple use case:
image

  • create a section that will be the container of the toasts. Set the height to zero as we do not want it to take space in the page.
  • add a container with vertical direction. Enable z-axis to have it on top of every other element, set the position to “fixed” and define the position you want in the page.
    image
    image365×534 19.5 KB
  • the items of the container should be a variable array that holds the toast information.
  • inside the container you can create multiple toast templates if you want. In this example I only added a single info toast
  • the middle wrapper is not really necessary for this basic example, it is just convenient for the animations that I added with custom code
  • add anything you need in the toast

As for the variable the most basic is an array of object with the type of toast and the message.

The logic can be as simple as:

  • push a new object at the end of the toast array
  • add a delay action
  • remove the object at index 0 in the array

If you use a bit of code with javascript actions you can get something like that
chrome_OFuWdNEnGB

2 Likes
3

@dorilama Thank you!

It’s the animations part to exit the toast that I am struggling with. Can you share a screenshot of how you have the animations set up?

4

For the prototype the animations are handled by an animation loop using requestAnimationFrame. It is quite basic, nothing fancy or smart.
Basically 200ms before the “expiration time” of the toast I add a “exit” property to the toast object. On the toast element I add a class with the animation conditionally to this property. Instead of using a time delay action I start the animation loop so that I can update all the toasts at the same time and keep track of the “progress” to animate the progress bar. Of course you need to stop the loop when not necessary and start it only if needed and is not already running.

This is all very error-prone and not optimized as it was a poc. Probably it is better to use a plugin with an existing library or the TransitionGroup element of vue.

1 Like