Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/wpbones/pure-css-tabs
A WP Bones less/css files used to implement a pure css tabs
https://github.com/wpbones/pure-css-tabs
css-tabs laravel wordpress wordpress-development wp-bones wp-bones-packages
Last synced: 2 months ago
JSON representation
A WP Bones less/css files used to implement a pure css tabs
- Host: GitHub
- URL: https://github.com/wpbones/pure-css-tabs
- Owner: wpbones
- License: bsd-2-clause
- Created: 2016-10-28T12:39:55.000Z (about 8 years ago)
- Default Branch: main
- Last Pushed: 2024-10-24T16:45:39.000Z (3 months ago)
- Last Synced: 2024-10-25T23:47:42.739Z (2 months ago)
- Topics: css-tabs, laravel, wordpress, wordpress-development, wp-bones, wp-bones-packages
- Language: Less
- Homepage:
- Size: 29.3 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Pure CSS Tabs for WP Bones
[](https://packagist.org/packages/wpbones/pure-css-tabs)
[](https://packagist.org/packages/wpbones/pure-css-tabs)
[](https://packagist.org/packages/wpbones/pure-css-tabs)
[](https://packagist.org/packages/wpbones/pure-css-tabs)
[](https://packagist.org/packages/wpbones/pure-css-tabs)
This package provides a simple way to create tabs with pure CSS 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-tabs
```
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-tabs
```
You may also to add `" wpbones/pure-css-tabs": "~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
```
## Enqueue for Controller
You can use the provider to enqueue the styles.
```php copy
public function index()
{
// enqueue the minified version
PureCSSTabsProvider::enqueueStyles();
// ...
}
```
## PureCSSTabsProvider
This is a static class autoloaded by composer. You can use it to enqueue or get the styles path:
```php copy
// enqueue the minified version
PureCSSTabsProvider::enqueueStyles();
// enqueue the flat version
PureCSSTabsProvider::enqueueStyles( false );
// return the absolute path of the minified css
PureCSSTabsProvider::css();
// return the absolute path of the flat css
PureCSSTabsProvider::css();
```
## HTML markup
```html copy
Content
Content
```
Of course, you may use the **fragment** feature to include the single tabs:
```html copy
view( 'folder.tab1' ) ?>
view( 'folder.tab2' ) ?>
```
In `/folder/tab1.php` you just insert the following markup:
```html copy
Content
```
## Customize
Of course, you can edit both of CSS or LESS files in order to change the appearance of tabs.
In the LESS file, you'll find the color variable as well.
```less copy
@wpbones-tab-border-color : #aaa;
@wpbones-tab-responsive-accordion-border : #ddd;
@wpbones-tab-disabled : #ddd;
@wpbones-tab-content-color : #fff;
```
> 💡 Anyway, the best way to customize your tabs is override the default styles. Otherwise, when an update will be done you'll lose your customization.
## Helper
In addition, you can use some methods provided by `PureCSSTabsProvider` class.
In your HTML view you might use:
```php copy
/**
* Display tabs by array
*
* self::tabs(
* 'tab-1' => [ 'label' => 'Tab 1', 'content' => 'Hello', 'selected' => true ],
* 'tab-2' => [ 'label' => 'Tab 1', 'content' => 'Hello' ],
* ...
* );
*
* @param array $array
*/
WPKirk\PureCSSTabs\PureCSSTabsProvider::tabs(
'tab-1' => [ 'label' => 'Tab 1', 'content' => 'Hello', 'selected' => true ],
'tab-2' => [ 'label' => 'Tab 1', 'content' => 'Hello' ],
...
);
```
Also, you can use `openTab()` and `closeTab()` methods:
```php copy
/**
* Display the open tab.
*
* @param string $label The label of tab.
* @param null $id Optional. ID of tab. If null, will sanitize_title() the label.
* @param bool $selected Optional. Default false. TRUE for checked.
*/
public static function openTab( $label, $id = null, $selected = false ) {}
```
```html copy
Hello, world! I'm the content of tab-1
Hello, world! I'm the content of tab-2
```
> 👆 Remember, in the example above I have used `WPKirk` base namespace. You should replace it with your own namespace.