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

MIT License © valleweb