PHPackages                             wpbones/pure-css-switch - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. wpbones/pure-css-switch

ActiveLibrary[Utility & Helpers](/categories/utility)

wpbones/pure-css-switch
=======================

Pure CSS Switch Button for WP Bones

1.1.3(1y ago)0787MITCSS

Since Nov 25Pushed 1y ago1 watchersCompare

[ Source](https://github.com/wpbones/pure-css-switch)[ Packagist](https://packagist.org/packages/wpbones/pure-css-switch)[ Docs](https://github.com/wpbones/pure-css-switch)[ RSS](/packages/wpbones-pure-css-switch/feed)WikiDiscussions main Synced today

READMEChangelog (1)DependenciesVersions (11)Used By (0)

Pure CSS Switch Button for WP Bones
===================================

[](#pure-css-switch-button-for-wp-bones)

[![Latest Stable Version](https://camo.githubusercontent.com/9ef7805b25f5a1812407925446ee8b71a2a517474e49d665d4711346b7ecdb56/68747470733a2f2f706f7365722e707567782e6f72672f7770626f6e65732f707572652d6373732d7377697463682f762f737461626c653f7374796c653d666f722d7468652d6261646765)](https://packagist.org/packages/wpbones/pure-css-switch) [![Latest Unstable Version](https://camo.githubusercontent.com/59fde57aa83a0d4567c4f118b40f3bddfa8d7531b182ae96f2ec26b7207a130d/68747470733a2f2f706f7365722e707567782e6f72672f7770626f6e65732f707572652d6373732d7377697463682f762f756e737461626c653f7374796c653d666f722d7468652d6261646765)](https://packagist.org/packages/wpbones/pure-css-switch) [![Total Downloads](https://camo.githubusercontent.com/dec060cd757a1ecb67bb4f249346c9b6c3a57c02fdceef43238209b4901d4c9d/68747470733a2f2f706f7365722e707567782e6f72672f7770626f6e65732f707572652d6373732d7377697463682f646f776e6c6f6164733f7374796c653d666f722d7468652d6261646765)](https://packagist.org/packages/wpbones/pure-css-switch) [![License](https://camo.githubusercontent.com/b0acffa8acbb9cc19790d226f9b00b60ac7dd056e0edac0eb9e41ecf6c82225a/68747470733a2f2f706f7365722e707567782e6f72672f7770626f6e65732f707572652d6373732d7377697463682f6c6963656e73653f7374796c653d666f722d7468652d6261646765)](https://packagist.org/packages/wpbones/pure-css-switch) [![Monthly Downloads](https://camo.githubusercontent.com/054235f373d46c3ec716fcf50ddef5444c84f9923a63a20ccfa8688fb570aab9/68747470733a2f2f706f7365722e707567782e6f72672f7770626f6e65732f707572652d6373732d7377697463682f642f6d6f6e74686c793f7374796c653d666f722d7468652d6261646765)](https://packagist.org/packages/wpbones/pure-css-switch)

Pure CSS Switch Button for WordPress/WP Bones

[![Pure CSS Switch Button for WP Bones](https://private-user-images.githubusercontent.com/432181/369304681-29822083-a547-4da6-a0e8-e1a048134e26.png?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3ODE1MjI3NjQsIm5iZiI6MTc4MTUyMjQ2NCwicGF0aCI6Ii80MzIxODEvMzY5MzA0NjgxLTI5ODIyMDgzLWE1NDctNGRhNi1hMGU4LWUxYTA0ODEzNGUyNi5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjYwNjE1JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI2MDYxNVQxMTIxMDRaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1iZjg4OGI1NmRlMTE4Y2ZlNzg5MzA1ZWVjNzcyMzMzMjFlZjBlN2M5NGNjNzU3MWI1M2Y4N2JjOTRkYTc5Y2JmJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZyZXNwb25zZS1jb250ZW50LXR5cGU9aW1hZ2UlMkZwbmcifQ.8tht0P_hu1pnb2oL2MD3uEoB3kfpcGQWqvm2DwB9eU8)](https://private-user-images.githubusercontent.com/432181/369304681-29822083-a547-4da6-a0e8-e1a048134e26.png?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3ODE1MjI3NjQsIm5iZiI6MTc4MTUyMjQ2NCwicGF0aCI6Ii80MzIxODEvMzY5MzA0NjgxLTI5ODIyMDgzLWE1NDctNGRhNi1hMGU4LWUxYTA0ODEzNGUyNi5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjYwNjE1JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI2MDYxNVQxMTIxMDRaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1iZjg4OGI1NmRlMTE4Y2ZlNzg5MzA1ZWVjNzcyMzMzMjFlZjBlN2M5NGNjNzU3MWI1M2Y4N2JjOTRkYTc5Y2JmJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZyZXNwb25zZS1jb250ZW50LXR5cGU9aW1hZ2UlMkZwbmcifQ.8tht0P_hu1pnb2oL2MD3uEoB3kfpcGQWqvm2DwB9eU8)

Requirements
------------

[](#requirements)

This package works with a WordPress plugin written with [WP Bones framework library](https://github.com/wpbones/WPBones).

Installation
------------

[](#installation)

You can install third party packages by using:

```
php bones require  wpbones/pure-css-switch
```

I advise to use this command instead of `composer require` because doing this an automatic renaming will done.

You can use composer to install this package:

```
composer require  wpbones/pure-css-switch
```

You may also to add `" wpbones/pure-css-switch": "~0.7"` in the `composer.json` file of your plugin:

```
  "require": {
    "php": ">=7.4",
    "wpbones/wpbones": "~1.5",
    " wpbones/pure-css-tabs": "~0.7"
  },
```

and run

```
composer install
```

Development installation
------------------------

[](#development-installation)

Use `yarn` to install the development tools. Next, use `gulp --production` to compile the resources.

Enqueue for Controller
----------------------

[](#enqueue-for-controller)

You can use the provider to enqueue the styles.

```
public function index()
{
  // enqueue the minified version
  PureCSSSwitchProvider::enqueueStyles();

  // ...

}
```

PureCSSSwitchProvider
---------------------

[](#purecssswitchprovider)

This is a static class autoloaded by composer. You can use it to enqueue or get the styles path:

```
// enqueue the minified version
PureCSSSwitchProvider::enqueueStyles();

// enqueue the flat version
PureCSSSwitchProvider::enqueueStyles( false );

// return the absolute path of the minified css
PureCSSSwitchProvider::css();

// return the absolute path of the flat css
PureCSSSwitchProvider::css();
```

Mode
----

[](#mode)

To default the switch works as on/off button. You can change the mode by setting `mode` property,

```