SwitchButton JAVASCRIPT UI Component API

SwitchButton Javascript API

Class

SwitchButton

A Switch represents a button with two states, on and off. Switches are most often used on mobile devices to enable and disable options.

Properties

animation"none" | "simple" | "advanced"

Sets or gets the animation mode. Animation is disabled when the property is set to 'none'

Allowed Values

"none" - animation is disabled
"simple" - ripple animation is disabled
"advanced" - all animations are enabled

Default value

"advanced"

Example

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;

clickMode"press" | "release" | "pressAndRelease"

Sets the click mode of the switch button. This property is active only when switchMode is 'click'.

press - the state of the switch is changed on mousedown
release - the state of the switch is changed on mouseup
pressAndRelease - the state of the switch is changed on mousedown and reverted to the original on mouseup.

Default value

"release"

Example

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;

checkedboolean

Sets or gets the check state.

Default value

false

Example

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;

disabledboolean

Enables or disables the ratio button.

Default value

false

Example

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;

falseContentstring

Sets the text representation of checked=false state.

Default value

""""

Example

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;

falseTemplateany

Sets custom template about false state.

Example

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;

indeterminateboolean

Sets or gets indeterminate state of the switch.

Default value

false

Example

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;

invertedboolean

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

Default value

false

Example

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;

localestring

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

Default value

"en"

Example

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;

localizeFormatFunctionfunction | null

Callback, related to localization module.

Example

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;

messagesobject

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

Default value

"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."

}

Example

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;

namestring

Sets or gets the widget's name.

Default value

""""

Example

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;

orientation"horizontal" | "vertical"

Sets the orientation of the switch

Default value

"horizontal"

Example

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;

readonlyboolean

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

Default value

false

Example

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;

trueContentstring

Sets the text representation of checked=true state.

Default value

""""

Example

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;

trueTemplatestring

Sets custom template about true state.

Default value

"null"

Example

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;

switchMode"default" | "click" | "drag" | "none"

Sets the switchMode of the element.

default - dragging the thumb or clicking inside the track can change the state of the element.
click - clicking inside the track changes the state of the element.
drag - dragging the thumb changes the state of the element.
none - the state of the element can only be changed via the API

Default value

"default"

Example

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;

themestring

Determines the theme. Theme defines the look of the element

Default value

Example

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;

unfocusableboolean

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

Default value

false

Example

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;

valuestring

Sets or gets the widget's value.

Default value

""""

Example

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;

Events

changeCustomEvent

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

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onChange

Arguments

evCustomEvent

ev.detailObject

ev.detail.value - A boolean value indicating the new state of the button ( checked or not ).

ev.detail.oldValue - A boolean value indicating the previous state of the button ( checked or not ).

ev.detail.changeType - A string flag indicating whether the change event was triggered via API or an event.

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Try a demo showcasing the change event.

Example

Set up the event handler of change event.

const switchbutton = document.querySelector('smart-switch-button');
switchbutton.addEventListener('change', function (event) {
    const detail = event.detail,
        value = detail.value,
        oldValue = detail.oldValue,
        changeType = detail.changeType;

	// event handling code goes here.
})

checkValueCustomEvent

This event is triggered when the widget is checked.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onCheckValue

Arguments

evCustomEvent

ev.detailObject

ev.detail.changeType - A string flag indicating whether the change event was triggered via API or an event.

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of checkValue event.

const switchbutton = document.querySelector('smart-switch-button');
switchbutton.addEventListener('checkValue', function (event) {
    const detail = event.detail,
        changeType = detail.changeType;

	// event handling code goes here.
})

uncheckValueCustomEvent

This event is triggered when the widget is unchecked.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onUncheckValue

Arguments

evCustomEvent

ev.detailObject

ev.detail.changeType - A string flag indicating whether the change event was triggered via API or an event.

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of uncheckValue event.

const switchbutton = document.querySelector('smart-switch-button');
switchbutton.addEventListener('uncheckValue', function (event) {
    const detail = event.detail,
        changeType = detail.changeType;

	// event handling code goes here.
})

CSS Variables

--smart-switch-button-default-widthvar()

Default value

"calc(var(--smart-editor-height) + 10px)"

Default width of the SwitchButton.

--smart-switch-button-default-heightvar()

Default value

"var(--smart-editor-height)"

smartSwitchButton default height

--smart-switch-button-thumb-sizevar()

Default value

"calc(var(--smart-switch-button-default-height) - 8px)"

smartSwitchButton thumb size