Overview

This element represents a switch button that has three states: null, checked and unchecked. The state can be changed by clicking on the widget, dragging the widgets thumb or by setting the checked property to the desired state.

To initialize a Switch Button the user has to include the following files to the head of the page:

  • smart.base.css - the CSS file containing the styles for element
  • smart.element.js - the base class
  • smart.button.js - the JS file containing the base class about all button elements
  • smart.switchbutton.js - the JS file containing the element definition

The following code adds a Switch Button to the page.

<!DOCTYPE html>
<html lang="en">
<head>
 <link rel="stylesheet" href="../../source/styles/smart.base.css" type="text/css" />
 <script type="text/javascript" src="webcomponents-lite.js">
</script> <script type="text/javascript" src="../../source/smart.element.js"></script> <script type="text/javascript" src="../../source/smart.button.js"></script> <script type="text/javascript" src="../../source/smart.switchbutton.js"></script> </head> <body> <smart-switch-button></smart-switch-button> </body> </html>

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

Demo

Appearance

The content of the element in the different check states couls be changed via trueContent and falseContent properties.

<!DOCTYPE html>
<html lang="en">
<head>
 <link rel="stylesheet" href="../../source/styles/smart.base.css" type="text/css" />
 <script type="text/javascript" src="webcomponents-lite.js">
</script> <script type="text/javascript" src="../../source/smart.element.js"></script> <script type="text/javascript" src="../../source/smart.button.js"></script> <script type="text/javascript" src="../../source/smart.switchbutton.js"></script> <script> window.onload = function () { let switchButton = document.querySelector('smart-switch-button'); switchButton.trueContent = 'On'; switchButton.falseContent = 'Off'; } </script> </head> <body> <smart-switch-button></smart-switch-button> </body> </html>

Demo

smart-switch-button could be horizontal or vertical. The orientation could be changed via "orientation" property.

<!DOCTYPE html>
<html lang="en">
<head>
 <link rel="stylesheet" href="../../source/styles/smart.base.css" type="text/css" />
 <script type="text/javascript" src="webcomponents-lite.js">
</script> <script type="text/javascript" src="../../source/smart.element.js"></script> <script type="text/javascript" src="../../source/smart.button.js"></script> <script type="text/javascript" src="../../source/smart.switchbutton.js"></script> <script> window.onload = function () { document.querySelector('smart-switch-button').orientation = 'vertical'; } </script> </head> <body> <smart-switch-button></smart-switch-button> </body> </html>

Demo

Behavior

Using the checked property the user can change the check state of the element dynamically as well. checked property could be set to: true, false or null. By default is set to false.

smart-switch-button also could be inverted. Inverted property changes the position of "true" and "false" states.

The element offers multiple click modes:

  • 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.base.css" type="text/css" />
 <script type="text/javascript" src="webcomponents-lite.js">
</script> <script type="text/javascript" src="../../source/smart.element.js"></script> <script type="text/javascript" src="../../source/smart.button.js"></script> <script type="text/javascript" src="../../source/smart.switchbutton.js"></script> </head> <body> <smart-switch-button switch-mode="click" click-mode="press"></smart-switch-button> </body> </html>

Demo

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.base.css" type="text/css" />
 <script type="text/javascript" src="webcomponents-lite.js">
</script> <script type="text/javascript" src="../../source/smart.element.js"></script> <script type="text/javascript" src="../../source/smart.button.js"></script> <script type="text/javascript" src="../../source/smart.switchbutton.js"></script> <script> window.onload = function () { var switchButton = document.getElementsByTagName('smart-switch-button')[0], switchButton.switchMode = 'click'; switchButton.clickMode = 'pressAndRelease'; } </script> </head> <body> <smart-switch-button></smart-switch-button> </body> </html>

Demo

The element offers multiple switch modes:

  • default - the switch button changes it's state on click and drag
  • click - the switch button changes it's state on click only
  • drag - the switch button changes it's state on drag only

When Smart.SwitchButton is readonly it can be used as indicator:

 <smart-switch-button readonly></smart-switch-button>

Demo

Keyboard Support

Smart.SwitchButton 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.