Docs - Tabs
Connect tabs.css and pi.tab.js to use tabs
Tabs structure
Tabs navigations links should have anchor links to tab content blocks. Tab content blocks should have properly ids (appropriated to nagitaion anchor links).
Tab 1 content.
Tab 2 content.
Tab 3 content.
<ul class="pi-tabs-navigation"> <li class="pi-active"><a href="#tab1">Tab 1</a></li> <li><a href="#tab2">Tab 2</a></li> <li><a href="#tab3">Tab 3</a></li> </ul> <div class="pi-tabs-content"> <div class="pi-tab-pane pi-active" id="tab1"> <p>Tab 1 content.</p> </div> <div class="pi-tab-pane" id="tab2"> <p>Tab 2 content.</p> </div> <div class="pi-tab-pane" id="tab3"> <p>Tab 3 content.</p> </div> </div>
One width navigation items
Just add pi-tabs-navigation-justified class to navigation list and you will get the same width navigation links.
Tab 1 content.
Tab 2 content.
Tab 3 content.
<ul class="pi-tabs-navigation pi-tabs-navigation-justified"> <li class="pi-active"><a href="#tab1">Tab 1</a></li> <li><a href="#tab2">Tab 2</a></li> <li><a href="#tab3">Tab 3</a></li> </ul> <div class="pi-tabs-content"> <div class="pi-tab-pane pi-active" id="tab21"> <p>Tab 1 content.</p> </div> <div class="pi-tab-pane" id="tab22"> <p>Tab 2 content.</p> </div> <div class="pi-tab-pane" id="tab23"> <p>Tab 3 content.</p> </div> </div>
Big navigation items
Just add pi-tabs-navigation-big class to navigation list and you will get big navigation links.
Tab 1 content.
Tab 2 content.
Tab 3 content.
<ul class="pi-tabs-navigation pi-tabs-navigation-big"> <li class="pi-active"><a href="#tab51">Tab 1</a></li> <li><a href="#tab52">Tab 2</a></li> <li><a href="#tab53">Tab 3</a></li> </ul> <div class="pi-tabs-content"> <div class="pi-tab-pane pi-active" id="tab51"> <p>Tab 1 content.</p> </div> <div class="pi-tab-pane" id="tab52"> <p>Tab 2 content.</p> </div> <div class="pi-tab-pane" id="tab53"> <p>Tab 3 content.</p> </div> </div>
Transparent content bg and no borders
Just add pi-tabs-content-transparent class to main tab content container list and you will get tab content with the same background (main section), and no borders on tabs content blocks.
Tab 1 content.
Tab 2 content.
Tab 3 content.
<ul class="pi-tabs-navigation"> <li class="pi-active"><a href="#tab31">Tab 1</a></li> <li><a href="#tab32">Tab 2</a></li> <li><a href="#tab33">Tab 3</a></li> </ul> <div class="pi-tabs-content pi-tabs-content-transparent"> <div class="pi-tab-pane pi-active" id="tab31"> <p>Tab 1 content.</p> </div> <div class="pi-tab-pane" id="tab32"> <p>Tab 2 content.</p> </div> <div class="pi-tab-pane" id="tab33"> <p>Tab 3 content.</p> </div> </div>
Vertical tabs layout
Wrap tab navigation and content with block that has pi-tabs-vertical class and you will get vertical tabs navigation layout
Tab 1 content.
Tab 2 content.
Tab 3 content.
<div class="pi-tabs-vertical"> <ul class="pi-tabs-navigation"> <li class="pi-active"><a href="#tab41">Tab 1</a></li> <li><a href="#tab42">Tab 2</a></li> <li><a href="#tab43">Tab 3</a></li> </ul> <div class="pi-tabs-content"> <div class="pi-tab-pane pi-active" id="tab41"> <p>Tab 1 content.</p> </div> <div class="pi-tab-pane" id="tab42"> <p>Tab 2 content.</p> </div> <div class="pi-tab-pane" id="tab43"> <p>Tab 3 content.</p> </div> </div> </div>
Responsive tabs layout
Just add pi-responsive-XX class to tabs navigation block and you will get multi rows tabs navigation in appropriated breakpoint. So XX could be lg, md, sm, xs, 2xs, 3xs. It means that tabs navigation will change it's layout to multi rows in breakpoints starting and less then was specified.
Tab 1 content.
Tab 2 content.
Tab 3 content.
<ul class="pi-tabs-navigation pi-responsive-md"> <li class="pi-active"><a href="#tab61">Tab 1</a></li> <li><a href="#tab62">Tab 2</a></li> <li><a href="#tab63">Tab 3</a></li> </ul> <div class="pi-tabs-content"> <div class="pi-tab-pane pi-active" id="tab61"> <p>Tab 1 content.</p> </div> <div class="pi-tab-pane" id="tab62"> <p>Tab 2 content.</p> </div> <div class="pi-tab-pane" id="tab63"> <p>Tab 3 content.</p> </div> </div>
