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.
The plugin offers these enhanced features:
- Supports various tab opening directions:
- Allows you to box the tab content in a new
borderedstyle. This can work with any of the tab directions above.
- Allows you to align the entire tab content to the
rightof the parent container/page.
- Automatically align & format heights and widths for bordered tabs for
- Allows a rotated
sidewaystab header orientation for the
- Auto detect overflowing header labels for
sidewaysorientation (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.
You can see detailed documentation and demonstration on usage of the extension.
The preferred way to install this extension is through composer.
Note: You must set the
devin the composer.json file in your application root folder before installation of this extension.
$ php composer.phar require kartik-v/yii2-tabs-x "*"
require section of your
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 any issues on the project page
- Use the forum page for any discussions on this extension
yii2-tabs-x is released under the BSD 3-Clause License. See the bundled
LICENSE.md for details.
All your extensions have 20 votes average... not bad, and very weird.
thanks Antonio for your feedback
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.
How is this plugin different from the basic one? without the x, just Tabs??
If you have any questions, please ask in the forum instead.
Signup or Login in order to comment.