Angular directive for <ons-tabbar> component.
A component to display a tab bar on the bottom of a page. Used with <ons-tab> to manage pages using tabs.
| Name | Type | Description |
|---|---|---|
| animation |
String
none |
If this attribute is set to "none" the transitions will not be animated.
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 (bottom for iOS flat design, top for Material Design).
Optional.
Works only during initialization.
|
| swipeable | If this attribute is set the tab bar can be scrolled by drag or swipe. Optional. | |
| ignore-edge-width |
Number
20 |
Distance in pixels from both edges. Swiping on these areas will prioritize parent components such as ons-splitter or ons-navigator.
Optional.
|
| active-index |
Number
0 |
The index of the tab that is currently active. Optional. |
| hide-tabs | Whether to hide the tabs. Optional. | |
| tab-border | 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. | |
| modifier | String | The appearance of the tabbar. Optional. |
| Name | Description |
|---|---|
| animationOptions |
Specify the animation’s duration, timing and delay with an object literal. E.g. {duration: 0.2, delay: 1, timing: 'ease-in'}.
|
| activeIndex | The index of the tab that is currently active. |
| hideTabs | Whether to hide the tabs. |
| tabBorder | If this property is set the tabs show a dynamic bottom border. Only works for iOS flat design since the border is always visible in Material Design. |
| visible | Whether the tabbar is visible or not. |
| swipeable | Enable swipe interaction. |
| onSwipe | Hook called whenever the user slides the tabbar. It gets a decimal index and an animationOptions object as arguments. |
| 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. |
| Signature | Description |
|---|---|
| setActiveTab(index, [options]) | Show specified tab page. Animations and their 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. |
Show specified tab page. Animations and their options can be specified by the second parameter.
Returns: A promise that resolves to the new page element.
| Name | Type | Description |
|---|---|---|
| index | Number | Tab index. |
| options | Object | Parameter object. |
| options.callback | Function | Function that runs when the new page has loaded. |
| options.animation | String | If this option is “none”, the transition won’t slide. |
| options.animationOptions | String |
Specify the animation’s duration, delay and timing. E.g. {duration: 0.2, delay: 0.4, timing: 'ease-in'}.
|
Used to hide or show the tab bar.
| Name | Type | Description |
|---|---|---|
| visible | Boolean |
Returns tab index on current active tab. If active tab is not found, returns -1.
Returns: The index of the currently active tab.
| Name | Type | Description |
|---|---|---|
| page | Specify the page component that is displayed when the tab is active. |
| Name | Type | Description |
|---|---|---|
| swipe | Triggers when the tabbar is swiped. |
If you have any questions, use our Community Forum or talk to us on Discord 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.