Ionic2弹出框更改宽度

Question

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

我不想在变量.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的回答完全没问题。但是，我想它在其他版本中需要额外考虑。

在 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

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

1. 将离子内容物作为父元素放置并添加 id 属性
2. 将父项获取到主容器：

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

Answer 5

试试这个...

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

在全局.css文件中添加我的自定义弹出类。

Answer 6

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

您需要创建弹出框并添加 cssClass prop，如上面的代码所示，然后您可以在 variables.scss 文件中使用"自定义弹出"类，如下所示。

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

}