Blaze UI Toggles Methods
Blaze UI is a free open source UI Toolkit that provides a great structure for building websites quickly with a scalable and maintainable foundation. All components in Blaze UI are developed mobile-first and rely solely on native browser features, not a separate library or framework. It helps us to create a scalable and responsive website fast and efficiently with a consistent style.
In this article, we will be seeing the Blaze UI Toggle methods. The isToggled() method returns a Promise which resolves into a boolean value that refers to the current state of the toggle component, returns “true” if the toggle is on, and returns “false” otherwise.
Syntax:
document.querySelector(".selector").isToggled();
Example 1: This example represents how to use the isToggled() method to get the current state of the toggle component.
HTML
<!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 >Blaze UI - Toggle Methods</ title > < link rel = "stylesheet" href = "https://unpkg.com/@blaze/css@10.0.4/dist/blaze/blaze.css" > < script type = "module" src = "https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.esm.js" > </ script > < script nomodule = "" src = "https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.js" > </ script > < style > body { font-family: sans-serif; text-align: center; } .wrapper{ display: flex; justify-content: center; align-items: center; flex-direction: column; } .c-button{ margin-top: 20px; } </ style > </ head > < body > < div class = "u-centered" > < h2 style = "color:green;" >w3wiki</ h2 > < h3 >Toggle Methods - Blaze UI</ h3 > </ div > < div class = "wrapper u-window-box-super" > < blaze-toggle id = "toggle1" toggled> Toggle Me </ blaze-toggle > < div > < button class = "c-button" onclick = "getToggleValue()" > Check isToggled </ button > </ div > < p >The returned value of isToggled method is: < b > < span id = "result" ></ span ></ b ></ p > </ div > < script > function getToggleValue(){ document.querySelector("#toggle1") .isToggled().then(function (result) { document.querySelector("#result") .innerText = result; }) } </ script > </ body > </ html > |
Output:
Reference: https://www.blazeui.com/components/toggles
Contact Us