Иони c 5 Положение всплывающего окна - PullRequest
Новая
       85

Иони c 5 Положение всплывающего окна

0 голосов
/ 20 июня 2020

Я использую ion-popover .

В примере в документации, когда вы нажимаете три точки в правом верхнем углу, всплывающее окно отображается рядом с нажатой кнопкой .

Как лучше всего это воспроизвести? Есть ли встроенный способ сделать это?

Так как я не нашел способа, я пытаюсь настроить стили для всплывающего окна вручную, но это тоже не работает.

Мой page.ts 

const popover = await this.popoverController.create({
  component: OptionsComponent,
  cssClass: 'my-custom-class',
  event: ev
});
return await popover.present();

Мой global.s css

.my-custom-class .popover-content {
  position: absolute;
  right: 0;
  top: 0;
}

Я что-то делаю не так? Есть ли лучший способ подойти к этому?

1 Ответ

3 голосов
/ 20 июня 2020

Объясняется в документации :

Чтобы представить всплывающее окно, вызовите метод present для экземпляра всплывающего окна. Чтобы расположить всплывающее окно относительно элемента, на который был выполнен щелчок, событие щелчка необходимо передать в параметры текущего метода.

HTML

<div (click)="showPopover($event)">
    <div>AAA</div>
</div>

In ваш класс, передайте событие в качестве аргумента вашему методу: 

showPopover(event) {
    const popover = await this.popoverController.create({
      event,
      component: OptionsComponent,
      cssClass: 'my-custom-class',
    });
    return await popover.present();
}

Нет необходимости в дополнительных CSS, если вы не хотите стилизовать содержимое вашего модального окна.

...