Possible values: 'none', 'simple', 'advanced'.
Sets or gets the animation mode. Animation is disabled when the property is set to 'none'

Code examples

Set the animation property.

 <smart-switch-button animation='none'></smart-switch-button>

Set the animation property by using the HTML Element's instance.

 const switchButton = document.querySelector('smart-switch-button');

 switchButton.animation = 'simple';

Get the animation property.

 const switchButton = document.querySelector('smart-switch-button');

 let animation = switchButton.animation;

Possible values: 'press', 'release', 'pressAndRelease'.
Sets the click mode of the switch button. This property is active only when switchMode is 'click'.

Code examples

Set the clickMode property.

 <smart-switch-button click-mode='press'></smart-switch-button>

Set the clickMode property by using the HTML Element's instance.

 const switchButton = document.querySelector('smart-switch-button');

 switchButton.clickMode = 'pressAndRelease';

Get the clickMode property.

 const switchButton = document.querySelector('smart-switch-button');

 let clickMode = switchButton.clickMode;

Sets or gets the check state.

Code examples

Set the checked property.

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

Set the checked property by using the HTML Element's instance.

 const switchButton = document.querySelector('smart-switch-button');

 switchButton.checked = false;

Get the checked property.

 const switchButton = document.querySelector('smart-switch-button');

 let checked = switchButton.checked;

Enables or disables the ratio button.

Code examples

Set the disabled property.

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

Set the disabled property by using the HTML Element's instance.

 const switchButton = document.querySelector('smart-switch-button');

 switchButton.disabled = false;

Get the disabled property.

 const switchButton = document.querySelector('smart-switch-button');

 let disabled = switchButton.disabled;

Sets the text representation of checked=false state.

Code examples

Set the falseContent property.

 <smart-switch-button false-content='OFF'></smart-switch-button>

Set the falseContent property by using the HTML Element's instance.

 const switchButton = document.querySelector('smart-switch-button');

 switchButton.falseContent = 'False';

Get the falseContent property.

 const switchButton = document.querySelector('smart-switch-button');

 let falseContent = switchButton.falseContent;

Sets custom template about false state.

Code examples

Set the falseTemplate property.

 <smart-switch-button false-template='templateId1'></smart-switch-button>

Set the falseTemplate property by using the HTML Element's instance.

 const switchButton = document.querySelector('smart-switch-button');

 switchButton.falseTemplate = templateId2;

Get the falseTemplate property.

 const switchButton = document.querySelector('smart-switch-button');

 let falseTemplate = switchButton.falseTemplate;

Sets or gets indeterminate state of the switch.

Code examples

Set the indeterminate property.

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

Set the indeterminate property by using the HTML Element's instance.

 const switchButton = document.querySelector('smart-switch-button');

 switchButton.indeterminate = false;

Get the indeterminate property.

 const switchButton = document.querySelector('smart-switch-button');

 let indeterminate = switchButton.indeterminate;

Sets the direction of switchin. If is true - positions of the switch states are changed.

Code examples

Set the inverted property.

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

Set the inverted property by using the HTML Element's instance.

 const switchButton = document.querySelector('smart-switch-button');

 switchButton.inverted = false;

Get the inverted property.

 const switchButton = document.querySelector('smart-switch-button');

 let inverted = switchButton.inverted;

Sets or gets the language. Used in conjunction with the property messages.

Code examples

Set the locale property.

 <smart-switch-button locale='de'></smart-switch-button>

Set the locale property by using the HTML Element's instance.

 const switchButton = document.querySelector('smart-switch-button');

 switchButton.locale = 'fr';

Get the locale property.

 const switchButton = document.querySelector('smart-switch-button');

 let locale = switchButton.locale;

Callback, related to localization module.

Code examples

Set the localizeFormatFunction property.

 <smart-switch-button localize-format-function='function(){return '...'}'></smart-switch-button>

Set the localizeFormatFunction property by using the HTML Element's instance.

 const switchButton = document.querySelector('smart-switch-button');

 switchButton.localizeFormatFunction = function(){return '...'};

Get the localizeFormatFunction property.

 const switchButton = document.querySelector('smart-switch-button');

 let localizeFormatFunction = switchButton.localizeFormatFunction;

Sets an object with string values, related to the different states of passwords strength.

Code examples

Set the messages property.

 <smart-switch-button messages='{"de":{"propertyUnknownType":"Die Eigenschaft '{{name}}' hat ein nicht definiertes 'type'-Member!","propertyInvalidValue":"Ungultiger Eigenschaftswert \"{{name}}\"! Aktueller Wert: {{actualValue}}, Erwarteter Wert: {{value}}!","propertyInvalidValueType":"Ungultiger Eigenschaftswert '{{name}}'! Aktueller Wert: {{actualType}}, Erwarteter Wert: {{type}}!","elementNotInDOM":"Element existiert nicht in DOM! Bitte fugen Sie das Element zum DOM hinzu, bevor Sie eine Methode aufrufen.","moduleUndefined":"Modul ist nicht definiert.","missingReference":"{{elementType}}: Fehlender Verweis auf {{files}}.","htmlTemplateNotSuported":"{{elementType}}: Browser unterstutzt keine HTMLTemplate-Elemente.","invalidTemplate":"{{elementType}}: \"{{property}}\" Die Eigenschaft akzeptiert eine Zeichenfolge, die mit der ID eines HTMLTemplate-Elements aus dem DOM ubereinstimmen muss."}}'></smart-switch-button>

