v-ons-tabbar

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

Tutorial

See also

Props

Name Type Default Value Description
hide-tabs Boolean Whether to hide the tabs. Optional.
ignore-edge-width Number Distance in pixels from both edges. Swiping on these areas will prioritize parent components such as ons-splitter or ons-navigator. Optional.
index Number If exists, specifies the current active index. It is also used as the initial index. Must be modified on update:index event. Optional.
modifier String The appearance of the tabbar. Optional.
on-swipe Function Hook called whenever the user slides the tabbar. It gets a decimal index and an animationOptions object as arguments. Optional.
options.animation String If this attribute is set to "none" the transitions will not be animated. Optional.
options.animationOptions 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 Tabbar’s position. Available values are "bottom" and "top". Use "auto" to choose position depending on platform (bottom for iOS flat design, top for Material Design). Optional.
swipeable Boolean If this attribute is set the tab bar can be scrolled by drag or swipe. Optional.
tab-border Boolean If this attribute is set the tabs show a dynamic bottom border. Only works for iOS flat design since the border is always visible in Material Design. Optional.
tabbar-style Boolean Optional style for the actual tabbar component. Accepts any Vue valid style. Optional.
tabs Array Contains as many objects as desired tabs in the tabbar. Every object describes a VOnsTab component. Every object must include at least one of the next properties: page, icon or label (see VOnsTab reference for more options). It is also possible to pass props to the pages through a props object for each tab. Example: tabs: [ { label: 'p1', page: p1 }, { label: 'p2', page: p2, props: { myPage2Prop: 'something' } } ]. This can be omitted if using slot="pages" and slot="tabs" components. Optional.

Preset Modifiers

Name Description
material A tabbar in Material Design.
autogrow Tabs automatically grow depending on their content instead of having a fixed width.
top-border Shows a static border-bottom in tabs for iOS top tabbars.

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.
update:index Fired right after user interaction. Useful to update index prop.

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.

update:index

Fired right after user interaction. Useful to update index prop.

Parameters
Name Type Description
event Number New value for index prop.

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.