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-toggle-button animation='none'></smart-toggle-button>

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

 const toggleButton = document.querySelector('smart-toggle-button');

 toggleButton.animation = 'simple';

Get the animation property.

 const toggleButton = document.querySelector('smart-toggle-button');

 let animation = toggleButton.animation;

Sets the state of the element.

Code examples

Set the checked property.

 <smart-toggle-button checked></smart-toggle-button>

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

 const toggleButton = document.querySelector('smart-toggle-button');

 toggleButton.checked = false;

Get the checked property.

 const toggleButton = document.querySelector('smart-toggle-button');

 let checked = toggleButton.checked;

Possible values: 'hover', 'press', 'release', 'pressAndRelease'.
Sets the click mode of the button.

Code examples

Set the clickMode property.

 <smart-toggle-button click-mode='hover'></smart-toggle-button>

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

 const toggleButton = document.querySelector('smart-toggle-button');

 toggleButton.clickMode = 'release';

Get the clickMode property.

 const toggleButton = document.querySelector('smart-toggle-button');

 let clickMode = toggleButton.clickMode;

Enables or disables the ratio button.

Code examples

Set the disabled property.

 <smart-toggle-button disabled></smart-toggle-button>

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

 const toggleButton = document.querySelector('smart-toggle-button');

 toggleButton.disabled = false;

Get the disabled property.

 const toggleButton = document.querySelector('smart-toggle-button');

 let disabled = toggleButton.disabled;

Sets the inner HTML of the element.

Code examples

Set the innerHTML property.

 <smart-toggle-button inner-h-t-m-l='Toggle Button Label'></smart-toggle-button>

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

 const toggleButton = document.querySelector('smart-toggle-button');

 toggleButton.innerHTML = 'New Toggle Button Label';

Get the innerHTML property.

 const toggleButton = document.querySelector('smart-toggle-button');

 let innerHTML = toggleButton.innerHTML;

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

Code examples

Set the locale property.

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

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

 const toggleButton = document.querySelector('smart-toggle-button');

 toggleButton.locale = 'fr';

Get the locale property.

 const toggleButton = document.querySelector('smart-toggle-button');

 let locale = toggleButton.locale;

Callback, related to localization module.

Code examples

Set the localizeFormatFunction property.

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

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

 const toggleButton = document.querySelector('smart-toggle-button');

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

Get the localizeFormatFunction property.

 const toggleButton = document.querySelector('smart-toggle-button');

 let localizeFormatFunction = toggleButton.localizeFormatFunction;

Sets or gets an object specifying strings used in the widget that can be localized. Used in conjunction with the property locale.

Code examples

Set the messages property.

 <smart-toggle-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-toggle-button>

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

 const toggleButton = document.querySelector('smart-toggle-button');

 toggleButton.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 toggleButton = document.querySelector('smart-toggle-button');

 let messages = toggleButton.messages;

Sets or gets the widget's name.

Code examples

Set the name property.

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

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

 const toggleButton = document.querySelector('smart-toggle-button');

 toggleButton.name = 'New Name';

Get the name property.

 const toggleButton = document.querySelector('smart-toggle-button');

 let name = toggleButton.name;

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

Code examples

Set the readonly property.

 <smart-toggle-button readonly></smart-toggle-button>

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

 const toggleButton = document.querySelector('smart-toggle-button');

 toggleButton.readonly = false;

Get the readonly property.

 const toggleButton = document.querySelector('smart-toggle-button');

 let readonly = toggleButton.readonly;

Determines the theme. Theme defines the look of the element

Code examples

Set the theme property.

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

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

 const toggleButton = document.querySelector('smart-toggle-button');

 toggleButton.theme = 'red';

Get the theme property.

 const toggleButton = document.querySelector('smart-toggle-button');

 let theme = toggleButton.theme;

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

Code examples

Set the unfocusable property.

 <smart-toggle-button unfocusable></smart-toggle-button>

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

 const toggleButton = document.querySelector('smart-toggle-button');

 toggleButton.unfocusable = false;

Get the unfocusable property.

 const toggleButton = document.querySelector('smart-toggle-button');

 let unfocusable = toggleButton.unfocusable;

Sets or gets the widget's value.

Code examples

Set the value property.

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

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

 const toggleButton = document.querySelector('smart-toggle-button');

 toggleButton.value = 'New Value';

Get the value property.

 const toggleButton = document.querySelector('smart-toggle-button');

 let value = toggleButton.value;

This event is triggered when the state of the element is changed.

Code examples

Bind to the change event by type: smartToggleButton

 const toggleButton = document.querySelector('smart-toggle-button'); 

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