1.0.0 • Published 4 years ago
@valle/valle-switch v1.0.0
valle-switch
Awesome valle-switch - Web Component using Polymer 3
How to install and use:
1 - Install the element using Yarn:
$ yarn add @valle/valle-switch
2 - Import the element:
<script type="module" src="node_modules/@valle/valle-switch/valle-switch.js"></script>
or in your javascript file
import "@valle/valle-switch/valle-switch.js";
3 - Start using it!
<valle-switch></valle-switch>
Properties
Property | Type | Default | Description |
---|---|---|---|
label-left | String | | Text label left | |
label-right | String | | Text label right | |
disabled | Boolean | false | Disabled state |
checked | Boolean | false | Checked state |
Styling
The following custom properties and mixins are available for styling:
Custom property | Default | Description |
---|---|---|
--valle-label-switch-color | #666666 | Labels text color |
--valle-switch-background | #dddddd | Background switch container |
--valle-switch-background-checked | #cbefd8 | Background switch container when checked |
--valle-switch-toggle | #81898a | Switch icon color |
--valle-switch-toggle-checked | #62aeb3 | Switch icon color when checked |
Browser Support
Using the webcomponents.js:
Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | 11+ | Latest ✔ |
Development
1 - Verify if you have node and yarn installed.
2 - Install Polymer-CLI:
$ [sudo] yarn global add polymer-cli
3 - Install local dependencies:
$ yarn
4 - Start the development server:
$ yarn start
Versioning
To keep better organization of releases we follow the Semantic Versioning 2.0.0 guidelines.
Contributing
Find on our issues the next steps of the project ;) Want to contribute? Follow these recommendations.
History
See Releases for detailed changelog.
License
1.0.0
4 years ago