v-ons-tab

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

実例

Tabs

The VOnsTabbar component is used to add tab navigation to an app. It is a very common navigation pattern in mobile apps.

The tabs prop includes all the necessary information to render VOnsTab components and their linked VOnsPage components. This prop must be an array of object containing at least one of the next keys: icon, label or page. It can include other optional keys such as activeIcon, badge, active, etc. A special props key can also be provided in order to specify props for the corresponding page.

<v-ons-tabbar
  :tabs="[
    { label: 't1', page: p1 },
    { label: 't2', page: p2, props: { aPageProp: 'hello' } }
  ]"
>
</v-ons-tabbar>

The mentioned tabs prop is the preferred way to provide tabs information to VOnsTabbar, although it is not the only one. It is also possible to provide slot="pages" and VOnsTab components directly as children instead:

<v-ons-tabbar>
  <template slot="pages">
    <home-page></home-page>
    <news-page></news-page>
    <settings-page></settings-page>
  </template>

  <v-ons-tab v-for="(tab, i) in tabs"
    :icon="tabs[i].icon"
    :label="tabs[i].label"
    :badge="tabs[i].badge"
    ></v-ons-tab>
</v-ons-tabbar>

This is a longer version that offers higher control. It can be combined with tabs prop by, for example, providing only VOnsTab-related information (everything except page key) in tabs prop and also slot="pages" at the same time (the VOnsTab will match page’s DOM index).

Synchronizing :index prop

The VOnsTabbar component implements an optional index prop which is used to specify the page that is currently visible. This component fires update:index events whenever the user taps on a VOnsTab. This is useful to synchronize the value of index prop and can be directly handled by using Vue’s sync modifier:

<v-ons-tabbar :index.sync="tabbarIndex"></v-ons-tabbar>

index prop is not completely necessary. If you don’t need to set an active tab in any other way than tapping, then it would be enough to provide active attribute (or key in tabs prop) to the desired VOnsTab in order to set the initial active tab.

The VOnsTab component

VOnsTab components have the following attributes/props:

  • icon: specifies the displayed icon.
  • label: specifies the displayed text label.
  • badge: shows a small badge on top of the tab.
  • activeIcon: allows to change the icon when the tab becomes active.
  • active: Whether the tab should be displayed as active or not. This is not necessary when using index prop.

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 in v-ons-tabbar component. Optionally, max-width CSS property can be specified to set the width of the tab (for each v-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:

<v-ons-tabbar swipeable animation="none">...</v-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).

Advanced usage

VOnsTab behavior can be overridden by running event.preventDefault on click event handler.

For example, this can provide fine control to support some of Vue’s cool features:

<v-ons-tabbar>
  <template slot="pages">
    <transition>
      <keep-alive>
        <component :is="currentPage"></component>
      </keep-alive>
    </transition>
  </template>

  <v-ons-tab
    @click.prevent="currentPage = 'home'"
    :active="currentPage === 'home'"
  ></v-ons-tab>
  <v-ons-tab
    @click.prevent="currentPage = 'settings'"
    :active="currentPage === 'settings'"
  ></v-ons-tab>
</v-ons-tabbar>

Notice that preventing the default behavior means that VOnsTabbar events (prechange, postchange, reactive…) are not fired. Also, it won’t be swipeable if only 1 page is provided at a time (when using :is="component", for example).

関連情報

Prop一覧

名前 型 / デフォルト値 概要
active Boolean This attribute should be set to the tab that is active by default. (翻訳中) Optional.
active-icon String アクティブの際のアイコン名を指定します。 Optional.
badge String バッジに表示する内容を指定します。 Optional.
icon String

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

Optional.
label String アイコン下に表示されるラベルを指定します。 Optional.

イベント

名前 概要
click Normal click event. Useful to modify the component default action (set an active page based on index). (翻訳中)
click

Normal click event. Useful to modify the component default action (set an active page based on index). (翻訳中)

パラメーター
名前 概要
event Object Event object. (翻訳中)
event.preventDefault Function Avoids the default behavior. (翻訳中)

お困りですか?

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

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

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