Set the messages property by using the HTML Element's instance.

 const switchButton = document.querySelector('smart-switch-button');

 switchButton.messages = {"en":{"propertyUnknownType":"'{{name}}' property is with undefined 'type' member!","propertyInvalidValue":"Invalid '{{name}}' property value! Actual value: {{actualValue}}, Expected value: {{value}}!","propertyInvalidValueType":"Invalid '{{name}}' property value type! Actual type: {{actualType}}, Expected type: {{type}}!","elementNotInDOM":"Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.","moduleUndefined":"Module is undefined.","missingReference":"{{elementType}}: Missing reference to {{files}}.","htmlTemplateNotSuported":"{{elementType}}: Browser doesn't support HTMLTemplate elements.","invalidTemplate":"{{elementType}}: \"{{property}}\" property accepts a string that must match the id of an HTMLTemplate element from the DOM."}};

Get the messages property.

 const switchButton = document.querySelector('smart-switch-button');

 let messages = switchButton.messages;

Sets or gets the widget's name.

Code examples

Set the name property.

 <smart-switch-button name='Name'></smart-switch-button>

Set the name property by using the HTML Element's instance.

 const switchButton = document.querySelector('smart-switch-button');

 switchButton.name = 'New Name';

Get the name property.

 const switchButton = document.querySelector('smart-switch-button');

 let name = switchButton.name;

Possible values: 'horizontal', 'vertical'.
Sets the orientation of the switch

Code examples

Set the orientation property.

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

Set the orientation property by using the HTML Element's instance.

 const switchButton = document.querySelector('smart-switch-button');

 switchButton.orientation = 'horizontal';

Get the orientation property.

 const switchButton = document.querySelector('smart-switch-button');

 let orientation = switchButton.orientation;

If the custom element is readonly, it cannot be interacted with.

Code examples

Set the readonly property.

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

Set the readonly property by using the HTML Element's instance.

 const switchButton = document.querySelector('smart-switch-button');

 switchButton.readonly = false;

Get the readonly property.

 const switchButton = document.querySelector('smart-switch-button');

 let readonly = switchButton.readonly;

Sets the text representation of checked=true state.

Code examples

Set the trueContent property.

 <smart-switch-button true-content='ON'></smart-switch-button>

Set the trueContent property by using the HTML Element's instance.

 const switchButton = document.querySelector('smart-switch-button');

 switchButton.trueContent = 'True';

Get the trueContent property.

 const switchButton = document.querySelector('smart-switch-button');

 let trueContent = switchButton.trueContent;

Sets custom template about true state.

Code examples

Set the trueTemplate property.

 <smart-switch-button true-template='templateId1'></smart-switch-button>

Set the trueTemplate property by using the HTML Element's instance.

 const switchButton = document.querySelector('smart-switch-button');

 switchButton.trueTemplate = 'templateId2';

Get the trueTemplate property.

 const switchButton = document.querySelector('smart-switch-button');

 let trueTemplate = switchButton.trueTemplate;

Possible values: 'default', 'click', 'drag'.
Sets the orientation of the switch

Code examples

Set the switchMode property.

 <smart-switch-button switch-mode='click'></smart-switch-button>

Set the switchMode property by using the HTML Element's instance.

 const switchButton = document.querySelector('smart-switch-button');

 switchButton.switchMode = 'drag';

Get the switchMode property.

 const switchButton = document.querySelector('smart-switch-button');

 let switchMode = switchButton.switchMode;

Determines the theme. Theme defines the look of the element

Code examples

Set the theme property.

 <smart-switch-button theme='blue'></smart-switch-button>

Set the theme property by using the HTML Element's instance.

 const switchButton = document.querySelector('smart-switch-button');

 switchButton.theme = 'red';

Get the theme property.

 const switchButton = document.querySelector('smart-switch-button');

 let theme = switchButton.theme;

If is set to true, the element cannot eb focused.

Code examples

Set the unfocusable property.

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

Set the unfocusable property by using the HTML Element's instance.

 const switchButton = document.querySelector('smart-switch-button');

 switchButton.unfocusable = false;

Get the unfocusable property.

 const switchButton = document.querySelector('smart-switch-button');

 let unfocusable = switchButton.unfocusable;

Sets or gets the widget's value.

Code examples

Set the value property.

 <smart-switch-button value='Value'></smart-switch-button>

Set the value property by using the HTML Element's instance.

 const switchButton = document.querySelector('smart-switch-button');

 switchButton.value = 'New Value';

Get the value property.

 const switchButton = document.querySelector('smart-switch-button');

 let value = switchButton.value;

This event is triggered when the widget is checked/unchecked.

Code examples

Bind to the change event by type: smartSwitchButton

 const switchButton = document.querySelector('smart-switch-button'); 

 switchButton.addEventListener('change', function (event) {
     // event handling code goes here.
 }