ionic2：如何自定义弹出窗口宽度？

Question

我正在使用Ionic2：我使用了一个popover，我想自定义每个popover的大小。这是popover：

我想减少它的风险。我在variable.scss文件中使用了这段代码：

$popover-md-width:50%;

它工作正常但它适用于我的应用程序中的每个弹出窗口。我想自定义一些popover的宽度。 我该怎么办？

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

在你编写popover代码的ts文件中，设置一个cssClass例如。

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

然后转到app.scss并设置popover样式，例如

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