Ionic 如何使离子模态高度自动显示所有模态内容

r6vfmomb  于 2022-12-16  发布在  Ionic
关注(0)|答案(1)|浏览(160)

我在一个有Angular 的项目中使用离子。我尝试使ion-modal自动高度,所以不会有额外白色为一些模态。
然而,当我在css中把高度设置为自动后,模态只显示ion-header中的2个按钮,它不会再显示其他的ion-content了。我如何使它的高度是自动的,但包括ion-content
HTML内部的模态代码如下所示。

<ion-modal [isOpen]="openSensor" [backdropDismiss]="false">
    <ng-template>
        <ion-header>
            <ion-toolbar>
                <ion-buttons slot="start">
                    <ion-button>ButtonA</ion-button>
                </ion-buttons>
                <ion-buttons slot="end">
                    <ion-button [strong]="true">ButtonB</ion-button>
                </ion-buttons>
            </ion-toolbar>
        </ion-header>
        <ion-content class="ion-padding">
            <ion-item>
                <ion-label position="stacked">Tag</ion-label>
                <ion-input type="text"  placeholder="Full Name"  [(ngModel)]="fullName"></ion-input>
            </ion-item>
        </ion-content>
    </ng-template> 
</ion-modal>

这是与模态相关的全局style.css文件

ion-modal.stack-modal {
  --box-shadow: 0 28px 48px rgba(0, 0, 0, 0.4);
  --backdrop-opacity: var(--ion-backdrop-opacity, 0.32);
}
ion-modal {
  --height: auto;
  --border-radius: 16px;
}

先谢了。

相关问题