Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/JonathanDn/vue-toggle-btn

Vue.js Toggle Button - A dynamic, fully customizable toggle button aka toggle switch
https://github.com/JonathanDn/vue-toggle-btn

Last synced: about 1 month ago
JSON representation

Vue.js Toggle Button - A dynamic, fully customizable toggle button aka toggle switch

Lists

README 

        
# vue-toggle-btn

## A Highly Customizable, easy-to-use elegant toggle/switch button component



![MIT License](https://badgen.net/badge/license/MIT/blue "MIT License")

[![view on npm](http://img.shields.io/npm/v/vue-toggle-btn.svg?colorB=red)](https://www.npmjs.org/package/vue-toggle-btn)



###### Demo

![toggle-btn](https://github.com/JonathanDn/vue-toggle-btn/blob/master/toggle_btn.gif "Vue Toggle Btn")



# Usage

Install via NPM ```npm i vue-toggle-btn```



Then require in your project:

```js

var VueToggleBtn = require('vue-toggle-btn');

```

or ES6 syntax:

```js

import VueToggleBtn from 'vue-toggle-btn';

```

Then you can register the component globally:

```js

Vue.component('vue-toggle-btn', VueToggleBtn);

```

Or in your Vue component:

```js

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

```html



```

## Properties

```options``` is a full configuration object holding the toggle-button building blocks which are ```handle```,  ```track``` and ```isActive```



| property | Type  | Description |

| --- | ---  | --- |

| options | object | holds all toggle button style configurations |

| isActive | false | holds the current boolean state of the button - can be `false` or `true` |

| handle | object | holds all handle style configurations |

| track | object | holds all track style configurations |



### handle

| 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 |



### track

| 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 |



### events

| Event Name | Returns | Description |

| --- | ---  | --- |

| **setIsActive** | `isActive` | Clicking the toggle button emits an its current `isActive` boolean state |



Listening to the event e.g:

```html



```



Feedback would be much appreciated, questions, suggestions, issues are more than welcome.



---

👨‍💻 Follow me on [Twitter](https://twitter.com/jodoron).



### Donation

If this project helped you reduce development time, you can buy me a cup of coffee :)



* Paypal - [email protected]