Ionic2 Popover 更改宽度答案

【问题标题】：Ionic2 Popover Change WidthIonic2 Popover 更改宽度
【发布时间】：2017-10-15 11:58:53
【问题描述】：

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

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

【问题讨论】：

【解决方案1】：

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

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

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

}

【讨论】：

【解决方案2】：

试试这个...

myPopOver = this.popovercontroller.create({ component: MyCustomComponent, 
               event:ev, 
               cssClass: 'my-custom-popover'
})
    
myPopOver.present();

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

这仍然适用于 Ionic 5，但我不认为这是推荐的方式。在文档 (ionicframework.com/docs/api/popover#css-custom-properties) 中，他们描述了自定义 css 属性：--max-width 和--width。问题是：我只是不知道如何使用它们，也没有在任何地方描述。有什么想法吗？
该解决方案也适用于Ionic 5。我稍后会按照推荐的方式进行。在此之前，您可以使用此解决方案。
非常感谢@MD。易卜拉欣·哈利勒·塔尼姆

【解决方案4】：

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

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

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

【讨论】：

谢谢！仍然适用于 ionic 4.4.0

【解决方案5】：

我不知道它是否仍然适合你，我发现了同样的问题，但是修改全局变量 scss 配置并没有帮助我，因为我在项目中使用了多个 PopoverControllers 我设法做到的唯一方法是以下：

将 ion-content 作为父元素并添加 id 属性
将父项获取到主容器：

ionViewDidLoad() {
    let element = document.getElementById('id')
    let parent=element.parentElement
    let parent2 = parent.parentElement //popover-content
    parent2.parentElement.style['width'] = "92px"
}

【讨论】：

好的，谢谢，我试试
你能发布你的html吗？我很困惑哪个离子含量
对齐 -内容>

【解决方案6】：

您可以仅为此弹出框创建一个自定义类，并将其传递到其选项的 cssClass 中

假设你有这个：

.custom-popover {
  width: 60%;
}

在创建弹出框时，您只需将其作为 cssClass 插入到选项中

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

希望这会有所帮助：D

【讨论】：

我将 .customer-popover 类放在我的 .scss 文件中，并从我的 .ts 文件中调用了同名的弹出框，它仍然是相同的大小
.custom-popover 类应全局声明为 ion-popover 与页面组件不在同一上下文中。
正如@afifahmi 所说，它需要是全球性的，将您的.customer-popover 放在app 文件夹内的app.scss 文件中。
@GabrielBarreto 如果我使用带有弹出界面的离子选择，我会把它放在哪里？