Blaze UI Toggles Methods

Last Updated : 21 Apr, 2022

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;">GeeksforGeeks</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>