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 Tabs plugin. The extension supports both Bootstrap 3.x and 4.x library versions.
It also 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, andleft. - 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
left(default),center, orrightof the parent container/page. - Automatically align & format heights and widths for bordered tabs for
rightandleftpositions. - Allows a rotated
sidewaystab header orientation for therightandlefttab directions. - Auto detect overflowing header labels for
sidewaysorientation (with ellipsis styling) and display full label as a title on hover.
Demo
You can see detailed documentation and examples on usage of the extension.
Installation
The preferred way to install this extension is through composer.
NOTE: Check the composer.json for this extension's requirements and dependencies. Read this web tip /wiki on setting the
minimum-stabilitysettings for your application's composer.json.
Either run
$ php composer.phar require kartik-v/yii2-tabs-x "@dev"
or add
"kartik-v/yii2-tabs-x": "@dev"
to the require section of your composer.json file.
Usage
TabsX
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...',
],
],
],
],
]);
Sticky Tabs
You can provides pushState (back and forward button support) to Bootstrap tabs. You can enable or disable sticky tabs behaviour by setting enableStickyTabs property. This will use the jquery.stickytabs plugin to enable the sticky tabs push state behavior. If you want to change the sticky tabs plugin settings you can set the stickyTabsOptions property.
echo TabsX::widget([
'enableStickyTabs' => true,
'stickyTabsOptions' => [
'selectorAttribute' => 'data-target',
'backToTop' => true,
],
'items' => [
// ... items here
]
]);
License
yii2-tabs-x is released under the BSD-3-Clause License. See the bundled LICENSE.md for details.