Question

我的theme / variables.scss文件中已经有了下面的代码，但它影响了我的所有弹出窗口。

$popover-md-width: 90%;
$popover-ios-width: 90%;
$popover-wp-width: 90%;
$popover-md-border-radius:2px;

Answer 1

我找到了解决方案。

$popover-md-width: 90%;
$popover-ios-width: 90%;
$popover-wp-width: 90%;
$popover-md-border-radius:2px;

会影响全局代码，下面是修复。

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

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

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

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

享受!!!

Answer 2

针对在这里为Ionic 4登陆的任何人

在ionic 4中，文档指出弹出式窗口的CSS属性为：

--width:    Width of the popover

您可以通过转到variables.scss并进行更改

进行设置

ion-popover {
  --width: 50%
}

或更改将CSS类传递给弹出框的特定弹出框，例如：

const popover = await this.popoverCtrl.create({
      component: FilterComponent,
      event: event,
      translucent: true,
      cssClass: 'filterPopover'
    });

，然后将其放入您的variable.scss

  .filterPopover {
    --width: 70%;
  }

与其他答案类似（这对我有很大帮助），但是没有在幕后使用ionic创建的类。

如何为离子3

2 个答案: