如何更改离子弹出框的宽度

Question

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

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 添加到弹出窗口页面的离子内容，但它不起作用。

Answer 1

另一种方法对我不起作用，需要进行以下更改：

首先

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

内容需要位于

global.scss

”这意味着任何自定义样式都需要放入全局样式表文件中。在 Ionic Angular 启动器中，这可以是 src/global.scss 文件，或者您可以通过添加到 Angular 中的样式构建选项来注册新的全局样式文件.json。” （文档中说）

其次，CSS 不能是

width

，它必须是

--width

。其自定义 CSS 属性位于此底部：https://ionicframework.com/docs/api/popover

Answer 2

两种方式：

覆盖 SCSS 变量；

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

或者 2. 给你的弹出框一个类：

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.

Answer 3

Ionic ^4 Popover 宽度可以在全局级别进行修改，将以下内容添加到 styles.scss 文件中：

ion-popover {
    --width: 320px;
}

Answer 4

对于 ionic 6.x，解决方案是

ion-popover {
  &::part(content) {
    min-width: 230px;
  }
}

Answer 5

在 ionic 6 中对我有用的不是针对内容而是针对主机本身。按照之前的回答设置 cssClass 选项后，如下所示：

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

我在 global.scss 中添加了等效项：

.contact-popover {
   --width: <custom width>;
}

Answer 6

我解决了在html中的元素上添加这样的css类，然后编辑scss文件，希望这对你有用。

::ng-deep .wider-popover {
  --width: fit-content;
}

<ion-select [interfaceOptions]="{'cssClass': 'wider-popover'}"></ion-select>