Packages Boilerplate on GitHub See Packages Boilerplate in Action

Pure CSS Switch Button for WP Bones

Pure CSS Switch Button for WordPress/WP Bones

Pure CSS Switch Button for WP Bones

Requirements

This package works with a WordPress plugin written with WP Bones framework library .

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:

composer.json


  "require": {
    "php": ">=8.1",
    "wpbones/wpbones": "~1.10",
    " wpbones/pure-css-tabs": "~1.0"
  },

and run


composer install

Development installation

Run yarn install to install the dev tools, then yarn build to compile the resources.

Enqueue for Controller

You can use the provider to enqueue the styles.


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:


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


<?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.

Theme

Of course, you can switch theme by using theme property ot its fluent version. Currently, we support two theme:

flat-round - default
flat-square

You should use something look like:


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

Simple Usage


echo WPKirk\PureCSSSwitch\Html\HtmlTagSwitchButton::name( 'test-switch-1' );

Left Label


echo WPKirk\PureCSSSwitch\Html\HtmlTagSwitchButton::name( 'test-switch-2' )
  ->left_label( 'Swipe me' );

Right Label


echo WPKirk\PureCSSSwitch\Html\HtmlTagSwitchButton::name( 'test-switch-3' )
  ->right_label( 'Swipe me' );

Both Labels


echo WPKirk\PureCSSSwitch\Html\HtmlTagSwitchButton::name( 'test-switch-4' )
  ->left_label( 'Swipe me' )
  ->right_label( 'Swipe me' );

Checked


echo WPKirk\PureCSSSwitch\Html\HtmlTagSwitchButton::name( 'test-switch-5' )
  ->left_label( 'Swipe me' )
  ->checked( true );

Disabled


echo WPKirk\PureCSSSwitch\Html\HtmlTagSwitchButton::name( 'test-switch-6' )
  ->left_label( 'Swipe me' )
  ->disabled( true );

Theme


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

Mode


echo WPKirk\PureCSSSwitch\Html\HtmlTagSwitchButton::name( 'test-switch-8' )
  ->left_label( 'Turn left' )
  ->right_label( 'Turn right' )
  ->mode( 'select' );

Packages Boilerplate on GitHub See Packages Boilerplate in Action

Pure CSS Switch Button for WP Bones

Requirements

Installation

Development installation

Enqueue for Controller

PureCSSSwitchProvider

Mode

Theme

Examples

HIGHLIGHTS

RESOURCES

ECOSYSTEM