wpbones/pure-css-switch

Pure CSS Switch Button for WP Bones

Pure CSS Switch Button for WP Bones

Pure CSS Switch Button for WordPress/WP Bones, _(*1)

, _(*2)

Requirements

This package works with a WordPress plugin written with WP Bones framework library., _(*3)

Installation

You can install third party packages by using:, _(*4)

```sh copy php bones require wpbones/pure-css-switch, <sub>(*5)</sub>

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:

```sh copy
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:, <sub>(*6)</sub>

```json copy filename="composer.json" {4} "require": { "php": ">=7.4", "wpbones/wpbones": "~1.5", " wpbones/pure-css-tabs": "~0.7" },, <sub>(*7)</sub>

and run

```sh copy
composer install

Development installation

Use yarn to install the development tools. Next, use gulp --production to compile the resources., <sub>(*8)</sub>

Enqueue for Controller

You can use the provider to enqueue the styles., <sub>(*9)</sub>

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

  // ...

}

PureCSSSwitchProvider

This is a static class autoloaded by composer. You can use it to enqueue or get the styles path:, <sub>(*10)</sub>

// 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

To default the switch works as on/off button. You can change the mode by setting mode property,, <sub>(*11)</sub>

<?php echo WPKirk\PureCSSSwitch\Html\HtmlTagSwitchButton::name( 'test-switch-7' )
            ->mode( 'select' ); ?>

In the above example, you can use it as selector instead of on/off button., <sub>(*12)</sub>

Theme

Of course, you can switch theme by using theme property ot its fluent version. Currently, we support two theme:, <sub>(*13)</sub>

• flat-round - default
• flat-square

You should use something look like:, <sub>(*14)</sub>

<?php echo WPKirk\PureCSSSwitch\Html\HtmlTagSwitchButton::name( 'test-switch-7' )
            ->theme( 'flat-square' ); ?>

Examples

In your view you can use the WPKirk\PureCSSSwitch\Html\HtmlTagSwitchButton class, <sub>(*15)</sub>

```php copy filename="Simple Usage" echo WPKirk\PureCSSSwitch\Html\HtmlTagSwitchButton::name( 'test-switch-1' );, <sub>(*16)</sub>

```php copy filename="Left Label"
echo WPKirk\PureCSSSwitch\Html\HtmlTagSwitchButton::name( 'test-switch-2' )
  ->left_label( 'Swipe me' );

```php copy filename="Right Label" echo WPKirk\PureCSSSwitch\Html\HtmlTagSwitchButton::name( 'test-switch-3' ) ->right_label( 'Swipe me' );, <sub>(*17)</sub>

```php copy filename="Both Labels"
echo WPKirk\PureCSSSwitch\Html\HtmlTagSwitchButton::name( 'test-switch-4' )
  ->left_label( 'Swipe me' )
  ->right_label( 'Swipe me' );

```php copy filename="Checked" echo WPKirk\PureCSSSwitch\Html\HtmlTagSwitchButton::name( 'test-switch-5' ) ->left_label( 'Swipe me' ) ->checked( true );, <sub>(*18)</sub>

```php copy filename="Disabled"
echo WPKirk\PureCSSSwitch\Html\HtmlTagSwitchButton::name( 'test-switch-6' )
  ->left_label( 'Swipe me' )
  ->disabled( true );

```php copy filename="Theme" echo WPKirk\PureCSSSwitch\Html\HtmlTagSwitchButton::name( 'test-switch-7' ) ->theme( 'flat-square' );, <sub>(*19)</sub>

```php copy filename="Mode"
echo WPKirk\PureCSSSwitch\Html\HtmlTagSwitchButton::name( 'test-switch-8' )
  ->left_label( 'Turn left' )
  ->right_label( 'Turn right' )
  ->mode( 'select' );