Ionic 3无法更改模态的大小

Question

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

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，只是一个离子的一般例子select:

<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 文件中，但没有任何区别。

Answer 1

试试这个。

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

ModalController.create 接受 3 个参数。

分量
数据
选择

如果您需要设置 cssClass，则应将其作为 opts 发送。

Ionic 3无法更改模态的大小

Ionic 3 can't change size of modal

ionic-framework

ionic3

angular