ToggleButton - Documentation | www.HtmlElements.com

Overview

This element is a clickable toggle button with two states: checked and unchecked. The state can be changed by clicking on the button or by setting the checked property.

Files

  • CSS files
    • smart.default.css - the CSS file containing the styles for the element.
  • Javascript module
    • smart.button.js - the JS module which is in the source/modules/ folder and loads all script dependencies.
  • Javascript files
    • smart.element.js - the base class
    • smart.button.js - the JS file containing the element definition

    Usage

    • Import a module

      With this approach, we import a module and create the web component by using the Smart function. The #button is a smart-toggle-button tag.

      import {smartToggleButton} from "../../source/modules/smart.button.js";
      
      Smart('#button', class {
      get properties() {
      	return {
      		checked: true
      	}
      }
      });
      
      document.readyState === 'complete' ? init() : window.onload = init;
      
      function init() { 
      
      }
      
      Using the Smart function is optional. You can use const button = document.querySelector("#button"); and set the properties like that:
      const button = document.querySelector("#button");
      
      button.checked = true;
      

    • Import a module, Init on Demand

      The following imports the web component's module and creates it on demand, when the document is ready. The #button is a DIV tag.

      import {smartToggleButton} from "../../source/modules/smart.button.js";
      
      document.readyState === 'complete' ? init() : window.onload = init;
      
      function init() { 
      const button = new smartToggleButton('#button', {
         	checked: true
      });
      }
      
    • Load scripts

      The following code adds the custom element to the page.

      <!DOCTYPE html>
      <html lang="en">
      <head>
       <link rel="stylesheet" href="../../source/styles/smart.default.css" type="text/css" />
       <script type="text/javascript" src="../../source/smart.element.js"></script>
       <script type="text/javascript" src="../../source/smart.button.js"></script>
      </head>
      <body>
       <smart-toggle-button>Toggle button</smart-toggle-button>
      </body>
      </html>

      Note how smart.element.js is declared before everything else. This is mandatory for all custom elements.

      Demo

Create, Append, Remove, Get/Set Property, Invoke Method, Bind to Event


Create a new element:
const button = document.createElement('smart-toggle-button');

Append it to the DOM:
document.body.appendChild(button);

Remove it from the DOM:
button.parentNode.removeChild(button);

Set a property:
button.propertyName = propertyValue;

Get a property value:
const propertyValue = button.propertyName;

Invoke a method:
button.methodName(argument1, argument2);

Add Event Listener:
const eventHandler = (event) => {
// your code here.
};

button.addEventListener(eventName, eventHandler);

Remove Event Listener:
button.removeEventListener(eventName, eventHandler, true);

Appearance

If the user wants to change the content of the check box, this can be accomplished by setting the innerHTML property of the element, like so:

<!DOCTYPE html>
<html lang="en">
<head>
 <link rel="stylesheet" href="../../source/styles/smart.default.css" type="text/css" />
 <script type="text/javascript" src="../../source/smart.element.js"></script>
 <script type="text/javascript" src="../../source/smart.button.js"></script>
 <script>
 window.onload = function () {
    document.querySelector('smart-toggle-button').checked = true;
 }
 </script>
</head>
<body>
 <smart-toggle-button>Toggle button</smart-toggle-button>
</body>
</html>

Behavior

Using the checked property the user can change the check state of the element dynamically as well.

By default the checked of the check box is set to false. It could be set to true or false

The element offers multiple click modes:

  • hover
  • press
  • release
  • pressAndRelease

clickMode is a property of the button that can be changed either from the HTML tag by setting the attribute click-mode and assigning a new value to it or by following the earlier approach and change it dynamically via javascript during the onload stage of the window object or later

Here's how to set a new clickMode on element initialiation:

<!DOCTYPE html>
<html lang="en">
<head>
 <link rel="stylesheet" href="../../source/styles/smart.default.css" type="text/css" />
 <script type="text/javascript" src="../../source/smart.element.js"></script>
 <script type="text/javascript" src="../../source/smart.button.js"></script>
</head>
<body>
 <smart-toggle-button click-mode="press">Toggle button</smart-toggle-button>
</body>
</html>

And here's how to change it via javascript after the element has been initialized:

<!DOCTYPE html>
<html lang="en">
<head>
 <link rel="stylesheet" href="../../source/styles/smart.default.css" type="text/css" />
 <script type="text/javascript" src="../../source/smart.element.js"></script>
 <script type="text/javascript" src="../../source/smart.button.js"></script>
 <script>
 window.onload = function () {
    document.querySelector('smart-toggle-button').clickMode = 'pressAndRelease';
 }
 </script>
</head>
<body>
 <smart-toggle-button>Toggle button</smart-toggle-button>
</body>
</html>

Keyboard Support

Smart.ToggleButton check state could be changed via Space. Space should change the state only to Checked or Unchecked. The element is focusable and can be focused using the Tab button.