ons-tab

タブバーに配置される各アイテムのコンポーネントです。それぞれのons-tabはページを表します。 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-home" [page]="home" active></ons-tab>
      <ons-tab label="Page2" icon="ion-help" [page]="page"></ons-tab>
      <ons-tab label="Page3" icon="ion-stop" [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 { }

関連情報

属性

名前 型 / デフォルト値 概要
page String ons-tabが参照するページへのURLを指定します。 Optional. 初期化時のみ有効
icon String

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

Optional.
active-icon String アクティブの際のアイコン名を指定します。 Optional.
label String アイコン下に表示されるラベルを指定します。 Optional.
badge String バッジに表示する内容を指定します。 Optional.
active This attribute should be set to the tab that is active by default. (翻訳中) Optional.

お困りですか?

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

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

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