View Source Improve this doc

ons-tab

タブバーに配置される各アイテムのコンポーネントです。それぞれのons-tabはページを表します。 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

関連情報 #

属性 #

名前 型 / デフォルト値 概要
page String <ons-tab>が参照するページへのURLを指定します。 Optional
icon String アイコン名を指定します。<ons-icon>と同じアイコン名を指定できます。 個別にアイコンをカスタマイズする場合は、background-imageなどのCSSスタイルを用いて指定できます。 Optional
active-icon String アクティブの際のアイコン名を指定します。 Optional
label String アイコン下に表示されるラベルを指定します。 Optional
active Boolean
false 		このタブアイテムをアクティブ状態にするかどうかを指定します。trueもしくはfalseを指定できます。 Optional
no-reload すでにアクティブになったタブを再びクリックするとページの再読み込みは発生しません。 Optional
persistent このタブで読み込んだページを永続化します。 この属性があるとき、別のタブのページに切り替えても、 読み込んだページのDOM要素は破棄されずに単に非表示になります。 Optional

議論 #