Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/wpbones/pure-css-switch
A WP Bones less/css files used to implement a pure css switch button
https://github.com/wpbones/pure-css-switch
css switch-control wordpress wordpress-development wp-bones wp-bones-packages
Last synced: 3 days ago
JSON representation
A WP Bones less/css files used to implement a pure css switch button
- Host: GitHub
- URL: https://github.com/wpbones/pure-css-switch
- Owner: wpbones
- License: bsd-2-clause
- Created: 2016-11-24T13:51:49.000Z (almost 8 years ago)
- Default Branch: main
- Last Pushed: 2024-09-19T17:33:49.000Z (14 days ago)
- Last Synced: 2024-09-19T18:06:10.029Z (14 days ago)
- Topics: css, switch-control, wordpress, wordpress-development, wp-bones, wp-bones-packages
- Language: CSS
- Homepage:
- Size: 72.3 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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](https://github.com/wpbones/WPBones).
## Installation
You can install third party packages by using:
```sh copy
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:
```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:
```json copy filename="composer.json" {4}
"require": {
"php": ">=7.4",
"wpbones/wpbones": "~1.5",
" wpbones/pure-css-tabs": "~0.7"
},
```
and run
```sh copy
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.
```php
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:
```php
// 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
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
theme( 'flat-square' ); ?>
```
## Examples
In your view you can use the `WPKirk\PureCSSSwitch\Html\HtmlTagSwitchButton` class
```php copy filename="Simple Usage"
echo WPKirk\PureCSSSwitch\Html\HtmlTagSwitchButton::name( 'test-switch-1' );
```
```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' );
```
```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 );
```
```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' );
```
```php copy filename="Mode"
echo WPKirk\PureCSSSwitch\Html\HtmlTagSwitchButton::name( 'test-switch-8' )
->left_label( 'Turn left' )
->right_label( 'Turn right' )
->mode( 'select' );
```