構造

Ionic Framework は、アプリを構成するために使用できるいくつかの異なるレイアウトを提供します。シングルページレイアウトから、スプリットペインビューやモーダルまで、さまざまなレイアウトがあります。

Header と Footer のレイアウト

Header

最もシンプルなレイアウトは、header と content で構成されています。アプリのほとんどのページは、一般的にこの 2 つを備えていますが、コンテンツを使用するためにヘッダーは必要ではありません。

<ion-header>
  <ion-toolbar>
    <ion-title>Header</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
  <h1>Content</h1>
</ion-content>

Footer

ヘッダーのツールバーがコンテンツの上に表示されるのに対して、フッターはコンテンツの下に表示されます。ヘッダーとフッターは、同じページで併用することも可能です。

<ion-content class="ion-padding">
  <h1>Content</h1>
</ion-content>
<ion-footer>
  <ion-toolbar>
    <ion-title>Footer</ion-title>
  </ion-toolbar>
</ion-footer>

タブレイアウト

水平な タブ からなるレイアウトを使用すると、ユーザーはコンテンツビューをすばやく切り替えることができます。各タブには、router outlet や nav を使用して、静的コンテンツやナビゲーション・スタックを含めることができます。

src/app/example.component.html

<ion-tabs>
  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="home">
      <ion-icon name="play-circle"></ion-icon>
      Listen Now
    </ion-tab-button>
    <ion-tab-button tab="radio">
      <ion-icon name="radio"></ion-icon>
      Radio
    </ion-tab-button>
    <ion-tab-button tab="library">
      <ion-icon name="library"></ion-icon>
      Library
    </ion-tab-button>
    <ion-tab-button tab="search">
      <ion-icon name="search"></ion-icon>
      Search
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

src/app/home/home-page.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-home-page',
  templateUrl: './home-page.component.html',
})
export class HomePageComponent {}

src/app/home/home-page.component.html

<ion-header>
  <ion-toolbar>
    <ion-title>Listen now</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content>
  <div class="example-content">Listen now content</div>
</ion-content>

src/global.css

.example-content {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

src/app/home/home-page.module.ts

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { HomePageComponent } from './home-page.component';

import { IonicModule } from '@ionic/angular';

@NgModule({
  imports: [IonicModule, RouterModule.forChild([{ path: '', component: HomePageComponent }])],
  declarations: [HomePageComponent],
  exports: [HomePageComponent],
})
export class HomePageModule {}

src/app/library/library-page.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-library-page',
  templateUrl: './library-page.component.html',
})
export class LibraryPageComponent {}

src/app/library/library-page.component.html

<ion-header>
  <ion-toolbar>
    <ion-title>Library</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content>
  <div class="example-content">Library content</div>
</ion-content>

src/app/library/library-page.module.ts

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { IonicModule } from '@ionic/angular';

import { LibraryPageComponent } from './library-page.component';

@NgModule({
  imports: [IonicModule, RouterModule.forChild([{ path: '', component: LibraryPageComponent }])],
  declarations: [LibraryPageComponent],
  exports: [LibraryPageComponent],
})
export class LibraryPageModule {}

src/app/radio/radio-page.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-radio-page',
  templateUrl: './radio-page.component.html',
})
export class RadioPageComponent {}

src/app/radio/radio-page.component.html

<ion-header>
  <ion-toolbar>
    <ion-title>Radio</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content>
  <div class="example-content">Radio content</div>
</ion-content>

src/app/radio/radio-page.module.ts

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { RadioPageComponent } from './radio-page.component';

import { IonicModule } from '@ionic/angular';

@NgModule({
  imports: [IonicModule, RouterModule.forChild([{ path: '', component: RadioPageComponent }])],
  declarations: [RadioPageComponent],
  exports: [RadioPageComponent],
})
export class RadioPageModule {}

src/app/search/search-page.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-search-page',
  templateUrl: './search-page.component.html',
})
export class SearchPageComponent {}

src/app/search/search-page.component.html

