@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