wpbones / pure-css-switch
Pure CSS Switch Button for WP Bones
Installs: 565
Dependents: 0
Suggesters: 0
Security: 0
Stars: 0
Watchers: 2
Forks: 0
Open Issues: 0
Language:CSS
README
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-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
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' );