ionic-framework - 如何改变 ionic 弹窗的宽度

Question

我创建了 ionic 弹出窗口。创建了一个弹出页面并添加了按钮单击操作以从主页显示弹出窗口。但我无法更改弹出框的宽度。下面是代码；

home.page.html:

<ion-content>
<ion-button expand="full" (click)="openPopover($Event)">Open popover</ion-button>
</ion-content>

home.page.ts:

 async openPopover(ev: Event) {
const popover = await this.popoverController.create({
  component:PopoverPage,
  componentProps: {
    custom_id: this.value
  },  
});
popover.present();    
 }

popover.page.html:

<ion-content>
<ion-list>
<ion-item>
this is popover
</ion-item>
<ion-item button color="danger" (click) = "closePopover()">
<ion-icon name="close" slot="start"></ion-icon>
Close Popover
 </ion-item>
</ion-list>
</ion-content>

popover.page.ts:

  closePopover() {
   this.popoverController.dismiss();
  }

请帮助我如何更改弹出框的宽度，因为我尝试将自定义 css 添加到弹出框页面的 ion-content 但它不起作用。

Answer 1

两种方式:

覆盖 SCSS 变量；

$popover-md-width: 320px; $popover-ios-width: 320px; $popover-wp-width: 320px;

或 2. 给你的 popover 上课:

let popover = this.popover.create(ContactPopover, {}, {cssClass: 'contact-popover'})

然后设置 .popover-content 的样式:

.contact-popover .popover-content{ width: 320px; }

Ionic automatically calculates the correct position for your custom width popover.