Как установить размер для каждого ion-popover

Question

У меня более одного ion-popover. Я хочу установить размер для всех. Я исследовал эту проблему, я пробовал все, но не смог. Однако мне удалось изменить размер глобально, в переменных.s css, но не индивидуально. Кто-нибудь знает как ставить каждый ion-popover? Ps Я использую ioni c 5 с angular

Вот только то, что я мог бы сделать, изменив глобально. Это я добавил в переменных. S css

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

Answer 1

ion-popover имеет свойство под названием cssClass. Вы можете назначить уникальный класс каждому из них, а затем настроить таргетинг на него из любого места, как указано здесь .

 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;
   }
  }
}
}