kartik-v / yii2-tabs-x
A supercharged Bootstrap tabs widget with ability to align tabs in multiple ways, add borders, rotated titles, and more.
Installs: 1 121 192
Dependents: 31
Suggesters: 0
Security: 0
Stars: 30
Watchers: 5
Forks: 17
Open Issues: 2
Type:yii2-extension
Requires
- kartik-v/bootstrap-tabs-x: ~1.3
- kartik-v/yii2-krajee-base: >=3.0.0
README
yii2-tabs-x
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 Bootstrap 5.x or 4.x or 3.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
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
, orright
of the parent container/page. - Automatically align & format heights and widths for bordered tabs for
right
andleft
positions. - Allows a rotated
sideways
tab header orientation for theright
andleft
tab directions. - Auto detect overflowing header labels for
sideways
orientation (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-stability
settings 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.