如何通过ts文件ionic 4调整模态的大小

问题描述 投票:0回答:1

我想从TS文件而不是通过全局SCSS文件调整模式的大小。

有一个简单的代码,您可以通过全局SCSS文件调整模式的大小。

HTML文件

    <ion-content>
      <ion-button expand="block" fill="outline" (click)="onModal()">
        <ion-icon name="apps"></ion-icon>
      </ion-button>
    </ion-content>

TS文件:


     export class HomePage {

      constructor(private modalController: ModalController) {}

      onModal() {
        this.dynamicPreview('Dynamic Modal');
      }

      async dynamicPreview(info: any) {
        const myModal = await this.modalController.create({
        component: DynamicModalPage,
        cssClass: 'dynamicModalCss',
        componentProps: {
            vInfo: info,
          }
        });
        return await myModal.present();
      }

    }

Global SCSS文件:

    .dynamicModalCss {
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        position: absolute;
        contain: strict;
        display: flex;
        justify-content: center;
        align-items: center;

        .modal-wrapper {
            width: 20rem;
            height: 40rem;
          }
    }

我不知道该怎么做:(

感谢您的建议和帮助

angular typescript ionic-framework ionic4
1个回答
0
投票

自定义模态的唯一方法是使用CSS类。

© www.soinside.com 2019 - 2024. All rights reserved.