It is a web component that allows you to create a toggle switch input.
npm i --save @uxland/uxl-switch
import the component and use it in the html with the uxl-switch
tag
import "@uxland/uxl-switch";
<body>
<uxl-switch></uxl-switch>
</body>
Attribute | Description | Default |
---|---|---|
active |
Status of the switch | false (boolean) |
activeName |
Value of active text label | "Active" (string) |
inactiveName |
Value of inactive text label | "Inactive" (string) |
enabled |
If true, the uxl-switch is enable to change, otherwhise the uxl-switch is disabled | true (boolean) |
The following custom properties and mixins are available for styling:
Custom property | Description | Default |
---|---|---|
--uxl-switch-width |
Width of the uxl-switch | 200px |
--uxl-switch-border-color |
Border color of component wrapper | #e0e0e0 |
--uxl-switch-option-background-color |
Background color of the options | #ffffff |
--uxl-switch-option-padding |
Padding of the options | 8px |
--uxl-switch-text-color |
Default text color when option is not selected | #616161 |
--uxl-switch-font-size |
Font size of text options | 16px |
--uxl-switch-active-selected-background-color |
Background color of active option when is selected | #81c784 |
--uxl-switch-inactive-selected-background-color |
Background color of inactive option when is selected | #ef5350 |
--uxl-switch-selected-text-color |
Text when any option is selected | #ffffff |
--uxl-switch-active-border |
Border of active option | 0 |
--uxl-switch-active-border-selected |
Border of active option when is selected | 0 |
--uxl-switch-inactive-border |
Border of inactive option | 0 |
--uxl-switch-inactive-border-selected |
Border of active option when is selected | 0 |
Events | Description |
---|---|
uxl-switch-changed |
Value changed |