
Material Tabs
Metro 4 has at its disposal classes and a plugin for creating an tabbed interface in material design style.
About
Designed for using with PhoneGap
Material tab component designed for using with PhoneGap
framework and based on Google Material design guide.
Since specific style rules for Chrome are used, the use in other browsers is not recommended.
To create material tabs, add attribute data-role="materialtabs"
to your list element.
Each item must be defined as <li><a href="#target_id">tab_caption</a></li>
.
For link tab
to content container, use anchor
attribute href
.
<ul class="app-bar-present pos-absolute" data-role="materialtabs">
<li><a href="#games">Games</a></li>
<li><a href="#applications">Applications</a></li>
<li class="active"><a href="#music">Music</a></li>
<li><a href="#films">Films</a></li>
<li><a href="#press">Press</a></li>
<li><a href="#books">Books</a></li>
</ul>
<div style="margin-top: 112px">
<div id="games">Games</div>
<div id="applications">Applications</div>
<div id="music">Music</div>
<div id="films">Films</div>
<div id="press">Press</div>
<div id="books">Books</div>
</div>
Fixed tabs
You cna use attribute data-fixed-tabs="true"
to set fixed tabs layout.
In this layout, all tab have equal width, and tabs container no have overflow.
<ul class="app-bar-present pos-absolute"
data-role="materialtabs" data-fixed-tabs="true">
<li><a href="#">Music</a></li>
<li><a href="#">Films</a></li>
<li><a href="#">Books</a></li>
</ul>
Deep option
With attribute data-deep="true"
, you can put tabs deep on head-bar
.
<ul class="app-bar-present pos-absolute"
data-role="materialtabs" data-fixed-tabs="true" data-deep="true">
<li><a href="#">Music</a></li>
<li><a href="#">Films</a></li>
<li><a href="#">Books</a></li>
</ul>
Options
You can use any options to change component behavior.
Option | Data-* | Default | Desc |
---|---|---|---|
deep |
data-deep |
false | For using with head-bar . Put tabs deep on head-bar |
fixedTabs |
data-fixed-tabs |
false | If true, tabs have width 100% and no overflow, all tabs have equal width |
clsComponent |
data-cls-component |
Additional classes for tabs | |
clsTab |
data-cls-tab |
Additional classes for each tab | |
clsTabActive |
data-cls-tab-active |
Additional classes for active tab | |
clsMarker |
data-cls-marker |
Additional classes active tab marker |
Events
You can define callbacks for events:
Events | Data-* | Desc |
---|---|---|
onBeforeTabOpen(tab, target, tab_next) |
data-on-before-tab-open |
This event occurs before the tab is opened if this function return false, tab is not open |
onTab(tab, target, tab_next) |
data-on-tab |
This event occurs when the tab is opened |
onTabsCreate(tab, elem) |
data-on-tabs-create |
This event occurs when the tabs is created |
Customize
You can change tabs style with attributes data-cls-*
.
<div class="head-bar pos-absolute bg-darkRed fg-white">
<button class="expand-button light"><span></span></button>
<span class="app-title">Metro 4</span>
</div>
<ul class="app-bar-present pos-absolute"
data-role="materialtabs"
data-fixed-tabs="true"
data-deep="true"
data-cls-tab="bg-red fg-white text-light"
data-cls-tab-active="text-bold fg-yellow"
data-cls-marker="bg-orange"
>
<li><a href="#">Music</a></li>
<li><a href="#">Films</a></li>
<li><a href="#">Books</a></li>
</ul>