Ionic 3 - 我想要一个不全尺寸的模态屏幕
Posted
技术标签:
【中文标题】Ionic 3 - 我想要一个不全尺寸的模态屏幕【英文标题】:Ionic 3 - I want a modal screen not full size 【发布时间】:2018-08-17 13:08:14 【问题描述】:我需要一个没有全尺寸(80% 宽度,
【问题讨论】:
【参考方案1】:用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;
根据您的设计更改数字。
【讨论】:
很好,工作正常。有一种方法可以圆角,比如link ? 我也想要那种圆润的效果。我做了以下事情:.text-properties-modal background: rgba(0, 0, 0, 0.5) !important; padding: 20% 10% !important; .modal-wrapper border-radius: 20px;
【参考方案2】:
仅将此代码放在您的组件 css 文件中
::ng-deep .sc-ion-modal-md-h --width: 90%; --height: 70%;
【讨论】:
【参考方案3】:在 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%;
【讨论】:
【参考方案4】:为模态分配一个类(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%;
【讨论】:
【参考方案5】:我在 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();
【讨论】:
以上是关于Ionic 3 - 我想要一个不全尺寸的模态屏幕的主要内容,如果未能解决你的问题,请参考以下文章