{"id":15292289,"url":"https://github.com/wpbones/pure-css-switch","last_synced_at":"2025-05-07T05:06:24.555Z","repository":{"id":57082159,"uuid":"74677533","full_name":"wpbones/pure-css-switch","owner":"wpbones","description":"A WP Bones less/css files used to implement a pure css switch button","archived":false,"fork":false,"pushed_at":"2024-10-24T16:35:56.000Z","size":80,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-05-07T05:06:19.650Z","etag":null,"topics":["css","switch-control","wordpress","wordpress-development","wp-bones","wp-bones-packages"],"latest_commit_sha":null,"homepage":"","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-2-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/wpbones.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2016-11-24T13:51:49.000Z","updated_at":"2024-10-24T16:36:00.000Z","dependencies_parsed_at":"2024-10-23T13:59:43.755Z","dependency_job_id":null,"html_url":"https://github.com/wpbones/pure-css-switch","commit_stats":{"total_commits":10,"total_committers":2,"mean_commits":5.0,"dds":"0.30000000000000004","last_synced_commit":"b7bc7d47eafd24a21322113dcb93d181936d5976"},"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wpbones%2Fpure-css-switch","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wpbones%2Fpure-css-switch/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wpbones%2Fpure-css-switch/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wpbones%2Fpure-css-switch/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wpbones","download_url":"https://codeload.github.com/wpbones/pure-css-switch/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252817010,"owners_count":21808705,"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":["css","switch-control","wordpress","wordpress-development","wp-bones","wp-bones-packages"],"created_at":"2024-09-30T16:17:17.128Z","updated_at":"2025-05-07T05:06:24.540Z","avatar_url":"https://github.com/wpbones.png","language":"CSS","readme":"# Pure CSS Switch Button for WP Bones\n\n\u003cdiv align=\"center\"\u003e\n\n[![Latest Stable Version](https://poser.pugx.org/wpbones/pure-css-switch/v/stable?style=for-the-badge)](https://packagist.org/packages/wpbones/pure-css-switch) \u0026nbsp;\n[![Latest Unstable Version](https://poser.pugx.org/wpbones/pure-css-switch/v/unstable?style=for-the-badge)](https://packagist.org/packages/wpbones/pure-css-switch) \u0026nbsp;\n[![Total Downloads](https://poser.pugx.org/wpbones/pure-css-switch/downloads?style=for-the-badge)](https://packagist.org/packages/wpbones/pure-css-switch) \u0026nbsp;\n[![License](https://poser.pugx.org/wpbones/pure-css-switch/license?style=for-the-badge)](https://packagist.org/packages/wpbones/pure-css-switch) \u0026nbsp;\n[![Monthly Downloads](https://poser.pugx.org/wpbones/pure-css-switch/d/monthly?style=for-the-badge)](https://packagist.org/packages/wpbones/pure-css-switch)\n\n\n\u003c/div\u003e\n\nPure CSS Switch Button for WordPress/WP Bones\n\n![Pure CSS Switch Button for WP Bones](https://github.com/user-attachments/assets/29822083-a547-4da6-a0e8-e1a048134e26)\n\n## Requirements\n\nThis package works with a WordPress plugin written with [WP Bones framework library](https://github.com/wpbones/WPBones).\n\n## Installation\n\nYou can install third party packages by using:\n\n```sh copy\nphp bones require  wpbones/pure-css-switch\n```\n\nI advise to use this command instead of `composer require` because doing this an automatic renaming will done.\n\nYou can use composer to install this package:\n\n```sh copy\ncomposer require  wpbones/pure-css-switch\n```\n\nYou may also to add `\" wpbones/pure-css-switch\": \"~0.7\"` in the `composer.json` file of your plugin:\n\n```json copy filename=\"composer.json\" {4}\n  \"require\": {\n    \"php\": \"\u003e=7.4\",\n    \"wpbones/wpbones\": \"~1.5\",\n    \" wpbones/pure-css-tabs\": \"~0.7\"\n  },\n```\n\nand run\n\n```sh copy\ncomposer install\n```\n\n## Development installation\n\nUse `yarn` to install the development tools. Next, use `gulp --production` to compile the resources.\n\n## Enqueue for Controller\n\nYou can use the provider to enqueue the styles.\n\n```php\npublic function index()\n{\n  // enqueue the minified version\n  PureCSSSwitchProvider::enqueueStyles();\n\n  // ...\n\n}\n```\n\n## PureCSSSwitchProvider\n\nThis is a static class autoloaded by composer. You can use it to enqueue or get the styles path:\n\n```php\n// enqueue the minified version\nPureCSSSwitchProvider::enqueueStyles();\n\n// enqueue the flat version\nPureCSSSwitchProvider::enqueueStyles( false );\n\n// return the absolute path of the minified css\nPureCSSSwitchProvider::css();\n\n// return the absolute path of the flat css\nPureCSSSwitchProvider::css();\n```\n\n## Mode\n\nTo default the switch works as on/off button. You can change the mode by setting `mode` property,\n\n```php\n\u003c?php echo WPKirk\\PureCSSSwitch\\Html\\HtmlTagSwitchButton::name( 'test-switch-7' )\n            -\u003emode( 'select' ); ?\u003e\n```\n\nIn the above example, you can use it as selector instead of on/off button.\n\n\n## Theme\n\nOf course, you can switch theme by using `theme` property ot its fluent version.\nCurrently, we support two theme:\n\n* `flat-round` - default\n* `flat-square`\n\nYou should use something look like:\n\n```php\n\u003c?php echo WPKirk\\PureCSSSwitch\\Html\\HtmlTagSwitchButton::name( 'test-switch-7' )\n            -\u003etheme( 'flat-square' ); ?\u003e\n```\n\n\n## Examples\n\nIn your view you can use the `WPKirk\\PureCSSSwitch\\Html\\HtmlTagSwitchButton` class\n\n```php copy filename=\"Simple Usage\"\necho WPKirk\\PureCSSSwitch\\Html\\HtmlTagSwitchButton::name( 'test-switch-1' );\n```\n\n```php copy filename=\"Left Label\"\necho WPKirk\\PureCSSSwitch\\Html\\HtmlTagSwitchButton::name( 'test-switch-2' )\n  -\u003eleft_label( 'Swipe me' );\n```\n\n```php copy filename=\"Right Label\"\necho WPKirk\\PureCSSSwitch\\Html\\HtmlTagSwitchButton::name( 'test-switch-3' )\n  -\u003eright_label( 'Swipe me' );\n```\n\n```php copy filename=\"Both Labels\"\necho WPKirk\\PureCSSSwitch\\Html\\HtmlTagSwitchButton::name( 'test-switch-4' )\n  -\u003eleft_label( 'Swipe me' )\n  -\u003eright_label( 'Swipe me' );\n```\n\n```php copy filename=\"Checked\"\necho WPKirk\\PureCSSSwitch\\Html\\HtmlTagSwitchButton::name( 'test-switch-5' )\n  -\u003eleft_label( 'Swipe me' )\n  -\u003echecked( true );\n```\n\n```php copy filename=\"Disabled\"\necho WPKirk\\PureCSSSwitch\\Html\\HtmlTagSwitchButton::name( 'test-switch-6' )\n  -\u003eleft_label( 'Swipe me' )\n  -\u003edisabled( true );\n```\n\n```php copy filename=\"Theme\"\necho WPKirk\\PureCSSSwitch\\Html\\HtmlTagSwitchButton::name( 'test-switch-7' )\n  -\u003etheme( 'flat-square' );\n```\n\n```php copy filename=\"Mode\"\necho WPKirk\\PureCSSSwitch\\Html\\HtmlTagSwitchButton::name( 'test-switch-8' )\n  -\u003eleft_label( 'Turn left' )\n  -\u003eright_label( 'Turn right' )\n  -\u003emode( 'select' );\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwpbones%2Fpure-css-switch","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwpbones%2Fpure-css-switch","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwpbones%2Fpure-css-switch/lists"}