ionic2：如何自定義彈出框寬度？

Question

我正在使用Ionic2：我使用了一個彈出框，並且想要自定義每個彈出框的大小。 這是彈出窗口：

我想減少它的浪費。 我在variable.scss文件中使用了以下代碼：

$popover-md-width:50%;

它工作正常，但適用於我的應用程序中的每個彈出窗口。 我想自定義一些彈出框的寬度。 我該怎么辦？

Answer 1

create方法接受第三個參數：

create(component, data, opts)

其中opts是PopoverOptions類型的

這些選項之一是cssClass屬性：

Option      Type    Description
cssClass    string  Additional classes for custom styles, separated by spaces.

因此，您可以在創建彈出窗口時添加自定義類：

import { PopoverController } from 'ionic-angular';

@Component({})
class MyPage {
  constructor(public popoverCtrl: PopoverController) {}

  presentPopover(myEvent) {
    let popover = this.popoverCtrl.create(PopoverPage, {}, {cssClass: 'my-custom-popover'});
    popover.present({
      ev: myEvent
    });
  }
}

然后使用該類來應用自定義樣式。

Answer 2

在您編寫了彈出代碼的ts文件中，設置一個cssClass例如。

presentPopover() {
    let popover = this.popoverCtrl.create( PopoverPage, {} , { cssClass: 'custom-popover' });
    popover.present();
}

然后轉到您的app.scss並設置彈出窗口的樣式。

.custom-popover .popover-content{
    width: 90% !important;
    color: red;
};