{"id":15673082,"url":"https://github.com/victornpb/vt-toggle","last_synced_at":"2025-05-06T21:49:11.251Z","repository":{"id":23650376,"uuid":"99515240","full_name":"victornpb/vt-toggle","owner":"victornpb","description":"Turn HTML checkbox inputs into fancy toggle switches with just a CSS class","archived":false,"fork":false,"pushed_at":"2023-11-30T15:05:06.000Z","size":36,"stargazers_count":14,"open_issues_count":2,"forks_count":6,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-19T04:55:19.949Z","etag":null,"topics":["checkbox","css","fancy-toggle-switches","sass","ui-components","vt-toggle"],"latest_commit_sha":null,"homepage":"https://victornpb.github.io/vt-toggle/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/victornpb.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-08-06T21:50:51.000Z","updated_at":"2025-02-28T03:30:41.000Z","dependencies_parsed_at":"2024-10-03T15:36:48.893Z","dependency_job_id":"2925fcc6-96d8-486c-aec5-6f20254ce3d5","html_url":"https://github.com/victornpb/vt-toggle","commit_stats":{"total_commits":16,"total_committers":5,"mean_commits":3.2,"dds":0.625,"last_synced_commit":"c8377e67fa1ef3ee9273702c3c85c915b4e32c3f"},"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/victornpb%2Fvt-toggle","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/victornpb%2Fvt-toggle/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/victornpb%2Fvt-toggle/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/victornpb%2Fvt-toggle/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/victornpb","download_url":"https://codeload.github.com/victornpb/vt-toggle/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249675566,"owners_count":21309324,"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","css","fancy-toggle-switches","sass","ui-components","vt-toggle"],"created_at":"2024-10-03T15:36:42.395Z","updated_at":"2025-04-19T10:30:52.387Z","avatar_url":"https://github.com/victornpb.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vt-toggle\nTurn HTML checkbox inputs into fancy toggle switches with just a CSS class\n\n\n**Demo**: https://victornpb.github.io/vt-toggle/\n\n\n# What is this?\n\nYou can turn a simple checkbox like this\n\n\u003e \u003cimg src=\"http://i.imgur.com/X64C7Ab.png\"\u003e\n\nInto this fancy toggle just by addind the `vt-toggle` class\n  \n\u003e \u003cimg src=\"http://i.imgur.com/ZlP9PV7.png\"\u003e \n\n\n    \u003cinput type=\"checkbox\" class=\"vt-toggle\"\u003e\n   \n\n# Install\n\nOk, cool! how can I get it?\n\n#### [NPM](https://www.npmjs.com/package/vt-toggle) \n\n    npm install vt-toggle\n\n#### Bower\n\n    bower install vt-toggle\n    \n#### CDN\n\n    https://unpkg.com/browse/vt-toggle@1.0.1/css/vt-toggle.css\n    \n#### Download\n\n    https://github.com/victornpb/vt-toggle/releases/\n### Importing into project\n\n#### Import using link\n```html\n\u003clink rel=\"stylesheet\" type=\"text/css\" href=\"bower_components/vt-toggle/css/vt-toggle.css\"\u003e\n\u003clink rel=\"stylesheet\" type=\"text/css\" href=\"node_modules/vt-toggle/css/vt-toggle.css\"\u003e\n```\n##### Import using SASS\n```css\n@import \"node_modules/vt-toggle/scss/vt-toggle\"; // NPM\n@import \"bower_components/vt-toggle/scss/vt-toggle\"; // Bower\n```\n\n### Creating your own classes using SASS\n\nYou can create your own classes using the SASS mixin.\n```scss\n@mixin vt-toggle($toggleWidth, $toggleHeight, $handleMargin, $roundness, $on-color, $off-color, $label)\n```\n\nExample:\n```scss\n@import \"bower_components/vt-toggle/scss/vt-toggle\";\n\n$blue: #00f;\n$red: #f00;\n\ninput.vt-toggle.accent {\n    @include vt-toggle(44px, 22px, 1px, 1, $blue, gray, false);\n}\ninput.vt-toggle.danger {\n    @include vt-toggle(44px, 22px, 1px, 1, $red, gray, false);\n}\n```\n\nThen you can use:\n```html\n\u003cinput type=\"checkbox\" class=\"vt-toggle accent\"\u003e I'm blue toggle\n\u003cinput type=\"checkbox\" class=\"vt-toggle danger\"\u003e I'm red toggle\n``` \n----\n\n# Default styles\n\n## Default Sizes:\n\n| class | Dimensions      | Preview                                    |\n|-------|-----------------|--------------------------------------------|\n| xs    | 18x22           | \u003cimg src=\"http://i.imgur.com/sj72uAN.png\"\u003e |\n| sm    | 32x16           | \u003cimg src=\"http://i.imgur.com/K5qZgg7.png\"\u003e |\n| md    | 44x22 (default) | \u003cimg src=\"http://i.imgur.com/ofj7u7E.png\"\u003e |\n| lg    | 64x32           | \u003cimg src=\"http://i.imgur.com/PKHziIP.png\"\u003e |\n\n## States\n\n| State          | Preview                                    |\n|----------------|--------------------------------------------|\n| On             | \u003cimg src=\"http://i.imgur.com/ofj7u7E.png\"\u003e |\n| Off            | \u003cimg src=\"http://i.imgur.com/fMIYHt9.png\"\u003e |\n| Disabled (on)  | \u003cimg src=\"http://i.imgur.com/82rzSlS.png\"\u003e |\n| Disabled (off) | \u003cimg src=\"http://i.imgur.com/jXcJQql.png\"\u003e |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvictornpb%2Fvt-toggle","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvictornpb%2Fvt-toggle","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvictornpb%2Fvt-toggle/lists"}