DOCSEARCHbyAlgolia
Submit Docs

vue-js-toggle-button

repository·master·Indexed 21 days ago

https://github.com/euvl/vue-js-toggle-button

A toggle button component for Vue.js 2+ that allows for the creation of switch buttons with customizable colors, labels, and animations. It supports v-model for two-way data binding, the :value prop for one-way data flow, and the @change event for state changes. The library can be integrated as a global plugin or a local component and is compatible with Nuxt.js SSR.

Tokens
2.1K
Snippets
8
Records
8
Agent score
26%

What's inside vue-js-toggle-button

  2. Import and register vue-js-toggle-button

    master

    You can integrate the library into your Vue application in two ways: as a global plugin or as a specific component.

    Option 1: Register as a plugin

    This makes the component available globally throughout your application.

    Option 2: Register as a component

    This allows you to import only the component and register it locally or globally under a specific name.

    // Option 1: Import plugin
import ToggleButton from 'vue-js-toggle-button'
Vue.use(ToggleButton)

// OR

// Option 2: Import component
import { ToggleButton } from 'vue-js-toggle-button'
Vue.component('ToggleButton', ToggleButton)

  3. Configure ToggleButton for Nuxt.js (SSR)

    master

    To use the toggle button in a Nuxt.js project with Server-Side Rendering, you must register it as a plugin.

    1. Create a plugin file (e.g., plugins/vue-js-toggle-button.js).
    2. Register the plugin in your nuxt.config.js.
    // nuxt.config.js
module.exports = {
  plugins: ['~plugins/vue-js-toggle-button']
}

// plugins/vue-js-toggle-button.js
import Vue from 'vue'
import Button from 'vue-js-toggle-button'

Vue.use(Button)

  4. Install the vue-js-toggle-button plugin

    master

    To use the ToggleButton component globally in your Vue.js application, use the install method provided by the default export. This registers the ToggleButton component under the name ToggleButton.

    import Vue from 'vue';
import ToggleButtonPlugin from 'vue-js-toggle-button';

Vue.use(ToggleButtonPlugin);

  5. Use the ToggleButton component

    master

    The ToggleButton can be used with v-model for two-way data binding, or with the :value prop for one-way data flow. You can also listen to the @change event to handle state changes manually.

    <!-- Basic usage with event handler -->
<toggle-button @change="onChangeEventHandler"/>

<!-- Two-way data binding with v-model -->
<toggle-button v-model="myDataVariable"/>

<!-- Customized appearance and behavior -->
<toggle-button :value="false"
               color="#82C7EB"
               :sync="true"
               :labels="true"/>

<!-- Custom labels for checked/unchecked states -->
<toggle-button :value="true"
               :labels="{checked: 'Foo', unchecked: 'Bar'}"/>

  6. Reference the ToggleButton properties

    master

    The following properties are available for the ToggleButton component:

    | 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 <br>If `Object` - colors for the button when checked/unchecked or disabled<br>Example: `{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") <br>If `Object` - sets custom labels for both states. <br>Example: `{checked: 'Foo', unchecked: 'Bar'}` |
| switch-color     | [String, Object]  | `#BFCBD9`  | If `String` - color or background property of the switch when checked <br>If `Object` - colors or background property for the switch when checked/uncheked <br>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 |

  7. Reference the ToggleButton events

    master

    The following events are emitted by the ToggleButton component:

    | Name   | Description              |
| ---    | --- |
| change | Triggered whenever state of the component changes. <br>Contains: <br>`value` - state of the object <br>`srcEvent` - source click event |
| input  | Input event for v-model |

  8. Import the ToggleButton component directly

    master

    If you prefer to use the component locally within a specific Vue component rather than registering it globally, you can import the ToggleButton symbol directly from the package.

    import { ToggleButton } from 'vue-js-toggle-button';

export default {
  components: {
    ToggleButton
  }
};