我在一个有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;
}
先谢了。
1条答案
按热度按时间wmvff8tz1#
您可以在这里找到问题的答案