ons-tabbar

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

Tutorial

See also

Attributes

Name Type Default Value Description
animation String
none
Animation name. Available values are "none", "slide" and "fade". Default is "none". Optional.
animation-options Expression Specify the animation’s duration, timing and delay with an object literal. E.g. {duration: 0.2, delay: 1, timing: 'ease-in'}. Optional.
position String
bottom
Tabbar’s position. Available values are "bottom" and "top". Use "auto" to choose position depending on platform (iOS bottom, Android top). Optional. Works only during initialization.

Properties

Name Description
visible Whether the tabbar is visible or not.

Methods Summary

Signature Description
loadPage(url, [options]) Displays a new page without changing the active index.
Deprecated
setActiveTab(index, [options]) Show specified tab page. Animations and other options can be specified by the second parameter.
setTabbarVisibility(visible) Used to hide or show the tab bar.
getActiveTabIndex() Returns tab index on current active tab. If active tab is not found, returns -1.

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

loadPage(url, [options]): Promise

Displays a new page without changing the active index.

Deprecated

Returns: Resolves to the new page element.

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

setActiveTab(index, [options]): Promise

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

Returns: Resolves to the new page element.

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", "slide" and "none".
options.animationOptions String Specify the animation’s duration, delay and timing. E.g. {duration: 0.2, delay: 0.4, timing: 'ease-in'}.

setTabbarVisibility(visible)

Used to hide or show the tab bar.

Parameters
Name Type Description
visible Boolean

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.

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

Need Help?

If you have any questions, use our Community Forum or talk to us via Gitter chat. The Onsen UI team and your peers in the community will work together to help solve your issues.

For bug reports and feature requests use our GitHub Issues page.