Skip to Content
✨ WP Bones 1.9.6 is out! Check the Release Notes →


Pure CSS Switch Button for WP Bones

Latest Stable VersionLatest Unstable VersionTotal DownloadsLicenseMonthly DownloadsGitHubCHANGELOG

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": ">=7.4", "wpbones/wpbones": "~1.5", " wpbones/pure-css-tabs": "~1.0" },

and run

composer install

Development installation

Use yarn to install the development tools. Next, use gulp --production 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' );

Last updated on