Striped Style Tabs
Add tabs-striped
to an element above the tabs
classname for Android style tabs.
Optionally, also add tabs-top
to position the tab at the top
Get granular color control for striped tabs with the tabs-background-{color}
and tabs-color-{color}
classes, where {color}
is any of the ionic color swatches: default
, light
, stable
, positive
, calm
, balanced
, energized
, assertive
, royal
, or dark
Note, that to have the header blend with the top tabs, add the has-tabs-top
class to the header.
<divclass="tabs-striped tabs-top tabs-background-positive tabs-color-light"><divclass="tabs"><aclass="tab-item active"href="#"><iclass="icon ion-home"></i>
Test
</a><aclass="tab-item"href="#"><iclass="icon ion-star"></i>
Favorites
</a><aclass="tab-item"href="#"><iclass="icon ion-gear-a"></i>
Settings
</a></div></div><divclass="tabs-striped tabs-color-assertive"><divclass="tabs"><aclass="tab-item active"href="#"><iclass="icon ion-home"></i>
Test
</a><aclass="tab-item"href="#"><iclass="icon ion-star"></i>
Favorites
</a><aclass="tab-item"href="#"><iclass="icon ion-gear-a"></i>
Settings
</a></div></div>