ons-tabbar

タブバーをページ下部に表示するためのコンポーネントです。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).

関連情報

名前 型 / デフォルト値 概要
animation String
none
If this attribute is set to "none" the transitions will not be animated. (翻訳中) Optional.
animation-options Expression アニメーション時のduration, timing, delayをオブジェクトリテラルで指定します。e.g. {duration: 0.2, delay: 1, timing: ‘ease-in’} Optional.
position String
bottom
タブバーの位置を指定します。”bottom”もしくは”top”を選択できます。デフォルトは”bottom”です。 Optional. 初期化時のみ有効
swipeable この属性がある時、タブバーをスワイプやドラッグで移動できるようになります。 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 タブを非表示にする場合に指定します。 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 タブバーの表現を指定します。 Optional.
var String このタブバーを参照するための名前を指定します。 Optional. 初期化時のみ有効
ons-reactive Expression “reactive”イベントが発火された時の挙動を独自に指定できます。 Optional. 初期化時のみ有効
ons-prechange Expression “prechange”イベントが発火された時の挙動を独自に指定できます。 Optional. 初期化時のみ有効
ons-postchange Expression “postchange”イベントが発火された時の挙動を独自に指定できます。 Optional. 初期化時のみ有効
ons-init Expression ページの”init”イベントが発火された時の挙動を独自に指定できます。 Optional. 初期化時のみ有効
ons-show Expression ページの”show”イベントが発火された時の挙動を独自に指定できます。 Optional. 初期化時のみ有効
ons-hide Expression ページの”hide”イベントが発火された時の挙動を独自に指定できます。 Optional. 初期化時のみ有効
ons-destroy Expression ページの”destroy”イベントが発火された時の挙動を独自に指定できます。 Optional. 初期化時のみ有効
名前 概要
animationOptions アニメーション時のduration, timing, delayをオブジェクトリテラルで指定します。e.g. {duration: 0.2, delay: 1, timing: ‘ease-in’}
activeIndex The index of the tab that is currently active. (翻訳中)
hideTabs タブを非表示にする場合に指定します。
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 タブバーが見える場合にtrue
swipeable swipeableであればtrueを返します。
onSwipe Hook called whenever the user slides the tabbar. It gets a decimal index and an animationOptions object as arguments. (翻訳中)
Name 概要
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. (翻訳中)
シグネチャ 概要
setActiveTab(index, [options]) 指定したインデックスのタブを表示します。アニメーションなどのオプションを指定できます。
setTabbarVisibility(visible) Used to hide or show the tab bar. (翻訳中)
getActiveTabIndex() 現在アクティブになっているタブのインデックスを返します。現在アクティブなタブがない場合には-1を返します。
on(eventName, listener) イベントリスナーを追加します。
once(eventName, listener) 一度だけ呼び出されるイベントリスナーを追加します。
off(eventName, [listener]) イベントリスナーを削除します。もしイベントリスナーを指定しなかった場合には、そのイベントに紐づく全てのイベントリスナーが削除されます。
setActiveTab(index, [options]): Promise

指定したインデックスのタブを表示します。アニメーションなどのオプションを指定できます。

返り値:

パラメーター
名前 概要
index Number タブのインデックスを指定します。
options 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 アニメーション時のduration, delay, timingを指定します。e.g. {duration: 0.2, delay: 0.4, timing: ‘ease-in’}
setTabbarVisibility(visible)

Used to hide or show the tab bar. (翻訳中)

パラメーター
名前 概要
visible Boolean
getActiveTabIndex(): Number

現在アクティブになっているタブのインデックスを返します。現在アクティブなタブがない場合には-1を返します。

返り値: 現在アクティブになっているタブのインデックスを返します。

on(eventName, listener)

イベントリスナーを追加します。

パラメーター
名前 概要
eventName String イベント名を指定します。
listener Function このイベントが発火された際に呼び出される関数オブジェクトを指定します。
once(eventName, listener)

一度だけ呼び出されるイベントリスナーを追加します。

パラメーター
名前 概要
eventName String イベント名を指定します。
listener Function イベントが発火した際に呼び出される関数オブジェクトを指定します。
off(eventName, [listener])

イベントリスナーを削除します。もしイベントリスナーを指定しなかった場合には、そのイベントに紐づく全てのイベントリスナーが削除されます。

パラメーター
名前 概要
eventName String イベント名を指定します。
listener Function 削除するイベントリスナーを指定します。
名前 概要
prechange アクティブなタブが変わる前に発火します。
postchange アクティブなタブが変わった後に発火します。
reactive すでにアクティブになっているタブがもう一度タップやクリックされた場合に発火します。
swipe Fires when the tabbar swipes. (翻訳中)
prechange

アクティブなタブが変わる前に発火します。

パラメーター
名前 概要
event Object イベントオブジェクト。
event.index Number 現在アクティブになっているons-tabのインデックスを返します。
event.tabItem Object tabItemオブジェクト。
event.cancel Function この関数を呼び出すと、アクティブなタブの変更がキャンセルされます。
postchange

アクティブなタブが変わった後に発火します。

パラメーター
名前 概要
event Object イベントオブジェクト。
event.index Number 現在アクティブになっているons-tabのインデックスを返します。
event.tabItem Object tabItemオブジェクト。
reactive

すでにアクティブになっているタブがもう一度タップやクリックされた場合に発火します。

パラメーター
名前 概要
event Object イベントオブジェクト。
event.index Number 現在アクティブになっているons-tabのインデックスを返します。
event.tabItem Object tabItemオブジェクト。
swipe

Fires when the tabbar swipes. (翻訳中)

パラメーター
名前 概要
event Object イベントオブジェクト。
event.index Number 現在アクティブになっているons-tabのインデックスを返します。
event.options Object Animation options object. (翻訳中)

お困りですか?

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

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

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