{"id":15566968,"url":"https://github.com/devwiz1028/vue-onoff-toggle","last_synced_at":"2025-04-23T23:48:16.294Z","repository":{"id":55867331,"uuid":"305481435","full_name":"devwiz1028/vue-onoff-toggle","owner":"devwiz1028","description":"Vue.js 2 OnOff Toggle - simple, lightweight, customizable","archived":false,"fork":false,"pushed_at":"2020-12-30T14:48:45.000Z","size":169,"stargazers_count":14,"open_issues_count":2,"forks_count":3,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-23T23:48:10.624Z","etag":null,"topics":["checkbox","checkbox-component","css-animations","ios","javascript","material","onoffswitch","toggle-switch","vue","vue2"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/devwiz1028.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-10-19T18:42:32.000Z","updated_at":"2024-08-23T16:40:05.000Z","dependencies_parsed_at":"2022-08-15T08:10:17.240Z","dependency_job_id":null,"html_url":"https://github.com/devwiz1028/vue-onoff-toggle","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devwiz1028%2Fvue-onoff-toggle","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devwiz1028%2Fvue-onoff-toggle/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devwiz1028%2Fvue-onoff-toggle/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devwiz1028%2Fvue-onoff-toggle/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/devwiz1028","download_url":"https://codeload.github.com/devwiz1028/vue-onoff-toggle/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250535098,"owners_count":21446505,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["checkbox","checkbox-component","css-animations","ios","javascript","material","onoffswitch","toggle-switch","vue","vue2"],"created_at":"2024-10-02T17:09:12.043Z","updated_at":"2025-04-23T23:48:16.269Z","avatar_url":"https://github.com/devwiz1028.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Vue OnOff Toggle\n\nA simple, lightweight on/off toggle component made with Vue.js. Provides multiple themes with default configurations. You can also customize size, color and borders.\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://i.imgur.com/pVI4GIB.png\"\u003e\n\u003c/p\u003e\n\n[Live Demo](https://codepen.io/devwiz1028/pen/XWjZjZm)\n\n## Installation\n```bash\nnpm install vue-onoff-toggle --save\n```\nor with `yarn`,\n```bash\nyarn add vue-onoff-toggle\n```\n\n\n## Import in Vue.js\nIn your `main.js` file:\n\n```javascript\nimport Vue from 'vue'\nimport OnoffToggle from 'vue-onoff-toggle'\n\nVue.use(OnoffToggle)\n```\n\n## Import in Nuxt.js\nCreate a new plugin in `plugins/vue-onoff-toggle.js`:\n\n```javascript\nimport Vue from 'vue'\nimport OnoffToggle from 'vue-onoff-toggle'\n\nVue.use(OnoffToggle)\n```\n\nAdd this new plugin to `nuxt.config.js`\n\n```javascript\nmodule.exports = {\n  // ...\n  plugins: [\n    // ...\n    '~plugins/vue-onoff-toggle'\n  ]\n}\n```\n\n## How to use\nAfter importing the library, use `onoff-toggle` tag inside your vue template:\n```html\n\u003conoff-toggle v-model=\"checked\" /\u003e\n\n\u003conoff-toggle v-model=\"checked\" theme=\"ios\" /\u003e\n\n\u003conoff-toggle v-model=\"checked\" theme=\"material\" /\u003e\n\n\u003conoff-toggle\n  v-model=\"checked\"\n  onColor=\"#008F13\"\n  :shadow=\"false\"\n/\u003e\n\n\u003conoff-toggle\n  v-model=\"checked\"\n  theme=\"ios\"\n  onColor=\"#008F13\"\n/\u003e\n\n\u003conoff-toggle\n  v-model=\"checked\"\n  theme=\"material\"\n  thumbColor=\"#008F13\"\n/\u003e\n```\n\n\n## Props\n\u003ctable\u003e\n  \u003cthead\u003e\n    \u003ctr\u003e\n      \u003cth\u003eProp\u003c/th\u003e\n      \u003cth\u003eDescription\u003c/th\u003e\n    \u003c/tr\u003e\n  \u003c/thead\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd\u003etheme\u003c/td\u003e\n      \u003ctd\u003eTheme to use. \"default\", \"ios\" and \"material\" are available.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003ename\u003c/td\u003e\n      \u003ctd\u003eName to attach to checkbox input. Useful when the toggle is used inside a form.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003edisabled\u003c/td\u003e\n      \u003ctd\u003eToggle is disabled\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eonColor\u003c/td\u003e\n      \u003ctd\u003eBackground color of checked toggle\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eoffColor\u003c/td\u003e\n      \u003ctd\u003eBackground color of unchecked toggle\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003ethumbColor\u003c/td\u003e\n      \u003ctd\u003eBackground color of the thumb. For \"material\" theme, if you don't specify onColor, it will be thumbColor with opacity 0.5 by default\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eborderColor\u003c/td\u003e\n      \u003ctd\u003eColor of the thumb's border. Only available for \"ios\" theme.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003ewidth\u003c/td\u003e\n      \u003ctd\u003eWidth of the toggle\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eheight\u003c/td\u003e\n      \u003ctd\u003eHeight of the toggle\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003emargin\u003c/td\u003e\n      \u003ctd\u003eSpace around the thumb\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eshadow\u003c/td\u003e\n      \u003ctd\u003eOnly works on default theme. When set to true, a glow effect will be added around the toggle.\u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n\n\n## Browser Compatibility\n\n* Chrome: 40+\n* Firefox: 25+\n* IE: 11+\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevwiz1028%2Fvue-onoff-toggle","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdevwiz1028%2Fvue-onoff-toggle","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevwiz1028%2Fvue-onoff-toggle/lists"}