Ionic2 Popover改变宽度

Question

我想更改仅1页的弹出框宽度。 我试过这个：

我不想在variable.scss文件中使用此$popover-ios-width 因为它改变了所有页面的宽度。

Answer 1

您只能为此弹出式窗口创建自定义类，并将其传递到cssClass上的选项

让我们说你有这个：

.custom-popover {
  width: 60%;
}

在弹出窗口创建中，您只需将其作为选项

上的cssClass插入即可

const customPopOver = this.popover.create({ yourPopoverPage, yourData, { cssClass: 'custom-popover'}});
customPopOver.present();

希望这会有所帮助：D

Answer 2

@ gabriel-barreto的answer完全没问题。但是，我想在其他版本中需要额外考虑。

在Ionic 3.6中，自定义类被添加到<ion-popover>元素中。要覆盖.popover-content类中的默认宽度规则集，您的选择器应为：

.custom-popover .popover-content {
  width: 60%;
}

Answer 3

在variables.scss中添加以下代码。在Ionic 4中为我工作。

ion-popover {
  .popover-wrapper {
   .popover-content {
     width: fit-content;
     max-width: 300px;
   }
  }
}

Answer 4

尝试一下...

allprojects {
    repositories {
        jcenter()
        maven { url 'https://dl.bintray.com/kategory/maven' }
    }
}

在global.css文件中添加my-custom-popover类。

Answer 5

const customPopOver = this.popover.create({ yourPopoverPage, yourData, { cssClass: 'custom-popover'}});

您需要像上面的代码一样创建 popover 并添加 cssClass 属性，然后您可以在如下所示的 variables.scss 文件中使用“custom-popover”类。

.custom-popover {
.popover-wrapper {
  .popover-content {
    width: 465px;
  }
}

}