<ion-header>
  <ion-toolbar>
    <ion-title>Search</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content>
  <div class="example-content">Search content</div>
</ion-content>

src/app/search/search-page.module.ts

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { SearchPageComponent } from './search-page.component';

import { IonicModule } from '@ionic/angular';

@NgModule({
  imports: [IonicModule, RouterModule.forChild([{ path: '', component: SearchPageComponent }])],
  declarations: [SearchPageComponent],
  exports: [SearchPageComponent],
})
export class SearchPageModule {}

src/app/app.module.ts

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';

import { IonicModule } from '@ionic/angular';

import { AppComponent } from './app.component';
import { ExampleComponent } from './example.component';

import { AppRoutingModule } from './app-routing.module';

@NgModule({
  imports: [BrowserModule, FormsModule, AppRoutingModule, IonicModule.forRoot()],
  declarations: [AppComponent, ExampleComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

src/app/app.component.html

<ion-router-outlet></ion-router-outlet>

src/app/app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';

import { ExampleComponent } from './example.component';

@NgModule({
  imports: [
    RouterModule.forRoot([
      {
        path: '',
        component: ExampleComponent,
        children: [
          {
            path: '',
            pathMatch: 'full',
            redirectTo: 'home',
          },
          {
            path: 'home',
            loadChildren: () => import('./home/home-page.module').then((m) => m.HomePageModule),
          },
          {
            path: 'radio',
            loadChildren: () => import('./radio/radio-page.module').then((m) => m.RadioPageModule),
          },
          {
            path: 'library',
            loadChildren: () => import('./library/library-page.module').then((m) => m.LibraryPageModule),
          },
          {
            path: 'search',
            loadChildren: () => import('./search/search-page.module').then((m) => m.SearchPageModule),
          },
        ],
      },
    ]),
  ],
  exports: [RouterModule],
})
export class AppRoutingModule {}

メニューレイアウト

モバイルアプリの標準的なレイアウトには、ボタンをクリックするか、横からスワイプして開くことで サイドメニュー menu を切り替えられる機能が含まれています。サイドメニューは一般的にナビゲーションのために使用されますが、任意のコンテンツを含むことができます。

<ion-menu contentId="main-content">
  <ion-header>
    <ion-toolbar>
      <ion-title>Menu Content</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content class="ion-padding">This is the menu content.</ion-content>
</ion-menu>
<div class="ion-page" id="main-content">
  <ion-header>
    <ion-toolbar>
      <ion-buttons slot="start">
        <ion-menu-button></ion-menu-button>
      </ion-buttons>
      <ion-title>Menu</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content class="ion-padding"> Tap the button in the toolbar to open the menu. </ion-content>
</div>

分割ペインレイアウト

split pane レイアウトは、前述のレイアウトを組み合わせることができるため、より複雑な構造を持っています。これは、ビューポートが指定されたブレークポイントより上にある場合に、複数のビューを表示することができます。デバイスの画面サイズが一定以下の場合、分割ペインビューは非表示になります。

デフォルトでは、画面が 768px より大きいとき、または md ブレイクポイントに分割ペインが表示されますが、when プロパティを設定することで、異なるブレイクポイントを使用するようにカスタマイズすることができます。以下は、分割ペインが xs 画面以上、またはビューポートが 0px より大きい場合に表示されるメニューを含んでいる例です。これにより、すべての画面サイズに対して分割ペインが表示されるようになります。

ここで重要なのは、分割ペインで指定した contentId と一致する id を持つ要素が、常に表示されるメインコンテンツとなることです。これは、nav、router outlet または tabs など、どの要素でもかまいません。

<ion-split-pane when="xs" contentId="main">
  <ion-menu contentId="main">
    <ion-header>
      <ion-toolbar color="tertiary">
        <ion-title>Menu</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content class="ion-padding"> Menu Content </ion-content>
  </ion-menu>

  <div class="ion-page" id="main">
    <ion-header>
      <ion-toolbar>
        <ion-title>Main View</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content class="ion-padding"> Main View Content </ion-content>
  </div>
</ion-split-pane>