toggle-icon
is a custom element created with Polymer. It provides an extremly powerful and customizable switch that looks like a paper-icon-button
. Use toggleIcon.checked
to get the toggle-icon's status in JavaScript. For more information about the usage, see the component page.
.all1,
.all4 {
--toggle-icon: {
color: var(--paper-green-500);
};
--toggle-icon-checked: {
color: var(--paper-red-500);
};
}
.all2 {
--toggle-icon: {
color: var(--paper-indigo-500);
};
}
.all3 {
--toggle-icon-checked: {
color: var(--paper-orange-500);
};
}
.all5 {
--toggle-icon: {
background: var(--paper-green-500);
border-radius: 50%;
color: #fff;
};
--toggle-icon-checked: {
background: var(--paper-red-500);
color: #fff;
};
}
Here's a gif that shows five icon-toggle elements which are toggled by setting the checked
property programmatically:
If you have bower installed, run:
bower install toggle-icon
Else, you can clone this repository.
Feel free to open an issue if you notice something that can be improved.
- Fork the repository.
- Commit your changes to your fork.
- Create a pull request.
I really appreciate any contribution :)
The project is distributed under the MIT License, so you can use or modify the code as you like, you only need to name the author (e. g. by adding a link to the GitHub repository).