PHPackages                             wpbones/pure-css-tabs - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. wpbones/pure-css-tabs

ActiveLibrary[Utility & Helpers](/categories/utility)

wpbones/pure-css-tabs
=====================

Pure CSS tabs for WP Bones

1.1.0(1y ago)0813MITLess

Since Nov 10Pushed 1y ago1 watchersCompare

[ Source](https://github.com/wpbones/pure-css-tabs)[ Packagist](https://packagist.org/packages/wpbones/pure-css-tabs)[ Docs](https://github.com/wpbones/pure-css-tabs)[ RSS](/packages/wpbones-pure-css-tabs/feed)WikiDiscussions main Synced today

READMEChangelogDependenciesVersions (9)Used By (0)

Pure CSS Tabs for WP Bones
==========================

[](#pure-css-tabs-for-wp-bones)

[![Latest Stable Version](https://camo.githubusercontent.com/9df68654fec1778373d3956cf859829b27ae646e9081e832638f23ed1469c53d/68747470733a2f2f706f7365722e707567782e6f72672f7770626f6e65732f707572652d6373732d746162732f762f737461626c653f7374796c653d666f722d7468652d6261646765)](https://packagist.org/packages/wpbones/pure-css-tabs) [![Latest Unstable Version](https://camo.githubusercontent.com/9605ba1ce61214b0e75477d77965347926fca0170b9cb088e6368ef0a1e19420/68747470733a2f2f706f7365722e707567782e6f72672f7770626f6e65732f707572652d6373732d746162732f762f756e737461626c653f7374796c653d666f722d7468652d6261646765)](https://packagist.org/packages/wpbones/pure-css-tabs) [![Total Downloads](https://camo.githubusercontent.com/a4d794ee95c4e21d169599410a95925c65570b18fc110ca874aea3532af84f0d/68747470733a2f2f706f7365722e707567782e6f72672f7770626f6e65732f707572652d6373732d746162732f646f776e6c6f6164733f7374796c653d666f722d7468652d6261646765)](https://packagist.org/packages/wpbones/pure-css-tabs) [![License](https://camo.githubusercontent.com/83cc7f434c5cdc0a07cddac68408ab49fed05dd9a2544d90f899631cdbd4124f/68747470733a2f2f706f7365722e707567782e6f72672f7770626f6e65732f707572652d6373732d746162732f6c6963656e73653f7374796c653d666f722d7468652d6261646765)](https://packagist.org/packages/wpbones/pure-css-tabs) [![Monthly Downloads](https://camo.githubusercontent.com/57bbcd24152d1dbaa61a62aff0e4be40c302ec5bf83d71e10e181ed137203991/68747470733a2f2f706f7365722e707567782e6f72672f7770626f6e65732f707572652d6373732d746162732f642f6d6f6e74686c793f7374796c653d666f722d7468652d6261646765)](https://packagist.org/packages/wpbones/pure-css-tabs)

This package provides a simple way to create tabs with pure CSS for WordPress/WP Bones.

[![Pure CSS Tabs for WP Bones](https://private-user-images.githubusercontent.com/432181/369302800-e8143a4c-8694-420b-b281-c0fb0d080f5a.png?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3ODI3OTg2MzAsIm5iZiI6MTc4Mjc5ODMzMCwicGF0aCI6Ii80MzIxODEvMzY5MzAyODAwLWU4MTQzYTRjLTg2OTQtNDIwYi1iMjgxLWMwZmIwZDA4MGY1YS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjYwNjMwJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI2MDYzMFQwNTQ1MzBaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT0wNzlmMGJjNjUwMTMzZGEwZTYyNGY4NGFlYTYzMTE1ZmQ3MmQ4ZWFlYzllYmEwMTZmZjY3NGM0MjNiM2Y4YzVhJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZyZXNwb25zZS1jb250ZW50LXR5cGU9aW1hZ2UlMkZwbmcifQ.hyuQOR5uyBOAYYGJkXv8XxqpSPTUITiihr7XwhtK4aE)](https://private-user-images.githubusercontent.com/432181/369302800-e8143a4c-8694-420b-b281-c0fb0d080f5a.png?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3ODI3OTg2MzAsIm5iZiI6MTc4Mjc5ODMzMCwicGF0aCI6Ii80MzIxODEvMzY5MzAyODAwLWU4MTQzYTRjLTg2OTQtNDIwYi1iMjgxLWMwZmIwZDA4MGY1YS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjYwNjMwJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI2MDYzMFQwNTQ1MzBaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT0wNzlmMGJjNjUwMTMzZGEwZTYyNGY4NGFlYTYzMTE1ZmQ3MmQ4ZWFlYzllYmEwMTZmZjY3NGM0MjNiM2Y4YzVhJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZyZXNwb25zZS1jb250ZW50LXR5cGU9aW1hZ2UlMkZwbmcifQ.hyuQOR5uyBOAYYGJkXv8XxqpSPTUITiihr7XwhtK4aE)

Requirements
------------

[](#requirements)

This package works with a WordPress plugin written with [WP Bones framework library](https://github.com/wpbones/WPBones).

Installation
------------

[](#installation)

You can install third party packages by using:

```
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:

```
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:

```
  "require": {
    "php": ">=7.4",
    "wpbones/wpbones": "~1.9",
    "wpbones/pure-css-tabs": "~1.1"
  },
```

and run

```
composer install
```

Enqueue for Controller
----------------------

[](#enqueue-for-controller)

You can use the provider to enqueue the styles.

```
public function index()
{
  // enqueue the minified version
  PureCSSTabsProvider::enqueueStyles();

  // ...

}
```

PureCSSTabsProvider
-------------------

[](#purecsstabsprovider)

This is a static class autoloaded by composer. You can use it to enqueue or get the styles path:

```
// 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-markup)

```

    Content

    Content

```

Of course, you may use the **fragment** feature to include the single tabs:

```

  view( 'folder.tab1' ) ?>

  view( 'folder.tab2' ) ?>

```

In `/folder/tab1.php` you just insert the following markup:

```

 Content

```

Customize
---------

[](#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.

```
@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
------

[](#helper)

In addition, you can use some methods provided by `PureCSSTabsProvider` class. In your HTML view you might use:

```
    /**
     * 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:

```
  /**
   * 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 ) {}
```

```

    Hello, world! I'm the content of tab-1

    Hello, world! I'm the content of tab-2

```

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

```

    Content for Settings