View Source Improve this doc

ons-tabbar

A component to display a tab bar on the bottom of a page. Used with ons-tab to manage pages using tabs.

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
var String Variable name to refer this tab bar. Optional
hide-tabs Boolean
false 		Whether to hide the tabs. Valid values are true/false. Optional
animation String
none 		Animation name. Preset values are "none" and "fade". Default is "none". Optional
position String
bottom 		Tabbar's position. Preset values are "bottom" and "top". Default is "bottom". Optional
ons-reactive Expression Allows you to specify custom behavior when the "reactive" event is fired. Optional
ons-prechange Expression Allows you to specify custom behavior when the "prechange" event is fired. Optional
ons-postchange Expression Allows you to specify custom behavior when the "postchange" event is fired. Optional
ons-destroy Expression Allows you to specify custom behavior when the "destroy" event is fired. Optional

Methods Summary #

Signature Description
setActiveTab(index, [options]) Show specified tab page. Animations and other options can be specified by the second parameter.
getActiveTabIndex() Returns tab index on current active tab. If active tab is not found, returns -1.
loadPage(url) Displays a new page without changing the active index.
on(eventName, listener) Add an event listener.
once(eventName, listener) Add an event listener that's only triggered once.
off(eventName, [listener]) Remove an event listener. If the listener is not specified all listeners for the event type will be removed.

Events Summary #

Name Description
prechange Fires just before the tab is changed.
postchange Fires just after the tab is changed.
reactive Fires if the already open tab is tapped again.

Methods

setActiveTab(index, [options]): Boolean #

Show specified tab page. Animations and other options can be specified by the second parameter.

Returns: true if the change was successful.

Parameters
Name Type Description
index Number Tab index.
options Object Parameter object.
options.keepPage Boolean If true the page will not be changed.
options.animation String Animation name. Available animations are "fade" and "none".

getActiveTabIndex(): Number #

Returns tab index on current active tab. If active tab is not found, returns -1.

Returns: The index of the currently active tab.

loadPage(url) #

Displays a new page without changing the active index.

Parameters
Name Type Description
url String Page URL. Can be either an HTML document or an <ons-template>.

on(eventName, listener) #

Add an event listener.

Parameters
Name Type Description
eventName String Name of the event.
listener Function Function to execute when the event is triggered.

once(eventName, listener) #

Add an event listener that's only triggered once.

Parameters
Name Type Description
eventName String Name of the event.
listener Function Function to execute when the event is triggered.

off(eventName, [listener]) #

Remove an event listener. If the listener is not specified all listeners for the event type will be removed.

Parameters
Name Type Description
eventName String Name of the event.
listener Function Function to execute when the event is triggered.

Events

prechange #

Fires just before the tab is changed.

Parameters
Name Type Description
event Object Event object.
event.index Number Current index.
event.tabItem Object Tab item object.
event.cancel Function Call this function to cancel the change event.

postchange #

Fires just after the tab is changed.

Parameters
Name Type Description
event Object Event object.
event.index Number Current index.
event.tabItem Object Tab item object.

reactive #

Fires if the already open tab is tapped again.

Parameters
Name Type Description
event Object Event object.
event.index Number Current index.
event.tabItem Object Tab item object.

Discussion #