SwitchButton CSS Styling

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

Required files

The Smart.SwitchButton element requires the following file references to be placed on a web page in order for the custom element to be successfully registered and properly working:

  • smart.element.js -- this is the base file that defines the common architecture of all Smart custom elements. It is part of the repository ni-kismet/smart-element.
  • smart.button.js -- this is the base file for the buttons. Swtich button element inherits button's functionality.
  • smart.switchbutton.js -- this file defines the functionality of the Smart.SwitchButton custom element.

Smart.SwitchButton also requires the following style sheets in order to be displayed correctly.

  • smart.base.css -- the base style sheet file.

Initialization

To create an instance of a horizontal Smart.SwitchButton custom element, insert the following tag in an HTML page:

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

To create an instance of a vertical Smart.SwitchButton custom element, insert the following tag in an HTML page:

<smart-switch-button orientation="vertical"></smart-switch-button>

To set properties of the custom element initially, do so by setting the respective attributes of the tag, e.g.:

<smart-switch-button checked inverted orientation="vertical" switch-mode="click"></smart-switch-button>

Getting and setting properties dynamically

Before accessing the custom element's API in JavaScript, the custom element's instance has to be retrieved:

let customElement = document.querySelector('smart-switch-button');

Properties are represented as members of the custom element's instance object and can be accessed as such.

Here is an example showing how to get a property dynamically:

let customElement = customElement.checked;

Here is an example showing how to set a property dynamically:

customElement.checked = true;

Animations

By default the animations for the Smart.SwitchButton are disabled. They can be enabled by adding the CSS class called "animation" to the element, like so:

<smart-switch-button class="animation"></smart-switch-button> <br />
<smart-switch-button class="animation" orientation="vertical"></smart-switch-button>

Styling (CSS API)

Smart HTML Elements use a pair of css files - smart.base.css and smart.[theme name].css. The base stylesheet creates the styles related to the element's layout like margin, padding, border-width, position. The second CSS file applies the HTML Element's colors, fonts, borders and backgrounds. The smart.base.css should be included before the second CSS file.

The smart-switch-button uses the following CSS variables:

  • --smart-switch-button-width: Used to set the width of the element.
  • --smart-switch-button-height: Used to set the height of the element.
  • --smart-switch-button-thumb-size: Uset to set the size of the thumb.
  • --smart-switch-button-thumb-color: Used to set the color of the thumb.
  • --smart-switch-button-color-on: Used to set the color of the label of the psudo element and the background color of the thumb when the Switch button is checked.
  • --smart-switch-button-label-on: Used to set the label of the pseudo element when the Switch button is checked.
  • --smart-switch-button-label-off: Used to set the label of the pseudo element when the Switch button is unchecked.
  • --smart-switch-button-label-on-background-color: Used to change the background color of the pseudo element when Switch Button is checked.
  • --smart-switch-button-label-off-background-color: Used to change the background color of the pseudo element when Switch Button is unchecked.
  • --smart-switch-button-label-animation-offset: Used for the animation of the labels. Sets the offset of the labels of the Switch Button.
  • --smart-switch-button-border-radius: Used to set the border radius of the Switch Button custom element.