是否可以全屏打开特定模式而不影响其他模式。我可以将样式应用于 global.scss 中的模态包装器,但这适用于应用程序中的所有模态,这不是我想要的。我只需要打开两个或三个模态到全屏,其余的需要保持默认大小。
这在小屏幕上不是问题,因为它默认在小屏幕上全屏,但在更大的屏幕上,它们不是全屏。
这是我的代码示例
https://stackblitz.com/edit/ionic-angular-v5-modal-ehedzz?file=src/app/app.component.ts
谢谢
以防万一其他人遇到同样的问题,只需将其添加到 global.scss 中
.fullscreen {
--width:100% !important;
--height:100% !important;
}
const modal = await this.modalController.create({
component: NewModalPage,
cssClass: 'fullscreen'
});
将自定义类的样式放入 global.scss 中。像这样:
.dialog-fullscreen .modal-wrapper {
width: 100%;
height: 100%;
}
dialog-fullscreen
在您的代码中是 my-custom-class
您需要做的就是将其放入您的CSS中:
ion-modal {
--width: 100vw;
--height: 100vh;
}
研究之后,Ionic 在内部使用了“--width”和“--height”CSS 变量,因此覆盖这些变量就足够了。