离子控制控制器模态高度

Question

我正在使用像这样启动的控制器弹出窗口

 async openNwInsights(){
    const modal = await this.modalCtl.create({
      component: ExplainNetworthComponent
    })

    modal.present();
    const { data, role } = await modal.onWillDismiss();
  }

该组件的 HTML 是这样的

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-button (click)="cancel()"><ion-icon name="arrow-back-outline"></ion-icon></ion-button>
    </ion-buttons>
    <ion-title></ion-title>
    <ion-buttons slot="end">
    </ion-buttons>
  </ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
  This is how it is suppose to be
</ion-content>

启动后会占据整个屏幕。我想要的是将它放在中间部分并具有一定的固定高度。离子站点上有一个内联模式的示例，它正是我想要的。只是不确定如何复制，因为我没有使用离子模型标签。

参考： https://ionicframework.com/docs/api/modal

Answer 1

一个可能的修复方法是将

--max-width

CSS 变量设置为

300px

或您喜欢的任何内容。

CSS：

ion-modal.custom-size {
  --max-width: 300px;
}

HTML：

  <ion-modal #modal trigger="open-modal" class="custom-size">
    <ng-template>
      <ion-content>
        ...

Stackblitz 演示