View Source Improve this doc

ons-tab

Represents a tab inside tabbar. Each ons-tab represents a page.

Usage # 

<ons-tabbar>
  <ons-tab page="home.html" active="true">
    <ons-icon icon="ion-home"></ons-icon>
    <span style="font-size: 14px">Home</span>
  </ons-tab>
  <ons-tab page="fav.html" active="true">
    <ons-icon icon="ion-star"></ons-icon>
    <span style="font-size: 14px">Favorites</span>
  </ons-tab>
  <ons-tab page="settings.html" active="true">
    <ons-icon icon="ion-gear-a"></ons-icon>
    <span style="font-size: 14px">Settings</span>
  </ons-tab>
</ons-tabbar>

<ons-template id="home.html">
  ...
</ons-template>

<ons-template id="fav.html">
  ...
</ons-template>

<ons-template id="settings.html">
  ...
</ons-template>

Live Example #

See the Pen Alert, confirm and prompt dialogs by Onsen & Monaca (@onsen) on CodePen.

Open in New Window

See also #

Attributes #

Name Type
Default Value		 Description
page String The page that this <ons-tab> points to. Optional
icon String The icon name for the tab. Can specify the same icon name as <ons-icon>. If you need to use your own icon, create a css class with background-image or any css properties and specify the name of your css class here. Optional
active-icon String The name of the icon when the tab is active. Optional
label String The label of the tab item. Optional
active Boolean
false 		Set whether this item should be active or not. Valid values are true and false. Optional
no-reload Set if the page shouldn't be reloaded when clicking on the same tab twice. Optional
persistent Set to make the tab content persistent. If this attribute it set the DOM will not be destroyed when navigating to another tab. Optional

Discussion #