Intro

This package is a component for make a toggle or switch with any child element. You can use image for toggle buttons or icons. The name is image because this component built for specify work with image element but you can use icon or div elemnts.

Demo

Install

Install component with:

npm install @ivahid/vue-toggle-image

Use

Import the component in your code like this:

import VueToggleImage from "@ivahid/vue-toggle-image";

Also you have to import css in your component:

import "@ivahid/vue-toggle-image/dist/vue-toggle-image.css";

And import in your component:

export default {
  name: "App",
  components: {
    VueToggleImage,
  },
  methods: {},
};

Use it in template:

<VueToggleImage @onChange="onChangeToggle">
    <img src="imageSrc" />
    <img src="imageSrc2" />
</VueToggleImage>

You can define a method for handle change toggle:

methods: {
    onChangeToggle(e) {
      console.log(e); // e is the index of child in template, e.g for first element is 0
    },
},

Props

you can customize colors with props, for example you can change border color with this:

<VueToggleImage @onChange="onChangeToggle" :borderColor="'#065b4e'">
    <img src="imageSrc" />
    <img src="imageSrc2" />
</VueToggleImage>

You can find all props in below table:

| Property | type | default | description | | :-------------: | :----: | :-----: | :----------------------------: | | activeColor | String | #06b79c | the color of active element | | borderColor | String | #065b4e | border color of cointainer | | backgroundColor | String | #016d5d | background color of cointainer |

Enjoy :)

If it has any issue i will be appreciate to you for report it :) Thank you so much