euvl / Vue Js Toggle Button
Licence: mit
đĽ Vue.js 2 toggle / switch button - simple, pretty, customizable
Stars: â 836
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Vue Js Toggle Button
Aiflatswitch
Nicely animated flat design switch alternative to UISwitch
Stars: â 904 (+8.13%)
Mutual labels: switch, button
Vue Quill Editor
đĄ@quilljs editor component for @vuejs
Stars: â 6,874 (+722.25%)
Mutual labels: vue-component, vue-plugin
Easybutton
Arduino library for debouncing momentary contact switches, detect press, release, long press and sequences with event definitions and callbacks.
Stars: â 187 (-77.63%)
Mutual labels: switch, button
Vue Core Image Upload
a vue plugin for image to crop and upload
Stars: â 1,321 (+58.01%)
Mutual labels: vue-component, vue-plugin
v-tostini
Toast plugin for Vue.js 2.x
Stars: â 12 (-98.56%)
Mutual labels: vue-plugin, vue-component
Vue Awesome Swiper
đ Swiper component for @vuejs
Stars: â 12,072 (+1344.02%)
Mutual labels: vue-component, vue-plugin
vue-burger-button
đ vue-burger-button is a functional component, which is faster than a regular component, and is pretty small (JS min+gzip is lower than 700b and CSS min+gzip is lower than 400b).
Stars: â 41 (-95.1%)
Mutual labels: button, vue-component
Tristatetogglebutton
Customizable tri-state toggle button (with three states, three state toggle) for Android
Stars: â 198 (-76.32%)
Mutual labels: switch, button
RevealLayout
ć示ććĺ¸ĺąďźĺŻäťĽćĺŽ2个ĺĺ¸ĺąďźäťĽĺ形ć示ććĺć˘éä¸çść
Stars: â 118 (-85.89%)
Mutual labels: button, switch
vue-drag-zone
Drag Zone component for @vuejs
Stars: â 127 (-84.81%)
Mutual labels: vue-plugin, vue-component
Vue Toastr
Vuejs Toast : Plugin and Component Capability.
Stars: â 93 (-88.88%)
Mutual labels: vue-component, vue-plugin
Jc button
Arduino library to debounce button switches, detect presses, releases, and long presses
Stars: â 289 (-65.43%)
Mutual labels: switch, button
Vue Qrcode Reader
A set of Vue.js components for detecting and decoding QR codes.
Stars: â 1,240 (+48.33%)
Mutual labels: vue-component, vue-plugin
Vue Codemirror
â¨ď¸ @codemirror component for @vuejs
Stars: â 2,115 (+152.99%)
Mutual labels: vue-component, vue-plugin
vue-img-orientation-changer
A vue plugin that can help you display image in correct orientation.
Stars: â 38 (-95.45%)
Mutual labels: vue-plugin, vue-component
MGS.Electronics
Unity plugin for make button switch, knob switch and rocker element in scene.
Stars: â 12 (-98.56%)
Mutual labels: button, switch
Vue Touch Ripple
đ Touch ripple component for @vuejs
Stars: â 443 (-47.01%)
Mutual labels: vue-component, vue-plugin
Pmsuperbutton
đĽ PMSuperButton is a powerful UIButton coming from the countryside, but with super powers! đ
Stars: â 653 (-21.89%)
Mutual labels: button
React Native Button
A React Native button component customizable via props
Stars: â 719 (-14%)
Mutual labels: button
Ryujinx
Experimental Nintendo Switch Emulator written in C#
Stars: â 10,983 (+1213.76%)
Mutual labels: switch
Vue.js toggle/switch button.
Install
npm install vue-js-toggle-button --save
Import
Import plugin:
import ToggleButton from 'vue-js-toggle-button'
Vue.use(ToggleButton)
OR
Import component:
import { ToggleButton } from 'vue-js-toggle-button'
Vue.component('ToggleButton', ToggleButton)
Use
<toggle-button @change="onChangeEventHandler"/>
<toggle-button v-model="myDataVariable"/>
<toggle-button :value="false"
color="#82C7EB"
:sync="true"
:labels="true"/>
<toggle-button :value="true"
:labels="{checked: 'Foo', unchecked: 'Bar'}"/>
Properties
| Name | Type | Default | Description |
|---|---|---|---|
| value | Boolean | false | Initial state of the toggle button |
| sync | Boolean | false | If set to true, will be watching changes in value property and overwrite the current state of the button whenever value prop changes |
| speed | Number | 300 | Transition time for the animation |
| disabled | Boolean | false | Button does not react on mouse events |
| color | [String, Object] | #75C791 |
If String - color of the button when checked If Object - colors for the button when checked/unchecked or disabledExample: {checked: '#00FF00', unchecked: '#FF0000', disabled: '#CCCCCC'}
|
| css-colors | Boolean | false | If true - deactivates the setting of colors through inline styles in favor of using CSS styling |
| labels | [Boolean, Object] | false | If Boolean - shows/hides default labels ("on" and "off") If Object - sets custom labels for both states. Example: {checked: 'Foo', unchecked: 'Bar'}
|
| switch-color | [String, Object] | #BFCBD9 |
If String - color or background property of the switch when checked If Object - colors or background property for the switch when checked/uncheked Example: {checked: '#25EF02', unchecked: 'linear-gradient(red, yellow)'}
|
| width | Number | 50 | Width of the button |
| height | Number | 22 | Height of the button |
| margin | Number | 3 | Space between the switch and background border |
| name | String | undefined | Name to attach to the generated input field |
| font-size | Number | undefined | Font size |
Events
| Name | Description |
|---|---|
| change | Triggered whenever state of the component changes. Contains: value - state of the object srcEvent - source click event |
| input | Input event for v-model |
SSR
Include plugin in your nuxt.config.js file:
module.exports = {
plugins: ['~plugins/vue-js-toggle-button']
}
And your plugins/vue-js-toggle-button.js will look like:
import Vue from 'vue'
import Button from 'vue-js-toggle-button'
Vue.use(Button)
Browser compatibility
- Chrome: 40+
- Firefox: 25+
- Safari: 10+
- IE: 11+
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].