@uxland/uxl-switch NPM

\<uxl-switch>

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`