Ionic 3 - 我想要一个不是全尺寸的模态屏幕
Ionic 3 - I want a modal screen not full size
我需要一个没有全尺寸(80% 宽度,<60% 高度,居中)的模态页面来 select 某些项目,例如警报控件。
如何为这种情况实施 CSS ?
用cssClass
初始化模态
let modal = this.modalCtrl.create(CustomSelectPage, {data: data}, {cssClass: 'select-modal' });
然后将CSS添加到app.scss
中的class
.select-modal {
background: rgba(0, 0, 0, 0.5) !important;
padding: 20% 10% !important;
}
根据您的设计更改数字。
put this code only in your component css file
::ng-deep .sc-ion-modal-md-h {
--width: 90%;
--height: 70%;
}
在 TS 文件中:
async MyModal() {
const modal = await this.modalController.create({
component: MyModalPage,
backdropDismiss: true,
cssClass: 'my-modal',
});
return await modal.present();
}
在 SCSS 文件中:
.my-modal {
--width: 70%;
--height: 35%;
}
将 class 分配给模态 (ionic-4 & ionic-5)
this.modalCtrl
.create({
component: ReportEventComponent,
cssClass: 'add-contact-modal'
})
.then(modalEl => {
modalEl.present();
return modalEl.onDidDismiss();
});
将您的 css 代码放入 global.css 文件
ion-modal.add-contact-modal {
--height: 85%;
--width: 90%;
}
我使用的是 Ionic 6,在这里可以正常使用。
添加 global.scss:
.premio-modal{
// background-color: red;
.modal-wrapper{
background: rgba(0, 0, 0, 0.5) !important;
/* padding: 20% 10% !important; */
width: 70%;
height: 75%;
border-radius: 5px;
}
}
在组件中:
async showModal(){
const modal = await this.modalController.create({
component: YourComponent,
cssClass: 'premio-modal',
backdropDismiss: true,
});
modal.onDidDismiss().then(
(m: any) => {
}
);
return await modal.present();
}
我需要一个没有全尺寸(80% 宽度,<60% 高度,居中)的模态页面来 select 某些项目,例如警报控件。 如何为这种情况实施 CSS ?
用cssClass
let modal = this.modalCtrl.create(CustomSelectPage, {data: data}, {cssClass: 'select-modal' });
然后将CSS添加到app.scss
.select-modal {
background: rgba(0, 0, 0, 0.5) !important;
padding: 20% 10% !important;
}
根据您的设计更改数字。
put this code only in your component css file
::ng-deep .sc-ion-modal-md-h { --width: 90%; --height: 70%; }
在 TS 文件中:
async MyModal() {
const modal = await this.modalController.create({
component: MyModalPage,
backdropDismiss: true,
cssClass: 'my-modal',
});
return await modal.present();
}
在 SCSS 文件中:
.my-modal {
--width: 70%;
--height: 35%;
}
将 class 分配给模态 (ionic-4 & ionic-5)
this.modalCtrl
.create({
component: ReportEventComponent,
cssClass: 'add-contact-modal'
})
.then(modalEl => {
modalEl.present();
return modalEl.onDidDismiss();
});
将您的 css 代码放入 global.css 文件
ion-modal.add-contact-modal {
--height: 85%;
--width: 90%;
}
我使用的是 Ionic 6,在这里可以正常使用。 添加 global.scss:
.premio-modal{
// background-color: red;
.modal-wrapper{
background: rgba(0, 0, 0, 0.5) !important;
/* padding: 20% 10% !important; */
width: 70%;
height: 75%;
border-radius: 5px;
}
}
在组件中:
async showModal(){
const modal = await this.modalController.create({
component: YourComponent,
cssClass: 'premio-modal',
backdropDismiss: true,
});
modal.onDidDismiss().then(
(m: any) => {
}
);
return await modal.present();
}