0.0.3 • Published 8 years ago
aurelia-switch v0.0.3
aurelia-switch
To keep up to date on Aurelia, please visit and subscribe to the official blog. If you have questions, we invite you to join us on Gitter. If you would like to have deeper insight into our development process, please install the ZenHub Chrome Extension and visit any of our repository's boards. You can get an overview of all Aurelia work by visiting the framework board.
Picture
Dependencies
This library has NO external dependencies.
Used By
This library is a plugin and is not used by the core framework.
How to install this plugin?
- In your project install the plugin via
jspmwith following command
jspm install npm:aurelia-switch- Make sure you use manual bootstrapping. In order to do so open your
index.htmland locate the element with the attribute aurelia-app. Change it to look like this:
<body aurelia-app="main">
...- Create (if you haven't already) a file
main.jsin yoursrcfolder with following content:
export function configure(aurelia) {
aurelia.use
.standardConfiguration()
.developmentLogging()
.plugin('aurelia-switch');
aurelia.start().then(a => a.setRoot());
}Using the plugin
Simply use the tag
<switch></switch>You can use the following properties:
- checked - boolean - get/set the state of the switch
- change - event - fires when the switch is toggled.
change.delegate="myEventHandler($event)". The new state of the switch is in$event.details.checked.
Styling
You can style the plugin accordingly
sample:
input.as-toggle-round-flat:checked + label:after {
margin-left: 1.5rem !important;
background-color: $brand-success !important;
}
input.as-toggle-round-flat:checked + label {
background-color: $brand-success !important;
}
input.as-toggle-round-flat + label:after {
width: 1rem !important;
}
input.as-toggle-round-flat + label{
width: 3rem !important;
height: 1.5rem !important;
}
.switch label {
margin-bottom: 0 !important;
}