@odyzeo/form-toggle

Simple toggle button Vue.js component.

Demo

Installation

npm

npm install --save @odyzeo/form-toggle

yarn

yarn add @odyzeo/form-toggle

Import

import FormToggle from '@odyzeo/form-toggle';

Vue.use(FormToggle, {options})

Import styles or make your own.

import '@odyzeo/form-toggle/dist/form-toggle.css';

Usage

<template>
  <div>
      <form-toggle
        v-model="checked"
      >
          <template #checked>
              Yes
          </template>
          <template #unchecked>
              No
          </template>
</form-toggle>
  </div>
</template>

<script>
import FormToggle from '@odyzeo/form-toggle';

export default {
    name: 'App',
    components: {
        FormToggle,
    },
    data() {
        return {
            checked: true,
        };
    },
};
</script>

Props

input {Object} - required

Property name	Type	Default value	Description
value	Boolea	false	Initial state of the toggle button
name	string	``	Textarea or input name attribute
disabled	boolea	false	Whether to disable toggle button
speed	Number	300	Transition time for the animation
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
falseValue	String	0	Value used in input value when unchecked
trueValue	String	1	Value used in input value when checked

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

Slots

Name	Description
right	Show custom content on the left side
left	Show custom content on the right side
checked	Text displayed inside toggle when checked
unchecked	Text displayed inside toggle when unchecked

Development

npm run serve

or

yarn serve