Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Creating Snackbar using HTML, CSS and Javascript
Snackbars are notification bars that appear at the bottom of a web page to display an important message, usually to confirm an action or provide feedback to the user. It is displayed on the screen for fewer seconds and made to disappear. They are an essential element of user interface design and are widely used in web applications.
Approach - 1
Here we will be creating a simple and basic snackbar, which will be displayed for 3 seconds and disappears whenever the user taps the show snackbar button.
Algorithm
Make the title of the HTML document as Snackbar
In the style section,
Center the contents of the body.
Style the button as per the design.
Hide the snackbar by default.
Add animation for the snackbar for showing and hiding.
Set the heading to be a snackbar.
Add a button and snackbar element.
In the script section,
Create a function to show the snackbar and remove it after 3 seconds.
Example
Snackbar Snackbar
Welcome to Tutorialspoint!
Approach - 2
We can also add some actions to the snackbar like dismiss, in order to close or hide the snackbar immediately.
Algorithm
Set the title as Snackbar with dismiss action.
In the style section,
Style the dismiss action.
Add the hover effect to it.
Make the heading as a snackbar with dismiss action.
Add a button and snackbar element.
In the script section,
Create a function to show the snackbar.
Another function for dismissing it.
Example
Snackbar with dismiss action Snackbar with dismiss action
Snackbar messageDismiss
Approach - 3
To get a sleek and elegant look, it is necessary to customize the snackbar to match the website design.
Algorithm
Set a relevant title.
Style the body.
Customize the snackbar with CSS.
Add javascript functionality.
Example
Custom Snackbar Example Coloured Snackbar
Conclusion
The snackbars in the user interfaces are used to display short and crisp information to the user. It is essential to make these messages dismissable. It should be used only to display important messages that require the user's attention. Another important note is that these messages should not contain any confidential and sensitive information. The duration for which the snackbar is shown must be less.
1K+ Views
