Ionic(Angular)でtabとサイドバーを備えたプロジェクトを作成する
概要
上記の画像のようなサイドメニューとタブバーを備えたプロジェクトを作成します。
流れ
IonicのデフォルトテンプレートのひとつであるTabプロジェクトにサイドメニューを追加します。
参考文献
https://petercoding.com/ionic/2019/05/05/side-menu-in-ionic4/
https://ionicframework.com/jp/docs/api/menu
準備 デフォルトのプロジェクトを作成する
下記のコマンドを打ってTabバーを備えたプロジェクトを生成します。
% ionic start sidemanu tabs --type=angularさらにCapacitorを入れますか？（Integrate your new app with Capacitor to target native iOS and Android?） と聞かれたら、スマホアプリにすることを検討指定場合はYESにしておきます。
その後、作成したプロジェクトへ移動します。
$ cd sidemanuプロジェクトへ移動したあと、下記コマンドで一度起動してみます。
ionic serveこのような画面が立ち上がればOKです。なお、デフォルトがIEなどのブラウザになっているとそもそも表示されないです。ChromeやEdgeでアクセスしてください。
なお、Tabバーのプロジェクト構成は下記となっています。
.
├── app-routing.module.ts
├── app.component.html
├── app.component.scss
├── app.component.spec.ts
├── app.component.ts
├── app.module.ts
├── explore-container
│ ├── explore-container.component.html
│ ├── explore-container.component.scss
│ ├── explore-container.component.spec.ts
│ ├── explore-container.component.ts
│ └── explore-container.module.ts
├── tab1
│ ├── tab1-routing.module.ts
│ ├── tab1.module.ts
│ ├── tab1.page.html
│ ├── tab1.page.scss
│ ├── tab1.page.spec.ts
│ └── tab1.page.ts
├── tab2
│ ├── tab2-routing.module.ts
│ ├── tab2.module.ts
│ ├── tab2.page.html
│ ├── tab2.page.scss
│ ├── tab2.page.spec.ts
│ └── tab2.page.ts
├── tab3
│ ├── tab3-routing.module.ts
│ ├── tab3.module.ts
│ ├── tab3.page.html
│ ├── tab3.page.scss
│ ├── tab3.page.spec.ts
│ └── tab3.page.ts
└── tabs
├── tabs-routing.module.ts
├── tabs.module.ts
├── tabs.page.html
├── tabs.page.scss
├── tabs.page.spec.ts
└── tabs.page.tsこれにサイドメニューを設置して行きます
サイドバーに配置するページを作成しておく
事前にサイドメニューに設置するページを作成しておきます。新しいターミナルを立ち上げてプロジェクトフォルダまで移動したあと、下記コマンドでpageを2つ追加します。
ionic generate page side/mySide1
ionic generate page side/mySide2プロジェクトは下記のようになります。
.
├── app-routing.module.ts
├── app.component.html
├── app.component.scss
├── app.component.spec.ts
├── app.component.ts
├── app.module.ts
├── explore-container
│ ├── explore-container.component.html
│ ├── explore-container.component.scss
│ ├── explore-container.component.spec.ts
│ ├── explore-container.component.ts
│ └── explore-container.module.ts
├── side
│ ├── my-side1
│ │ ├── my-side1-routing.module.ts
│ │ ├── my-side1.module.ts
│ │ ├── my-side1.page.html
│ │ ├── my-side1.page.scss
│ │ ├── my-side1.page.spec.ts
│ │ └── my-side1.page.ts
│ └── my-side2
│ ├── my-side2-routing.module.ts
│ ├── my-side2.module.ts
│ ├── my-side2.page.html
│ ├── my-side2.page.scss
│ ├── my-side2.page.spec.ts
│ └── my-side2.page.ts
├── tab1
│ ├── tab1-routing.module.ts
│ ├── tab1.module.ts
│ ├── tab1.page.html
│ ├── tab1.page.scss
│ ├── tab1.page.spec.ts
│ └── tab1.page.ts
├── tab2
│ ├── tab2-routing.module.ts
│ ├── tab2.module.ts
│ ├── tab2.page.html
│ ├── tab2.page.scss
│ ├── tab2.page.spec.ts
│ └── tab2.page.ts
├── tab3
│ ├── tab3-routing.module.ts
│ ├── tab3.module.ts
│ ├── tab3.page.html
│ ├── tab3.page.scss
│ ├── tab3.page.spec.ts
│ └── tab3.page.ts
└── tabs
├── tabs-routing.module.ts
├── tabs.module.ts
├── tabs.page.html
├── tabs.page.scss
├── tabs.page.spec.ts
└── tabs.page.ts
以上で準備は完了です。あとはこの2つのページへハンバーガメニューからアクセスできるようにします。
サイドメニューを設置
app.component.htmlでサイドメニューを作成し、ion-router-outletに登録する
Ionicは、サイドメニューを簡単に作成するためにion-menuと呼ばれるコンポーネントを提供しています。app.coponent.htmlの中にion-menuタグを使ってサイドメニューを作っておいて、それを<ion-router-outlet>の中でidで紐付けます。ion-router-outletタグはコンポーネントを埋め込むために使用するものですので、これに登録しておくと作成したサイドメニューを他のページから簡単に読み込むことができるようになります。
最初はapp.component.htmlは下記のようになっています。ion-router-outletタグに何も登録がありません。
<ion-app>
<ion-router-outlet></ion-router-outlet>
</ion-app>これを下記のようにします。
<ion-app>
<ion-menu side="start" menuId="first" contentId="my-content">
'''
'''
</ion-menu>
<ion-router-outdlet id="my-content"></ion-router-outlet>
</ion-app>こうすることにより、ion-menuタグの中に設定した中身を他のページから読み込むことができるようになります。私の場合、下記のように設定しました。
<ion-app>
<ion-menu side="start" menuId="first" contentId="content1">
<ion-header>
<ion-toolbar>
<ion-title>Navigate</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list lines="none">
<ion-list-header>
一般情報
</ion-list-header>
<ion-menu-toggle autoHide="false">
<ion-item routerLink="/my-side1" routerLinkActive="active" routerDirection="root" detail="false">
<ion-icon slot="start" name="person"></ion-icon>
<ion-label>
Privacy Policy
</ion-label>
</ion-item>
</ion-menu-toggle>
<ion-menu-toggle autoHide="false">
<ion-item routerLink="/my-side2" routerLinkActive="active" routerDirection="root" detail="false">
<ion-icon slot="start" name="help"></ion-icon>
<ion-label>
Terms of use
</ion-label>
</ion-item>
</ion-menu-toggle>
</ion-list>
</ion-content>
</ion-menu>
<ion-router-outdlet id="content1"></ion-router-outlet>
</ion-app>公式にも実装例が載っています。
https://ionicframework.com/docs/api/menu
任意のページからのサイドメニューの読み込み
以上でサイドメニューを設置できましたので、tab1ページから読み込んでみます。tab1.page.htmlはデフォルトではこのようになっていると思います。
<ion-header [translucent]="true">
<ion-toolbar>
<ion-title>
Tab 1
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content [fullscreen]="true">
<ion-header collapse="condense">
<ion-toolbar>
<ion-title size="large">Tab 1</ion-title>
</ion-toolbar>
</ion-header>
<app-explore-container name="Tab 1 page"></app-explore-container>
</ion-content>hdearの中で下記のタグで読み込めるようになりますので
<ion-buttons slot="start">
<ion-menu-button></ion-menu-button>
</ion-buttons>tab1.page.htmlを丸ごとこのように変更します。
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-menu-button></ion-menu-button>
</ion-buttons>
<ion-title>
File selection
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content [fullscreen]="true">
<ion-header collapse="condense">
<ion-toolbar>
<ion-title size="large">Tab 1</ion-title>
</ion-toolbar>
</ion-header>
<app-explore-container name="Tab 1 page"></app-explore-container>
</ion-content>
おまけ
サイドメニューから飛んだ先で戻るボタンを設置できます。
最初はこのようになっていると思いますが、
<ion-header>
<ion-toolbar>
<ion-title>mySide2</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
</ion-content>
下記のようにion-back-buttonを設置します。
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button defaultHref="/"></ion-back-button>
</ion-buttons>
<ion-title>
Privacy policy
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
</ion-content>そうするとこのように戻るボタンが設置できます。
