[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-9075":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":16,"stars7d":16,"stars30d":16,"stars90d":16,"forks30d":16,"starsTrendScore":16,"compositeScore":17,"rankGlobal":10,"rankLanguage":10,"license":18,"archived":19,"fork":19,"defaultBranch":20,"hasWiki":19,"hasPages":19,"topics":21,"createdAt":10,"pushedAt":10,"updatedAt":31,"readmeContent":32,"aiSummary":33,"trendingCount":16,"starSnapshotCount":16,"syncStatus":34,"lastSyncTime":35,"discoverSource":36},9075,"vue-js-toggle-button","euvl\u002Fvue-js-toggle-button","euvl",":fish_cake: Vue.js 2 toggle \u002F switch button - simple, pretty, customizable","http:\u002F\u002Fvue-js-toggle-button.yev.io\u002F",null,"Vue",924,131,9,22,0,50.36,"MIT License",false,"master",[22,23,24,25,26,27,28,29,30],"button","javascript","switch","toggle-buttons","toggle-switches","vue","vue-component","vue-plugin","vuejs","2026-06-12 04:00:43","\u003Cspan>\n  \u003Cimg src=\"https:\u002F\u002Fbadge.fury.io\u002Fjs\u002Fvue-js-toggle-button.svg\">\n\u003C\u002Fspan> \u003Cspan>\n  \u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fdm\u002Fvue-js-toggle-button.svg\">\n\u003C\u002Fspan> \n\n# Vue.js toggle\u002Fswitch button.\n\n\u003Cp align=\"right\">\n  \u003Ca href=\"https:\u002F\u002Fwww.buymeacoffee.com\u002Fyev\" target=\"_blank\">\n    \u003Cimg\n         width=\"140\"\n         alt=\"Get a coffee\"\n         src=\"https:\u002F\u002Fuser-images.githubusercontent.com\u002F1577802\u002F36840220-21beb89c-1d3c-11e8-98a4-45fc334842cf.png\">\n  \u003C\u002Fa>\n\u003C\u002Fp>\n\n\u003Cp align=\"center\">\n  \u003Cimg src=\"http:\u002F\u002Fi.imgur.com\u002Fa2Hf7pm.png\">\n\u003C\u002Fp>\n\n[Live demo here](http:\u002F\u002Fvue-js-toggle-button.yev.io\u002F)\n\n### Install\n\n```bash\nnpm install vue-js-toggle-button --save\n```\n\n### Import\n\nImport plugin:\n\n```javascript\nimport ToggleButton from 'vue-js-toggle-button'\n\nVue.use(ToggleButton)\n```\n**OR**\n\nImport component:\n\n```javascript\nimport { ToggleButton } from 'vue-js-toggle-button'\n\nVue.component('ToggleButton', ToggleButton)\n```\n\n### Use\n\n```xml\n\u003Ctoggle-button @change=\"onChangeEventHandler\"\u002F>\n\n\u003Ctoggle-button v-model=\"myDataVariable\"\u002F>\n\n\u003Ctoggle-button :value=\"false\"\n               color=\"#82C7EB\"\n               :sync=\"true\"\n               :labels=\"true\"\u002F>\n\n\u003Ctoggle-button :value=\"true\"\n               :labels=\"{checked: 'Foo', unchecked: 'Bar'}\"\u002F>\n```\n\n### Properties\n\n| Name            | Type              | Default     | Description                        |\n| ---             | ---               | ---         | ---                                |\n| value           | Boolean           | false       | Initial state of the toggle button |\n| sync            | Boolean           | false       | If set to `true`, will be watching changes in `value` property and overwrite the current state of the button whenever `value` prop changes |\n| speed           | Number            | 300        | Transition time for the animation   |\n| disabled        | Boolean           | false      | Button does not react on mouse events |\n| color           | [String, Object]  | `#75C791`  | If `String` - color of the button when checked \u003Cbr>If `Object` - colors for the button when checked\u002Funchecked or disabled\u003Cbr>Example: `{checked: '#00FF00', unchecked: '#FF0000', disabled: '#CCCCCC'}`  |\n| css-colors       | Boolean           | false      | If `true` - deactivates the setting of colors through inline styles in favor of using CSS styling |\n| labels          | [Boolean, Object] | false      | If `Boolean` - shows\u002Fhides default labels (\"on\" and \"off\") \u003Cbr>If `Object` - sets custom labels for both states. \u003Cbr>Example: `{checked: 'Foo', unchecked: 'Bar'}`   |\n| switch-color     | [String, Object]  | `#BFCBD9`  | If `String` - color or background property of the switch when checked \u003Cbr>If `Object` - colors or background property for the switch when checked\u002Funcheked \u003Cbr>Example: `{checked: '#25EF02', unchecked: 'linear-gradient(red, yellow)'}`   |\n| width           | Number            | 50         | Width of the button |\n| height          | Number            | 22         | Height of the button |\n| margin          | Number            | 3          | Space between the switch and background border |\n| name            | String            | undefined  | Name to attach to the generated input field |\n| font-size        | Number            | undefined  | Font size |\n\n### Events\n\n| Name   | Description              |\n| ---    | ---                      |\n| change | Triggered whenever state of the component changes. \u003Cbr>Contains: \u003Cbr>`value` - state of the object \u003Cbr>`srcEvent` - source click event |\n| input  | Input event for v-model |\n\n### SSR\n\nInclude plugin in your `nuxt.config.js` file:\n\n```javascript\nmodule.exports = {\n  plugins: ['~plugins\u002Fvue-js-toggle-button']\n}\n```\n\nAnd your `plugins\u002Fvue-js-toggle-button.js` will look like:\n\n```javascript\nimport Vue from 'vue'\nimport Button from 'vue-js-toggle-button'\n\nVue.use(Button)\n```\n\n### Browser compatibility\n\n* Chrome: 40+\n* Firefox: 25+\n* Safari: 10+\n* IE: 11+\n\n","euvl\u002Fvue-js-toggle-button 是一个基于 Vue.js 2 的开关按钮组件，简洁美观且可自定义。该项目提供了多种属性配置，如颜色、标签、尺寸等，支持双向数据绑定和动画效果，便于开发者根据需求调整样式和行为。它适用于需要在网页或应用中添加切换开关功能的场景，如设置页面中的选项开关、状态控制等。采用 MIT 许可证发布，社区活跃度高，适合寻求高质量 UI 组件的前端开发者使用。",2,"2026-06-11 03:21:03","top_language"]