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

Posted 2023-03-13

【中文标题】ionic2：如何自定义弹出框宽度？

【英文标题】：ionic2: how to customize popover width?

【发布时间】：2018-02-15 19:55:45

【问题描述】：

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

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

$popover-md-width:50%;

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

【参考方案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-popoverwidth: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;
;