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

Posted

技术标签:

【中文标题】Ionic 3 - 我想要一个不全尺寸的模态屏幕【英文标题】:Ionic 3 - I want a modal screen not full size 【发布时间】:2018-08-17 13:08:14 【问题描述】:

我需要一个没有全尺寸(80% 宽度,

【问题讨论】:

【参考方案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;

根据您的设计更改数字。

【讨论】:

很好,工作正常。有一种方法可以圆角,比如link ? 我也想要那种圆润的效果。我做了以下事情:.text-properties-modal background: rgba(0, 0, 0, 0.5) !important; padding: 20% 10% !important; .modal-wrapper border-radius: 20px; 【参考方案2】:

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

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

【讨论】:

【参考方案3】:

在 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%;

【讨论】:

【参考方案4】:

为模态分配一个类(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%;

【讨论】:

【参考方案5】:

我在 Ionic 6 上,它在这里工作。 在 global.scss 中添加:

.premio-modal
  // background-color: red;
  .modal-wrapper
    background: rgba(0, 0, 0, 0.5) !important;
    /* padding: 20% 10% !important; */
    width: 70%;
    height: 75%;
    border-radius: 5px;
  

在组件中:

async showModal()
        const modal = await this.modalController.create(
          component: YourComponent,
          cssClass: 'premio-modal',
          backdropDismiss: true,
          
        );
        modal.onDidDismiss().then(
          (m: any) => 
          
        );
        return await modal.present();
      

【讨论】:

以上是关于Ionic 3 - 我想要一个不全尺寸的模态屏幕的主要内容,如果未能解决你的问题,请参考以下文章

Ionic 3-根据屏幕尺寸更改iframe内容大小

在 Ionic 的模态之外单击时如何防止模态消失?

Ionic 2:单击背景时模态不会关闭

iPhone X 上 ionic 的屏幕尺寸问题

像 Ionic 2 中的模态一样警报

ionic 2,刷新带有 2 个或更多徽标的模态页面