ons-tab

Represents a tab inside tab bar. Each <ons-tab> represents a page.

Tutorial

The Tabbar

In Onsen UI tab navigation is enabled using the <ons-tabbar> element.

Tabs are added using <ons-tab> which is a child of <ons-tabbar>:

<ons-tabbar>
  <ons-tab label="Tab 1" active></ons-tab>
  <ons-tab label="Tab 2"></ons-tab>
</ons-tabbar>

The active attribute is used to define the tab which should be open by default. If this attribute is not provided, the first page will be activated by default.

The tab element

A tab accepts multiple attriutes to change its style and behavior, i.e. page, label or icon.

Alternatively, the content can be directly provided as ons-tab children:

<ons-tab page="...">
  <input type="radio" style="display: none">
  <button class="tabbar__button">
    <div class="tabbar__icon">
      <ons-icon icon="my-icon"></ons-icon>
    </div>
    <div class="tabbar__label">My Label</div>
    <div class="tabbar__badge notification">99</div>
  </button>
</ons-tab>

Every tab has, by default, the same width. 50% with two tabs, 25% with four tabs and so on. To allow tabs grow depending on their content (i.e. shorter/ longer labels), use the autogrow modifier. Optionally, max-width CSS property can be specified to set the width of the tab (for each tab).

Adding pages

Binding pages to the tabs works very similar to the <ons-navigator>.

The content of the pages is defined using a <template> element:

<template id="tab1.html">
  <ons-page>
    ...
  </ons-page>
</template>

and in order to bind a template to a specific tab the page attribute is used on the <ons-tab> element:

<ons-tab
  label="Tab 1"
  page="tab1.html">
</ons-tab>

Swipes and Animations

By default, the tab bar will slide from one page to another on tab click. Use animation="none" attribute to have an instant change.

swipeable attribute can be used to enable this functionality. It can be toggled to allow or prevent swipes at different moments of the app.

These attributes can be combined to have a tab bar with instant changes that can also be swiped:

<ons-tabbar swipeable animation="none">...</ons-tabbar>

For iOS, tab-border attribute can be included to show a tab border that updates position during swipe (this is always default on Android).

See also

Attributes are added directly to the element. You can do this in HTML or JS.

HTML: <ons-tab someAttribute="true" anotherAttribute><ons-tab>
JS: document.querySelector('ons-tab').setAttribute('someAttribute', 'true')

Name Type Description
page String The page that is displayed when the tab is tapped. Optional. Works only during initialization.
icon String The icon name for the tab. Can specify the same icon name as <ons-icon>. Check See also section for more information. Optional.
active-icon String The name of the icon when the tab is active. Optional.
label String The label of the tab item. Optional.
badge String Display a notification badge on top of the tab. Optional.
active This attribute should be set to the tab that is active by default. Optional.

Need Help?

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.