Ionic(Angular)でtabとサイドバーを備えたプロジェクトを作成する

/0 コメント/カテゴリ: /作成者:
Contents hide
1 概要
2 流れ
3 参考文献
4 準備 デフォルトのプロジェクトを作成する
4.1 サイドバーに配置するページを作成しておく
5 サイドメニューを設置
5.1 app.component.htmlでサイドメニューを作成し、ion-router-outletに登録する
5.2 任意のページからのサイドメニューの読み込み
5.3 おまけ

概要

上記の画像のようなサイドメニューとタブバーを備えたプロジェクトを作成します。

流れ

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>

そうするとこのように戻るボタンが設置できます。

0 返信

返信を残す

Want to join the discussion?
Feel free to contribute!

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA