Question

我需要一个没有完整尺寸（80％宽度，<60％高度，居中）的模态页面来选择一些项目，如警报控件。如何为这种情况实现CSS？

Answer 1

使用cssClass

初始化模态

 let modal = this.modalCtrl.create(CustomSelectPage, {data: data}, {cssClass: 'select-modal' });

然后将CSS添加到app.scss

中的类中

.select-modal {
   background: rgba(0, 0, 0, 0.5) !important;
   padding: 20% 10%  !important;
}

根据您的设计更改数字。

Answer 2

在 TS 文件中：

  async MyModal() {
    const modal = await this.modalController.create({
      component: MyModalPage,
      backdropDismiss: true,
      cssClass: 'my-modal',
    });
    return await modal.present();
  }

在 SCSS 文件中：

.my-modal {
  --width: 70%;
  --height: 35%;
}

Answer 3

为模态分配一个类（ionic-4 & ionic-5）

this.modalCtrl
  .create({
    component: ReportEventComponent,
    cssClass: 'add-contact-modal'
  })
  .then(modalEl => {
    modalEl.present();
    return modalEl.onDidDismiss();
});

将你的 css 代码放入 global.css 文件

ion-modal.add-contact-modal {
  --height: 85%;
  --width: 90%;
}

Answer 4

<块引用>

仅将此代码放在您的组件 css 文件中

::ng-deep .sc-ion-modal-md-h {
--width: 90%;
--height: 70%;
  }

离子3 - 我想要一个不是全尺寸的模态屏幕

4 个答案: