{"id":13495852,"url":"https://github.com/hamed-ehtesham/pretty-checkbox-vue","last_synced_at":"2025-04-09T03:14:21.498Z","repository":{"id":28065985,"uuid":"115368179","full_name":"hamed-ehtesham/pretty-checkbox-vue","owner":"hamed-ehtesham","description":"Quickly integrate pretty checkbox components with Vue.js","archived":false,"fork":false,"pushed_at":"2022-12-06T19:48:11.000Z","size":1198,"stargazers_count":261,"open_issues_count":25,"forks_count":31,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-04-14T13:11:08.143Z","etag":null,"topics":["animation","bootstrap","checkbox","css","html","js","radio-buttons","scss","vuejs2"],"latest_commit_sha":null,"homepage":null,"language":"Vue","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/hamed-ehtesham.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":"2017-12-25T23:21:45.000Z","updated_at":"2024-04-09T19:33:31.000Z","dependencies_parsed_at":"2023-01-14T08:03:39.274Z","dependency_job_id":null,"html_url":"https://github.com/hamed-ehtesham/pretty-checkbox-vue","commit_stats":null,"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hamed-ehtesham%2Fpretty-checkbox-vue","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hamed-ehtesham%2Fpretty-checkbox-vue/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hamed-ehtesham%2Fpretty-checkbox-vue/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hamed-ehtesham%2Fpretty-checkbox-vue/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hamed-ehtesham","download_url":"https://codeload.github.com/hamed-ehtesham/pretty-checkbox-vue/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247968376,"owners_count":21025823,"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":["animation","bootstrap","checkbox","css","html","js","radio-buttons","scss","vuejs2"],"created_at":"2024-07-31T19:01:38.943Z","updated_at":"2025-04-09T03:14:21.467Z","avatar_url":"https://github.com/hamed-ehtesham.png","language":"Vue","funding_links":[],"categories":["UI Components [🔝](#readme)","Vue","UI组件","Components \u0026 Libraries","UI Components"],"sub_categories":["形成","UI Components","Form"],"readme":"\u003cp align=\"center\"\u003e\n\u003ca href=\"https://hamed-ehtesham.github.io/pretty-checkbox-vue/\"\u003e\n    \u003cimg src=\"https://raw.githubusercontent.com/hamed-ehtesham/pretty-checkbox-vue/master/banner.png\" width=\"300px\"\u003e\n\u003c/a\u003e\n\n\u003cbr\u003e\nQuickly integrate \u003ca href=\"https://lokesh-coder.github.io/pretty-checkbox/\"\u003epretty checkbox\u003c/a\u003e Components (checkbox, switch, radio button) with \u003ca href=\"https://vuejs.org\"\u003eVue.js\u003c/a\u003e\n\u003cbr\u003e\n\u003cbr\u003e\n\n\u003ca href=\"https://lokesh-coder.github.io/pretty-checkbox/\"\u003e\n    \u003cimg alt=\"\" src=\"https://img.shields.io/badge/%20pretty--checkbox-3.x-green.svg?style=flat-square\u0026colorA=8033b0\u0026colorB=75b7dd\"\u003e\n\u003c/a\u003e\n\u003ca href=\"https://vuejs.org\"\u003e\n    \u003cimg alt=\"\" src=\"https://img.shields.io/badge/vue.js-^2.2.0-green.svg?style=flat-square\u0026colorA=35495e\u0026colorB=41b883\"\u003e\n\u003c/a\u003e\n\n\u003cbr\u003e\n\n\u003ca href=\"https://github.com/hamed-ehtesham/pretty-checkbox-vue/releases\"\u003e\n    \u003cimg src=\"https://img.shields.io/github/release/hamed-ehtesham/pretty-checkbox-vue.svg?style=flat-square\u0026colorB=75b7dd\" alt=\"Github Release\"\u003e\n\u003c/a\u003e\n\u003ca href=\"https://github.com/hamed-ehtesham/pretty-checkbox-vue/blob/master/LICENSE\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/l/pretty-checkbox.svg?style=flat-square\u0026colorB=41b883\" alt=\"Licence\"\u003e\n\u003c/a\u003e\n\u003ca href=\"https://www.npmjs.com/package/pretty-checkbox-vue\"\u003e\n    \u003cimg alt=\"\" src=\"https://img.shields.io/npm/dt/pretty-checkbox-vue.svg?style=flat-square\"\u003e\n\u003c/a\u003e\n\u003ca href=\"https://www.npmjs.com/package/pretty-checkbox-vue\"\u003e\n    \u003cimg alt=\"\" src=\"https://img.shields.io/npm/dm/pretty-checkbox-vue.svg?style=flat-square\"\u003e\n\u003c/a\u003e\n\n\u003c/p\u003e\n\n\u003cdiv class=\"highlight highlight-source-shell\"\u003e\n\u003cpre\u003e\n\u003cdiv align=\"center\"\u003e\u003cstrong\u003eDemo and documentation\u003c/strong\u003e\u003c/div\u003e\n\u003cdiv align=\"center\"\u003e\u003ca align=\"center\" href=\"https://hamed-ehtesham.github.io/pretty-checkbox-vue/\"\u003ehttps://hamed-ehtesham.github.io/pretty-checkbox-vue/\u003c/a\u003e\u003c/div\u003e\n\u003c/pre\u003e\n\u003c/div\u003e\n\n## Installation\n\n```js\nnpm i --save-dev pretty-checkbox-vue\n```\n\n### Browser\n\nInclude the script file, then install the component with `Vue.use(PrettyCheckbox);` e.g.:\n\n```html\n\u003cscript type=\"text/javascript\" src=\"node_modules/vuejs/dist/vue.min.js\"\u003e\u003c/script\u003e\n\u003cscript type=\"text/javascript\" src=\"node_modules/pretty-checkbox-vue/dist/pretty-checkbox-vue.min.js\"\u003e\u003c/script\u003e\n\u003cscript type=\"text/javascript\"\u003e\n  Vue.use(PrettyCheckbox);\n\u003c/script\u003e\n```\n\n### Module\n\n```js\nimport PrettyCheckbox from 'pretty-checkbox-vue';\n\nVue.use(PrettyCheckbox);\n```\n\nOr\n\n```js\nimport PrettyInput from 'pretty-checkbox-vue/input';\nimport PrettyCheck from 'pretty-checkbox-vue/check';\nimport PrettyRadio from 'pretty-checkbox-vue/radio';\n\nVue.component('p-input', PrettyInput);\nVue.component('p-check', PrettyCheck);\nVue.component('p-radio', PrettyRadio);\n```\n\n## Usage\n\nOnce installed, it can be used in a template as simply as:\n\n```html\n\u003cp-check name=\"check\" color=\"success\" v-model=\"check\"\u003echeck\u003c/p-check\u003e\n\u003cp-radio name=\"radio\" color=\"info\" v-model=\"radio\"\u003eradio\u003c/p-radio\u003e\n\n\u003c!-- Or it can be used just like input --\u003e\n\n\u003cp-input type=\"checkbox\" name=\"check\" color=\"success\" v-model=\"check\"\u003echeck\u003c/p-input\u003e\n\u003cp-input type=\"radio\" name=\"radio\" color=\"info\" v-model=\"radio\"\u003eradio\u003c/p-input\u003e\n```\n\n\n### Properties\nProperty | Type | Default Value\n------------ | ------------- | -------------\ntype | String | checkbox (checkbox \u0026 input) or radio (radio) \nname | String | \nvalue | Any | \nclass | String | `p-default` (checkbox \u0026 input) or `p-default p-round` (radio) \ntrue-value | Boolean or String | true\nfalse-value | Boolean or String | false\nchecked | Boolean | false\ndisabled | Boolean | false\nrequired | Boolean | false\nindeterminate | Boolean | false\ncolor | String | \noff-color | String | \nhover-color | String | \nindeterminate-color | String | \ntoggle | Boolean | false\nhover | Boolean | false\nfocus | Boolean | false\n\n### Slots\nName | Purpose\n------------ | -------------\ndefault (no name) | include **label** in _**default**_ mode or for **\"on\"** state in _**toggle**_ mode\nextra | include **icon** or **svg** or **image** in _**default**_ mode or for **\"on\"** state in _**toggle**_ mode\noff-label | include **label** for **\"off\"** state in _**toggle**_ mode\noff-extra | include **icon** or **svg** or **image** for **\"off\"** state in _**toggle**_ mode\nhover-label | include **label** in _**hover**_ state\nhover-extra | include **icon** or **svg** or **image** in _**hover**_ state\nindeterminate-label | include **label** in _**indeterminate**_ state\nindeterminate-extra | include **icon** or **svg** or **image** in _**indeterminate**_ state\n\nIf you have discovered a 🐜 or have a feature suggestion, feel free to create an [issue](https://github.com/hamed-ehtesham/pretty-checkbox-vue/issues) on Github.\n\n# License\nReleased under The MIT [License](https://github.com/hamed-ehtesham/pretty-checkbox-vue/blob/master/LICENSE). Copyright (c) hamed-ehtesham.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhamed-ehtesham%2Fpretty-checkbox-vue","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhamed-ehtesham%2Fpretty-checkbox-vue","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhamed-ehtesham%2Fpretty-checkbox-vue/lists"}