wpbones/pure-css-tabs

Pure CSS tabs for WP Bones

Pure CSS Tabs for WP Bones

This package provides a simple way to create tabs with pure CSS for WordPress/WP Bones., _(*1)

, _(*2)

## Requirements, _(*3)

This package works with a WordPress plugin written with WP Bones framework library., _(*4)

Installation

You can install third party packages by using:, _(*5)

```sh copy php bones require wpbones/pure-css-tabs, <sub>(*6)</sub>

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:, <sub>(*7)</sub>

```json copy filename="composer.json" {4} "require": { "php": ">=7.4", "wpbones/wpbones": "~1.9", "wpbones/pure-css-tabs": "~1.1" },, <sub>(*8)</sub>

and run

```sh copy
composer install

Enqueue for Controller

You can use the provider to enqueue the styles., <sub>(*9)</sub>

```php copy public function index() { // enqueue the minified version PureCSSTabsProvider::enqueueStyles();, <sub>(*10)</sub>

// ..., <sub>(*11)</sub>

}, <sub>(*12)</sub>

## 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 , <sub>(*13)</sub>

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:, <sub>(*14)</sub>

```html copy , <sub>(*15)</sub>

## 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., <sub>(*16)</sub>

Helper

In addition, you can use some methods provided by PureCSSTabsProvider class. In your HTML view you might use:, <sub>(*17)</sub>

```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' ], ... );, <sub>(*18)</sub>

Also, you can use `openTab()` and `closeTab()` methods:

```php copy
  /**
   * Display the open tab.
   *
   * @param string|array  $label    The label of tab or un array with [label, group]
   * @param null          $id       Optional. ID of tab. If null, will sanitize_title() the label.
   * @param bool          $selected Optional. Default false. TRUE for checked.
   * @param string        $group    Optional. Group of tabs when you want to handle multiple tab in the same view. Default 'tabs'

   */
   public static function openTab( $label, $id = null, $selected = false ) {}

```html copy, <sub>(*19)</sub>

You may also use the hook approach by using `::useTabs()`

```php copy






  
  

  

    
Content for Settings
  

  

  
  

  

    
Content for Dashboard
  

  

  

👆 Remember, in the example above I have used WPKirk base namespace. You should replace it with your own namespace., <sub>(*20)</sub>