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のdeclarationsとentryComponentsに追加することを忘れないでください。

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