angular - 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;
};