Yii 2.0: yii2-tabs-x

Extended bootstrap tabbed navigation widget for Yii 2.0 with various alignment and styling options.
37 followers

An extended tabs widget for Yii Framework 2 based on the bootstrap-tabs-x jQuery plugin by Krajee. This plugin includes various CSS3 styling enhancements and various tweaks to the core Bootstrap 3 Tabs plugin. It helps you align tabs in multiple ways, add borders, achieve rotated/sideways titles, load tab content via ajax, and more.

Features

The plugin offers these enhanced features:

  • Supports various tab opening directions: above (default), below, right, and left.
  • Allows you to box the tab content in a new bordered style. This can work with any of the tab directions above.
  • Allows you to align the entire tab content to the left (default), center, or right of the parent container/page.
  • Automatically align & format heights and widths for bordered tabs for right and left positions.
  • Allows a rotated sideways tab header orientation for the right and left tab directions.
  • Auto detect overflowing header labels for sideways orientation (with ellipsis styling) and display full label as a title on hover.
  • Ability to load tab content via ajax call.

Note: This extension depends on the kartik-v/yii2-widgets extension which in turn depends on the yiisoft/yii2-bootstrap extension. Check the composer.json for this extension's requirements and dependencies. Note: Yii 2 framework is still in active development, and until a fully stable Yii2 release, your core yii2-bootstrap packages (and its dependencies) may be updated when you install or update this extension. You may need to lock your composer package versions for your specific app, and test for extension break if you do not wish to auto update dependencies.

Demo

You can see detailed documentation and demonstration on usage of the extension.

Installation

The preferred way to install this extension is through composer.

Note: You must set the minimum-stability to dev in the composer.json file in your application root folder before installation of this extension.

Either run:

$ php composer.phar require kartik-v/yii2-tabs-x "*"

or add:

"kartik-v/yii2-tabs-x": "*"

to the require section of your composer.json file.

Usage

use kartik\tabs\TabsX;
 
echo TabsX::widget([
    'position' => TabsX::POS_ABOVE,
    'align' => TabsX::ALIGN_LEFT,
    'items' => [
        [
            'label' => 'One',
            'content' => 'Anim pariatur cliche...',
            'active' => true
        ],
        [
            'label' => 'Two',
            'content' => 'Anim pariatur cliche...',
            'headerOptions' => ['style'=>'font-weight:bold'],
            'options' => ['id' => 'myveryownID'],
        ],
        [
            'label' => 'Dropdown',
            'items' => [
                 [
                     'label' => 'DropdownA',
                     'content' => 'DropdownA, Anim pariatur cliche...',
                 ],
                 [
                     'label' => 'DropdownB',
                     'content' => 'DropdownB, Anim pariatur cliche...',
                 ],
            ],
        ],
    ],
]);

Report

License

yii2-tabs-x is released under the BSD 3-Clause License. See the bundled LICENSE.md for details.

Resources

Total 3 comments

#18140 report it
Kartik V at 2014/09/15 04:55pm
Ajax powered tabs

With release v1.1.0 of the plugin - the extension now supports ability to load tab content via ajax and configure the loading progress CSS class if needed.

#18045 report it
Kartik V at 2014/09/01 11:57pm
Re: wow

thanks Antonio for your feedback

#18043 report it
Antonio Ramirez at 2014/09/01 12:20pm
wow

All your extensions have 20 votes average... not bad, and very weird.

Leave a comment

Please to leave your comment.

Create extension
Downloads
No downloadable files yet