- Notifications
You must be signed in to change notification settings - Fork12
JonathanDn/vue-toggle-btn
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
Install via NPMnpm i vue-toggle-btn
Then require in your project:
varVueToggleBtn=require('vue-toggle-btn');
or ES6 syntax:
importVueToggleBtnfrom'vue-toggle-btn';
Then you can register the component globally:
Vue.component('vue-toggle-btn',VueToggleBtn);
Or in your Vue component:
components:{ToggleBtn}
You can then use the following selector anywhere in your project:
- To get up and running quick the package now supports rendering just the selector with default values
<vue-toggle-btn></vue-toggle-btn>
options is a full configuration object holding the toggle-button building blocks which arehandle,track andisActive
| property | Type | Description |
|---|---|---|
| options | object | holds all toggle button style configurations |
| isActive | false | holds the current boolean state of the button - can befalse ortrue |
| handle | object | holds all handle style configurations |
| track | object | holds all track style configurations |
| property | Type | Default | Description |
|---|---|---|---|
| diameter | number | 30 | Sets the handle diameter (the round button moving) |
| color | string | #fff | Sets the handle color |
| borderRadius | string | 50% | Sets the handle border radius |
| property | Type | Default | Description |
|---|---|---|---|
| width | number | 70 | Sets the track width |
| height | number | 30 | Sets the track height |
| color | string | #ccc | Sets the default track color |
| activeColor | string | #2196F3 | Sets the active status track color(after toggled) |
| borderWidth | number | 0 | Sets the track border width |
| borderRadius | string | 34px | Sets the track border radius |
| Event Name | Returns | Description |
|---|---|---|
| setIsActive | isActive | Clicking the toggle button emits an its currentisActive boolean state |
Listening to the event e.g:
<vue-toggle-btn@isActive="myLocalSetterFunction($event)"></vue-toggle-btn>
Feedback would be much appreciated, questions, suggestions, issues are more than welcome.
👨💻 Follow me onTwitter.
If this project helped you reduce development time, you can buy me a cup of coffee :)
- Paypal -yonidn7@gmail.com