如何通过 ts 文件离子 4 调整模态大小

Question

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

有一个简单的代码，您可以在其中按全局 SCSS 文件调整模态的大小。

网页文件

<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();
}
}

全局 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;
}
}

我不知道如何做到这一点:(

感谢您的建议和帮助

Answer 1

自定义模式的唯一方法是使用 css 类。

您可以在每个组件 scss 文件上创建类，而不是在 global.scss 文件中创建类。在您的情况下，在 HomePage.component.css 文件中。

因此，每个组件的模态宽度和高度将不同，具体取决于您在相应的 scss 文件中设置的内容。

您必须使用的属性是 css4 属性：--width、--height。

Home.component.scss 文件

.my-modal {
--width: 100px;
--height: 50px;
}

另一个.component.scss文件

.my-modal {
--width: 100px;
--height: 50px;
}