ons-tab

タブバーに配置される各アイテムのコンポーネントです。それぞれのons-tabはページを表します。 ons-tab要素の中には、タブに表示されるコンテンツを直接記述することが出来ます。

実例

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 <ons-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 the <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).

関連情報

名前 型 / デフォルト値 概要
page String ons-tabが参照するページへのURLを指定します。 Optional. 初期化時のみ有効
icon String

アイコン名を指定します。ons-iconと同じアイコン名を指定できます。 個別にアイコンをカスタマイズする場合は、background-imageなどのCSSスタイルを用いて指定できます。

Optional.
active-icon String アクティブの際のアイコン名を指定します。 Optional.
label String アイコン下に表示されるラベルを指定します。 Optional.
badge String バッジに表示する内容を指定します。 Optional.
active This attribute should be set to the tab that is active by default. (翻訳中) Optional.

お困りですか?

Onsen UIに関する質問は、Stack Overflowにてonsen-uiタグを付与してください。Onsen UIチームはあなたの問題解決をお手伝いします。

バグ報告や機能要望については、GitHub Issuesに記載をお願いいたします。

あわせて、下記の情報も参考にしてください。