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.
Selector
smart-switch-button
Properties
animationAnimation
Sets or gets the animation mode. Animation is disabled when the property is set to 'none'
Default valueadvanced
clickModeClickMode
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 valuerelease
checkedboolean
Sets or gets the check state.
Default valuefalse
disabledboolean
Enables or disables the ratio button.
Default valuefalse
falseContentstring
Sets the text representation of checked=false state.
Default value"""
falseTemplateany
Sets custom template about false state.
indeterminateboolean
Sets or gets indeterminate state of the switch.
Default valuefalse
invertedboolean
Sets the direction of switchin. If is true - positions of the switch states are changed.
Default valuefalse
localestring
Sets or gets the language. Used in conjunction with the property messages.
Default value"en
localizeFormatFunctionany
Callback, related to localization module.
messagesany
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."
}
namestring
Sets or gets the widget's name.
Default value"""
orientationOrientation
Sets the orientation of the switch
Default valuehorizontal
readonlyboolean
If the custom element is readonly, it cannot be interacted with.
Default valuefalse
trueContentstring
Sets the text representation of checked=true state.
Default value"""
trueTemplatestring
Sets custom template about true state.
Default value"null
switchModeSwitchButtonSwitchMode
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 valuedefault
themestring
Determines the theme. Theme defines the look of the element
Default value"
unfocusableboolean
If is set to true, the element cannot be focused.
Default valuefalse
valuestring
Sets or gets the widget's value.
Default value"""
onchange((this: Window, ev: Event) => any) | null
This event is triggered when the widget is checked/unchecked.