@uxland/uxl-switch
v2.0.0
Published
UXLand - Switch component
Downloads
17
Readme
<uxl-switch>
What is?
It is a web component that allows you to create a toggle switch input.
How Install
npm i --save @uxland/uxl-switchHow to use?
import the component and use it in the html with the uxl-switch tag
import "@uxland/uxl-switch";
<body>
<uxl-switch></uxl-switch>
</body>Attributes availables
| 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) |
Styling
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
| Events | Description |
| -------------------- | ------------- |
| uxl-switch-changed | Value changed |