如何設置每個 ion-popover 的大小

Question

我有不止一個 ion-popover。我想為每個人設置大小。我研究了這個問題，我嘗試了一切，但我做不到。 但是，我成功地在variables.scss中全局更改了大小，但不是單獨更改。 有誰知道如何設置每個 ion-popover？ PS我正在使用帶有angular的離子5

這只是我能做的，在全球范圍內改變。 這是我在variables.scss中添加的

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

Answer 1

ion-popover popover 有一個名為cssClass的屬性。 您可以將唯一的 class 分配給每個，然后從此處提到的任何位置定位它。

 async presentPopover(ev: any) {
    const popover = await this.popoverController.create({
      component: PopoverComponent,
      cssClass: 'my-custom-class',
      event: ev,
      translucent: true
    });
    return await popover.present();
  }

現在您可以執行以下操作（注意&.my-custom-class ）：

ion-popover {
&.my-custom-class {
  .popover-wrapper {
   .popover-content {
     width: fit-content;
   }
  }
}
}