OnsTabbar Directive (ons-tabbar)

<ons-tabbar>要素のためのディレクティブです。

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

実例

Tabbar

Tabbarは、ons-tabbar要素とons-tab要素を使って構築できます。ここではAngular 2の場合の基本的な使い方を説明します。

まず、次のようにons-tabbar要素を配置するコンポーネントを宣言します。通常のons-tabbarとは違って、直下にtab-bar__contentというクラス属性を持っているdiv要素とtab-barというクラス属性を持っているdiv要素を配置する必要があります。tab-bar以下にはタブアイテムとして利用するons-tab要素を並べます。

ons-tab要素には[page]バインディングを使ってそのタブをクリックした時に読み込むページのコンポーネントを指定します。

@Component({
  selector: 'app',
  template: `
  <ons-tabbar>
    <div class="tab-bar__content"></div>
    <div class="tab-bar">
      <ons-tab label="Page1" icon="ion-ios-home" [page]="home" active></ons-tab>
      <ons-tab label="Page2" icon="ion-ios-help" [page]="page"></ons-tab>
      <ons-tab label="Page3" icon="ion-ios-square" [page]="page"></ons-tab>
    </div>
  </ons-tabbar>
  `
})
export class AppComponent {
  home = HomeComponent
  page = PageComponent

  constructor() { }
}

ons-tabbar内で読み込むページは、別のコンポーネントとして宣言します。コンポーネントのselectorにはons-pageを指定し、テンプレートにはons-pageの内容を記述します。

@Component({
  selector: 'ons-page',
  template: `
    <ons-toolbar>
      <div class="center">Page</div>
    </ons-toolbar>
    <div class="background"></div>
    <div class="content" class="normal-page">
      <div style="text-align: center; margin: 10px">
        <p>Page</p>
      </div>
    </div>
  `
})
export class PageComponent {
}

NgModuleへのコンポーネントの追加

ons-tabbar要素で読み込むコンポーネントは、NgModuleのdeclarationsentryComponentsに追加することを忘れないでください。

@NgModule({
  imports: [OnsenModule],
  declarations: [AppComponent, HomeComponent, PageComponent],
  bootstrap: [AppComponent],
  entryComponents: [HomeComponent, PageComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
class AppModule { }

関連情報

名前 型 / デフォルト値 概要
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.
名前 概要
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を返します。
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を返します。

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

Inputs

名前 概要
page 読み込むページコンポーネントを指定します。

Outputs

名前 概要
swipe <ons-tabbar>がスワイプされた時に発火します。

お困りですか?

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

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

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