ionicのmodalをSCSSでカスタマイズする

はじめに

スマホの場合、デフォルトでは画面いっぱいにモーダル画面が表示されてしまいます。
公式ドキュメント:ion-modal
このモーダル画面をSCSSでカスタマイズする方法を紹介します。
コピペで試せるように、編集したhtml、typescript、scssのコードは全て載せています。

モーダルをテストするプロジェクトの作成

テスト用のプロジェクトを作成します。

$ ionic start modalTest blank --type=angular

モーダルで表示するページの作成

モーダルで表示するページを作成します。

$ ionic g page modal

普通にモーダルを表示してみる

まずは普通にモーダルを表示してみます。
メインのページはモーダルを表示するボタンのみで、ボタンが押下されるとモーダルページが表示されます。

/src/app/home/home.page.html

<ion-header>
  <ion-toolbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <div class="ion-padding">
      <ion-button expand="block" fill="outline" (click)="presentModal()">ion-modal表示</ion-button>
  </div>
</ion-content>

/src/app/home/home.page.ts

import { Component } from '@angular/core';
import { ModalController } from '@ionic/angular';
import { ModalPage} from '../modal/modal.page';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  constructor(
    private modalCtrl: ModalController,
  ) {}
  async presentModal() {
    const modal = await this.modalCtrl.create({
      component: ModalPage,
    });
    return await modal.present();
  }
}

/src/app/modal/modal.page.html

<ion-header>
  <ion-toolbar>
    <ion-title>モーダル
    </ion-title>
    <ion-buttons slot="end">
        <ion-button (click)="close()"><ion-icon name="close"></ion-icon></ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content>
</ion-content>

/src/app/modal/modal.page.ts

import { Component, OnInit } from '@angular/core';
import { ModalController } from '@ionic/angular';

@Component({
  selector: 'app-modal',
  templateUrl: './modal.page.html',
  styleUrls: ['./modal.page.scss'],
})
export class ModalPage implements OnInit {

  constructor(
    private modalCtrl: ModalController,
  ) { }

  ngOnInit() {
  }

  close() {
    this.modalCtrl.dismiss();
  }

}

/src/app/app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

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

import { ModalPageModule } from '../app/modal/modal.module'; //追加

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, 
    IonicModule.forRoot(), 
    AppRoutingModule,
    ModalPageModule, //追加
  ],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

上記の実装で、ionic serveすると、以下のような画面が表示されます。

ION-MODAL表示ボタンを押下すると、以下のようにモーダルページが表示されます。
スマホ画面では画面いっぱいに表示されてしまいます。

SCSSでいい感じにカスタマイズする

変更するコードは以下です。

/src/app/home/home.page.ts

import { Component } from '@angular/core';
import { ModalController } from '@ionic/angular';
import { ModalPage} from '../modal/modal.page';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  constructor(
    private modalCtrl: ModalController,
  ) {}
  async presentModal() {
    const modal = await this.modalCtrl.create({
      component: ModalPage,
      cssClass: 'custom-modal-css' //追加
    });
    return await modal.present();
  }
}

/src/global.scss

/*
 * App Global CSS
 * ----------------------------------------------------------------------------
 * Put style rules here that you want to apply globally. These styles are for
 * the entire app and not just one component. Additionally, this file can be
 * used as an entry point to import other CSS/Sass files to be included in the
 * output CSS.
 * For more information on global stylesheets, visit the documentation:
 * https://ionicframework.com/docs/layout/global-stylesheets
 */

/* Core CSS required for Ionic components to work properly */
@import "~@ionic/angular/css/core.css";

/* Basic CSS for apps built with Ionic */
@import "~@ionic/angular/css/normalize.css";
@import "~@ionic/angular/css/structure.css";
@import "~@ionic/angular/css/typography.css";
@import '~@ionic/angular/css/display.css';

/* Optional CSS utils that can be commented out */
@import "~@ionic/angular/css/padding.css";
@import "~@ionic/angular/css/float-elements.css";
@import "~@ionic/angular/css/text-alignment.css";
@import "~@ionic/angular/css/text-transformation.css";
@import "~@ionic/angular/css/flex-utils.css";
.custom-modal-css .modal-wrapper {
    width: 90%;
    height: 90%;
    top: 5%;
    position: absolute; 
    display: block;  
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
    border-bottom-left-radius: 15px;
 }

個人的にはいいサイズ感のモーダル画面になったと思います。

おわりに

SCSSを編集することで様々なモーダル画面にカスタマイズできます。
モーダル画面でのデータの受け渡し方法はこちら

参考