Blaze UI is a CSS open-source framework. It is a lightweight UI toolkit and provides great tools for building customized and scalable applications. It can work with any framework that exists. It can adapt to any ecosystem. All designs or CSS are mobile-first and hence responsive. It project is available open-source so a large community maintains it.
Blaze UI Toasts are special types of alerts that appear on some defined position on the screen. They are used to notify the user of some action for immediate response. They are smaller than the size of alerts.
Blaze UI Toasts attributes and Methods:
- position: Here we need to mention the position to anchor the toast which is topright, bottomright, bottomleft, or topleft.
- dismissible: The field asks for a boolean type of value and makes the toast dismissible if true or vice versa.
- open: This field asks for a boolean type of value and states that the toast should be open in the initial state.
- show(): This method opens the toast.
- close(): This method closes the toast.
- isOpen(): Returns boolean value if the toast is open.
Syntax: The syntax for a toast is as follows:
<blaze-alerts position="bottomright">
<blaze-alert open dismissible type="success">
Hello
</blaze-alert>
</blaze-alerts>Example 1: In the following example, we have some toasts open by default on the webpage with different colors.
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>GeeksforGeeks | BlazeUI</title>
<link rel="stylesheet" href=
<script type="module" src=
</script>
<script nomodule="" src=
</script>
</head>
<body>
<div class="o-container">
<center>
<div>
<h1 style="color: green;">GeeksforGeeks</h1>
</div>
<strong>Blaze UI Toasts</strong>
</center>
<blaze-alerts position="bottomleft">
<blaze-alert open dismissible type="success">
Data Structures
</blaze-alert>
<blaze-alert open dismissible type="warning">
Algorithms
</blaze-alert>
<blaze-alert open dismissible type="info">
Competitive Programming
</blaze-alert>
<blaze-alert open dismissible type="brand">
Machine Learning
</blaze-alert>
</blaze-alerts>
</div>
<script></script>
</body>
</html>
|
Output:
Example 2: In the following example, we have some buttons which display the different toasts.
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>GeeksforGeeks | BlazeUI</title>
<link rel="stylesheet" href=
<script type="module" src=
</script>
<script nomodule="" src=
</script>
</head>
<body>
<div class="o-container">
<center>
<div>
<h1 style="color: green;">GeeksforGeeks</h1>
</div>
<strong>Blaze UI Toasts</strong>
<br/>
<br/>
<button onclick="opentToast('toast1')">
Toast 1
</button>
<button onclick="opentToast('toast2')">
Toast 2
</button>
<button onclick="opentToast('toast3')">
Toast 3
</button>
<button onclick="opentToast('toast4')">
Toast 4
</button>
</center>
<blaze-alerts position="bottomleft">
<blaze-alert id="toast1" dismissible type="success">
Data Structures
</blaze-alert>
<blaze-alert id="toast2" dismissible type="warning">
Algorithms
</blaze-alert>
<blaze-alert id="toast3" dismissible type="info">
Competitive Programming
</blaze-alert>
<blaze-alert id="toast4" dismissible type="brand">
Machine Learning
</blaze-alert>
</blaze-alerts>
</div>
<script>
function opentToast(toastName) {
document.getElementById(toastName).show()
}
</script>
</body>
</html>
|
Output:
Reference: https://www.blazeui.com/components/toasts/