mirror of
https://github.com/noodlapp/noodl-docs.git
synced 2026-01-12 15:22:53 +01:00
53f0d6320e
Co-Authored-By: kotte <14197736+mrtamagotchi@users.noreply.github.com> Co-Authored-By: mikaeltellhed <2311083+mikaeltellhed@users.noreply.github.com> Co-Authored-By: Tore Knudsen <18231882+torekndsn@users.noreply.github.com> Co-Authored-By: Michael Cartner <32543275+michaelcartner@users.noreply.github.com>
58 lines
2.4 KiB
Markdown
58 lines
2.4 KiB
Markdown
---
|
|
title: Toast
|
|
hide_title: true
|
|
---
|
|
|
|
# Toast
|
|
|
|
A UI component for displaying Toast messages. This UI component comes with four Toast variations; A **Warning**, **Error**, **Success**, and a **Neutral** variation. This component utilizes the **Show Popup** node to display the toast from a Signal input, you can read more about popups in this [guide](/docs/guides/navigation/popups).
|
|
|
|
<div className="ndl-image-with-background l">
|
|
|
|
|
|
|
|
</div>
|
|
|
|
After cloning the prefab you will see a logic component called **Show Toast** in your project. The example below demonstrates how to show the Toast with a click event from a Button node, by connecting a Signal to the **Do** Input of the **Show Toast** node. In the Sidebar you can select what Toast type to show.
|
|
|
|
<div className="ndl-image-with-background xl">
|
|
|
|
|
|
|
|
</div>
|
|
|
|
You can modify the appearence of the toast by editing the sub components of the **Show Toast** parent component. Each type of toast has its own component with its unique styling, and the **Toast Component** contains animations and logic that are shared between all types of toasts.
|
|
|
|
<div className="ndl-image-with-background">
|
|
|
|
|
|
|
|
</div>
|
|
|
|
In the **Toast Component** you can modify the show and hide transition using the **State** node. You can read more about how to use the **State** node in this [guide](/docs/guides/user-interfaces/states). A **Delay** node is used to control the time the toast is visible, and the **Close Popup** is triggered after the close transition is completed (important).
|
|
|
|
<div className="ndl-image-with-background xl">
|
|
|
|
|
|
|
|
</div>
|
|
|
|
The content of a toast component for a specific type is faily straight forward. It contains the visual elements of the toast and the message as a **Component Input**.
|
|
|
|
<div className="ndl-image-with-background xl">
|
|
|
|
|
|
|
|
</div>
|
|
|
|
If you want to add additional types of toast you will need to modify the **State** node in the **Show Toast** logic parent component. It contains a state for each type of toast. You will then need to create a child component with the corresponding name (simply duplicate one of the existing components, such as **Normal** and rename it).
|
|
|
|
|
|
<div className="ndl-image-with-background xl">
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|