Pure CSS Switch Button for WP Bones
Pure CSS Switch Button for WordPress/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-switchI 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-switchYou 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": "~1.0"
},and run
composer installDevelopment 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- defaultflat-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
echo WPKirk\PureCSSSwitch\Html\HtmlTagSwitchButton::name( 'test-switch-1' );echo WPKirk\PureCSSSwitch\Html\HtmlTagSwitchButton::name( 'test-switch-2' )
->left_label( 'Swipe me' );echo WPKirk\PureCSSSwitch\Html\HtmlTagSwitchButton::name( 'test-switch-3' )
->right_label( 'Swipe me' );echo WPKirk\PureCSSSwitch\Html\HtmlTagSwitchButton::name( 'test-switch-4' )
->left_label( 'Swipe me' )
->right_label( 'Swipe me' );echo WPKirk\PureCSSSwitch\Html\HtmlTagSwitchButton::name( 'test-switch-5' )
->left_label( 'Swipe me' )
->checked( true );echo WPKirk\PureCSSSwitch\Html\HtmlTagSwitchButton::name( 'test-switch-6' )
->left_label( 'Swipe me' )
->disabled( true );echo WPKirk\PureCSSSwitch\Html\HtmlTagSwitchButton::name( 'test-switch-7' )
->theme( 'flat-square' );echo WPKirk\PureCSSSwitch\Html\HtmlTagSwitchButton::name( 'test-switch-8' )
->left_label( 'Turn left' )
->right_label( 'Turn right' )
->mode( 'select' );
Nextra