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 Toggles can be used to check or uncheck, based on the condition, by toggling the button, which is styled with attractive and beautiful toggle buttons. Besides that, the toggles have many attributes and methods to control them programmatically. The toggles have different colors according to the use case.
Blaze UI Toggles Attributes:
- toggle: This attribute accepts the boolean values & depicts the initial state of the Toggle.
- type: This attribute is used to specify the color of the toggle.
Blaze UI Toggles Method:
- isToggled: This method returns the boolean value ie whether the toggle is checked or not.
Blaze UI Toggle Color Types:
- default: It can be depicted by the default grey color of the handle.
- brand: It can be depicted by the Blue-grey color of the handle.
- info: It can be depicted by the Blue color of the handle.
- warning: It can be depicted by the Yellow color of the handle.
- success: It can be depicted by the Green color of the handle.
- error: It can be depicted by the Red color of the handle.
Syntax: To create a Blaze UI toggle, use the following syntax:
<blaze-toggle toggled type="colorType">Content</blaze-toggle>
Example 1: This example illustrates the Blaze UI Toggles having different colors of toggles.
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8" />
<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>
<h3>Blaze UI Toggles</h3>
</div>
<div class="u-center-block__content
u-center-block__content--horizontal">
<blaze-toggle toggled type="error">
Error Toggle
</blaze-toggle>
<blaze-toggle toggled type="info">
Info Toggle
</blaze-toggle>
<blaze-toggle toggled>
Default Toggle
</blaze-toggle>
<blaze-toggle toggled type="warning">
Warning Toggle
</blaze-toggle>
<blaze-toggle toggled type="success">
Success Toggle
</blaze-toggle>
<blaze-toggle toggled type="brand">
Brand Toggle
</blaze-toggle>
</div>
</center>
</div>
</body>
</html>
|
Output:
Example 2: In the following example, when we click on the button, we get an alert that the toggle on the page is toggled or not.
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8" />
<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>
<h2 style="color: green;">GeeksforGeeks</h2>
<h4>Blaze UI Toggles</h4>
</div>
<blaze-toggle toggled type="success" id="toggle">
GeeksforGeeks is the Best Website for
Computer Science
</blaze-toggle>
<button onclick="checkAnswer()">Check Answer</button>
</center>
</div>
<script>
async function checkAnswer() {
let toggled =
await document.getElementById('toggle').isToggled()
alert('The answer is ' + toggled)
}
</script>
</body>
</html>
|
Output:
Reference: https://www.blazeui.com/components/toggles