View Source Improve this doc

ons-tabbar

タブバーをページ下部に表示するためのコンポーネントです。ons-tabと組み合わせて使うことで、ページを管理できます。

使い方 # 

<ons-tabbar>
  <ons-tab page="home.html" active="true">
    <ons-icon icon="ion-home"></ons-icon>
    <span style="font-size: 14px">Home</span>
  </ons-tab>
  <ons-tab page="fav.html" active="true">
    <ons-icon icon="ion-star"></ons-icon>
    <span style="font-size: 14px">Favorites</span>
  </ons-tab>
  <ons-tab page="settings.html" active="true">
    <ons-icon icon="ion-gear-a"></ons-icon>
    <span style="font-size: 14px">Settings</span>
  </ons-tab>
</ons-tabbar>

<ons-template id="home.html">
  ...
</ons-template>

<ons-template id="fav.html">
  ...
</ons-template>

<ons-template id="settings.html">
  ...
</ons-template>

実例 #

See the Pen Alert, confirm and prompt dialogs by Onsen & Monaca (@onsen) on CodePen.

Open in New Window

関連情報 #

属性 #

名前 型 / デフォルト値 概要
var String このタブバーを参照するための名前を指定します。 Optional
hide-tabs Boolean
false 		タブを非表示にする場合に指定します。trueもしくはfalseを指定できます。 Optional
animation String
none 		ページ読み込み時のアニメーションを指定します。"none"もしくは"fade"を選択できます。デフォルトは"none"です。 Optional
position String
bottom 		タブバーの位置を指定します。"bottom"もしくは"top"を選択できます。デフォルトは"bottom"です。 Optional
ons-reactive Expression "reactive"イベントが発火された時の挙動を独自に指定できます。 Optional
ons-prechange Expression "prechange"イベントが発火された時の挙動を独自に指定できます。 Optional
ons-postchange Expression "postchange"イベントが発火された時の挙動を独自に指定できます。 Optional
ons-destroy Expression "destroy"イベントが発火された時の挙動を独自に指定できます。 Optional

メソッド概要 #

シグネチャ 概要
setActiveTab(index, [options]) 指定したインデックスのタブを表示します。アニメーションなどのオプションを指定できます。
getActiveTabIndex() 現在アクティブになっているタブのインデックスを返します。現在アクティブなタブがない場合には-1を返します。
loadPage(url) 現在のアクティブなインデックスを変更せずに、新しいページを表示します。
on(eventName, listener) イベントリスナーを追加します。
once(eventName, listener) 一度だけ呼び出されるイベントリスナーを追加します。
off(eventName, [listener]) イベントリスナーを削除します。もしイベントリスナーを指定しなかった場合には、そのイベントに紐づく全てのイベントリスナーが削除されます。

イベント概要 #

名前 概要
prechange アクティブなタブが変わる前に発火します。
postchange アクティブなタブが変わった後に発火します。
reactive すでにアクティブになっているタブがもう一度タップやクリックされた場合に発火します。

メソッド

setActiveTab(index, [options]): Boolean #

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

返り値: 変更が成功した場合にtrueを返します。

パラメーター
名前 型 概要
index Number タブのインデックスを指定します。
options Object オプションを指定するオブジェクト。
options.keepPage Boolean タブバーが現在表示しているpageを変えない場合にはtrueを指定します。
options.animation String アニメーション名を指定します。"fade", "none"のいずれかを指定できます。

getActiveTabIndex(): Number #

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

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

loadPage(url) #

現在のアクティブなインデックスを変更せずに、新しいページを表示します。

パラメーター
名前 型 概要
url String pageのURLか、もしくは<ons-template>で宣言したid属性の値を利用できます。

on(eventName, listener) #

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

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

once(eventName, listener) #

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

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

off(eventName, [listener]) #

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

パラメーター
名前 型 概要
eventName String イベント名を指定します。
listener Function 削除するイベントリスナーを指定します。

イベント

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オブジェクト。

議論 #