ionic2：如何自定义弹出框宽度？答案

【问题标题】：ionic2: how to customize popover width?ionic2：如何自定义弹出框宽度？
【发布时间】：2018-02-15 19:55:45
【问题描述】：

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

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

$popover-md-width:50%;

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

【问题讨论】：

标签： angular typescript ionic2 ionic3 ionic4

【解决方案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
    });
  }
}

然后使用该类来应用自定义样式。

【讨论】：

我之前试过这个并在主页和弹出页面中使用了这个css：.my-custom-popover{width:50%;}但没有发生任何变化！
如果在app.scss 文件中添加ion-popover.my-custom-popover { width:50%; } 会发生什么？因为 popover 组件不会在这些页面中呈现。
同样没有变化，但在点击弹出按钮后导致应用出现问题，页面不再响应任何点击
在 Ionic 4 中仍然有效（这可能是唯一的东西 =P） - 谢谢

【解决方案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;
};

【讨论】：