Learn about the Snackbar component: its characteristics, options, and common uses.
After reading this article, you’ll know:
-
What the Snackbar component is and its major options
-
How to use the components in your application
-
The difference between the Snackbar component and other content components
What is the Snackbar component?
The Snackbar component helps you create dynamic pages. You can hide and show other components using the Snackbar component, you can have these hide or show on a timer.
This allows us to create a success or error message using an Alert component inside of a Snackbar component that will pop up and then hide after a while.
Options
The Snackbar component has several options, the first option you'll notice is the Toggle visibility option. With this option, you can hide, or show, the component when you compile the page.
Content allows you to set a message for your users when the Snackbar component is triggered. You also keep this empty add an Alert component and then use the content option of the Alert to display a message. Also, note that you can add dynamic data here by clicking on the blue plus icon.
If you check the checkbox 'Allow to overwrite by the server response' this means that if you use this component in another component like a Create form, then if the action behind the form fails the error message will be shown here.
Text style is an options that allow you to change what kind of text you want to display, for example, you can use 'Header 1' to display the header text for your page. You could also use Body 1 or Body 2 to display your text more broadly.
Vertical and horizontal positions allow you to determine where the Snackbar component is displayed on your page. The options speak for themself, try them out to see what best fits your use case.
Hiding and showing options allow you to specifically determine whether you want the Snackbar component hidden by default, or perhaps shown. You can also select the option to hide the Snackbar component after a certain amount of time when it does pop up. Note that the duration for this is in milliseconds.
Using the Snackbar component
Drag the Snackbar component onto your empty canvas, or above the components you have already put onto your canvas. (You can also drag the Snackbar component to the top of the page using the page tree).
With the Snackbar component on your page, you can customize it how you prefer. Change the content, change the position, hide it or not. Use it inside of a Conditional component and make it show under certain conditions, check out this article that uses this example.
You can also combine and use other components inside the Snackbar component and have those shown or hidden based on specific conditions. The most used component within the Snackbar is the Alert component, read more about that component here.
Snackbar component vs other components
The Snackbar component is hard to measure up against other components, the ALert is the only one that'd fit in its street. But what does come close to this component are the interactions that you can apply on the components in your Page. Basically, if all you want to do is have a pop-up that hides after a certain time the Snackbar is your go-to component that you can customize quickly and add components into, if you want to have triggers based on other events you might prefer to use interactions instead.