时间戳

首页 > 解决方案 > Ionic 3 无法改变模态的大小

angular - Ionic 3 无法改变模态的大小

问题描述

我正在尝试将模态大小更改为不全屏。我跟着这个链接。它不起作用。模态仍然是全尺寸的。这就是我打开模式的方式：

private presentModal() {
 let profileModal = this.modalController.create(AddToCustomListModal, {cssClass: 'my-modal'});
 profileModal.present();
}

我的模态页面：

@IonicPage()
@Component({
  selector: 'page-add-to-custom-list',
  templateUrl: 'add-to-custom-list.html',
})
export class AddToCustomListModal {

  constructor(public navCtrl: NavController, public navParams: NavParams) {
  }

}

我的模态的 html，只是一个离子选择的通用示例：

<ion-content padding>

  <ion-item-group>
    <ion-item>
      <ion-label>Period</ion-label>
      <ion-select>
        <ion-option value="7day">7 days</ion-option>
        <ion-option value="overall" selected="true">overall</ion-option>
      </ion-select>
    </ion-item>
  </ion-item-group>

</ion-content>

还有我的全局 app.scss 文件：

.my-modal {
    background: rgba(0, 0, 0, 0.5) !important;
    padding: 20% 10%  !important;
}

我还尝试将 css 代码放在页面的 scss 文件中，但没有区别。

标签： angularionic-frameworkionic3

解决方案

试试这个。

private presentModal() {
 let profileModal = this.modalController.create(AddToCustomListModal, null, {cssClass: 'my-modal'});
 profileModal.present();
}

ModalController.create接受 3 个参数。

  1. 零件
  2. 数据
  3. 选择

如果你需要设置cssClass它应该作为opts发送。

推荐阅读