{"id":14988570,"url":"https://github.com/drewjbartlett/vue-switches","last_synced_at":"2025-04-05T01:05:23.373Z","repository":{"id":48042378,"uuid":"79087943","full_name":"drewjbartlett/vue-switches","owner":"drewjbartlett","description":"An on/off switch component for Vue.js with theme support.","archived":false,"fork":false,"pushed_at":"2021-08-10T09:08:24.000Z","size":29,"stargazers_count":208,"open_issues_count":18,"forks_count":42,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-03-29T00:08:32.838Z","etag":null,"topics":["bootstrap","bulma","demo","switch-control","theme-support","vue","vue-components"],"latest_commit_sha":null,"homepage":"http://drewjbartlett.com/demos/vue-switches/","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/drewjbartlett.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-01-16T06:06:11.000Z","updated_at":"2025-03-06T23:24:32.000Z","dependencies_parsed_at":"2022-09-18T08:41:49.003Z","dependency_job_id":null,"html_url":"https://github.com/drewjbartlett/vue-switches","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/drewjbartlett%2Fvue-switches","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/drewjbartlett%2Fvue-switches/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/drewjbartlett%2Fvue-switches/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/drewjbartlett%2Fvue-switches/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/drewjbartlett","download_url":"https://codeload.github.com/drewjbartlett/vue-switches/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247271522,"owners_count":20911587,"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":["bootstrap","bulma","demo","switch-control","theme-support","vue","vue-components"],"created_at":"2024-09-24T14:16:57.679Z","updated_at":"2025-04-05T01:05:23.357Z","avatar_url":"https://github.com/drewjbartlett.png","language":"CSS","funding_links":[],"categories":["Awesome Vue.js [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)","UI组件","Components \u0026 Libraries","UI Components","UI Components [🔝](#readme)"],"sub_categories":["Libraries \u0026 Plugins","形成","UI Components","Form"],"readme":"# Vue Switches\n\n[![npm](https://img.shields.io/npm/v/vue-switches.svg)](https://www.npmjs.com/package/vue-switches)\n[![npm](https://img.shields.io/npm/dt/vue-switches.svg)](https://www.npmjs.com/package/vue-switches)\n\nA Vue.js component for simple switches with theme support for [bulma](http://bulma.io), [bootstrap](http://getbootstrap.com/) and custom themes. See a live demo [here](http://drewjbartlett.com/demos/vue-switches/).\n\n\u003cp align=\"center\"\u003e\n\u003cimg src=\"http://drewjbartlett.com/assets/demos/vue-switches/switches.png\" /\u003e\n\u003c/p\u003e\n\n## Installation\n\n```bash\nnpm install vue-switches --save\n```\n\n## Basic Usage\n\n```javascript\nimport Switches from 'vue-switches';\n\nnew Vue({\n\n    components: {\n        Switches\n    },\n\n    data () {\n        return {\n            enabled: false\n        }\n    }\n};\n```\n\n```html\n\n\u003cswitches v-model=\"enabled\"\u003e\u003c/switches\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\u003elabel\u003c/td\u003e\n            \u003ctd\u003eA static label to always display whether on or off.\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003etext-enabled\u003c/td\u003e\n            \u003ctd\u003eThe text that displays when enabled.\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003etext-disabled\u003c/td\u003e\n            \u003ctd\u003eThe text that displays when disabled.\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003etheme\u003c/td\u003e\n            \u003ctd\u003eWhich theme to use.\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003ecolor\u003c/td\u003e\n            \u003ctd\u003eWhich color to use. \u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003etype-bold\u003c/td\u003e\n            \u003ctd\u003eBigger style.\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eemit-on-mount\u003c/td\u003e\n            \u003ctd\u003eBy default, a \"changed\" event is emitted when the component mounts. To disable this, set this to false.\u003c/td\u003e\n        \u003c/tr\u003e\n    \u003c/tbody\u003e\n\n\u003c/table\u003e\n\n## Theme Support\nOut of the box `vue-switches` supports a default, [bulma](http://bulma.io), [bootstrap](http://getbootstrap.com/) themes. To use them you can do as follows:\n\nProviding no `theme` or `color` props would render a switch of default theme and color.\n\n```html\n\n \u003cswitches v-model=\"enabled\"\u003e\u003c/switches\u003e\n\n```\n\nAvailable colors for `default` are `default`, `red`, `blue`, `green`, and `yellow`, and `orange`.\n\n\n```html\n\n\u003cswitches v-model=\"enabled\" theme=\"bulma\" color=\"default\"\u003e\u003c/switches\u003e\n\n```\n\nAvailable colors for Bulma are `default`, `primary`, `red`, `blue`, `green`, and `yellow`.\n\nIn addition support for bootstrap can be used as follows:\n\n```html\n\n\u003cswitches v-model=\"enabled\" theme=\"bootstrap\" color=\"danger\"\u003e\u003c/switches\u003e\n\n```\n\nAvailable colors for bootstrap are `default`, `primary`, `success`, `info`, `warning`, and `danger`.\n\n## Styles\n\nOut of the box `vue-switches` has two styles: `default` and `bold`. By default the switch is not bold. To enable the bold style you can set `type-bold` to true like this:\n\n```html\n\n\u003cswitches v-model=\"enabled\" type-bold=\"true\"\u003e\u003c/switches\u003e\n\n```\n\nA demo of all themes and styles can be seen [here](http://drewjbartlett.com/demos/vue-switches/).\n\n## Making Your Own Themes\nVue Switcher has a base class of  `.vue-switcher`. For an unchecked switch a class of `.vue-switcher--unchecked` is applied. Lastly, for the `theme` and `color` props a class is also applied. So for a `bulma` theme of color `primary` the classes `.vue-switcher-theme--bulma` and `.vue-switcher-color--primary`.\n\nThis:\n```html\n\n\u003cswitches v-model=\"enabled\" type-bold=\"false\" theme=\"custom\" color=\"blue\"\u003e\u003c/switches\u003e\n\n```\n\nWould render the classes `.vue-switcher-theme--custom` and `.vue-switcher-color--blue`. Sass for this theme could look like:\n\n```scss\n.vue-switcher-theme--custom {\n    \u0026.vue-switcher-color--blue {\n        div {\n            background-color: lighten(blue, 10%);\n\n            \u0026:after {\n                // for the circle on the switch\n                background-color: darken(blue, 5%);\n            }\n        }\n\n        \u0026.vue-switcher--unchecked {\n            div {\n                background-color: lighten(blue, 30%);\n\n                \u0026:after {\n                    background-color: lighten(blue, 10%);\n                }\n            }\n        }\n    }\n}\n```\n\nFor better understanding, below is how the class object is rendered.\n```javascript\nclassObject () {\n\n            const {color, enabled, theme, typeBold, disabled} = this;\n\n            return {\n                'vue-switcher': true,\n                ['vue-switcher--unchecked']: !enabled,\n                ['vue-switcher--disabled']: disabled,\n                ['vue-switcher--bold']: typeBold,\n                ['vue-switcher--bold--unchecked']: typeBold \u0026\u0026 !enabled,\n                [`vue-switcher-theme--${theme}`]: color,\n                [`vue-switcher-color--${color}`]: color,\n            };\n\n        }\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdrewjbartlett%2Fvue-switches","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdrewjbartlett%2Fvue-switches","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdrewjbartlett%2Fvue-switches/lists"}