Skip to content
Related Articles

Related Articles

Blaze UI Toggles Methods

Improve Article
Save Article
  • Last Updated : 21 Apr, 2022
Improve Article
Save Article

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=
  
    <script type="module" src=
   </script>
    <script nomodule="" src=
   </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>


Output:

 

Reference: https://www.blazeui.com/components/toggles


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!