Как разместить popover в Ionic 2

Ответ 1

Просматривая код, кажется, нет выбора для позиции popover. Однако при открытии всплывающего окна в результате нажатия пользователем чего-либо, его можно позиционировать по событию click. Мы можем использовать эти знания и для ручного позиционирования:

let pop = this.popoverCtrl.create(MyPopover);

let ev = {
  target : {
    getBoundingClientRect : () => {
      return {
        top: 100
      };
    }
  }
};

pop.present({ev});

Несколько вещей, на которые стоит обратить внимание:

• Вы можете установить значение для top, left или обоих.
• Значения должны быть указаны в пикселях, как числа.
• Если top или left не заданы, то для этого значения используется обычный алгоритм позиционирования.

Я был бы рад узнать, есть ли лучший способ, но пока это лучшее, что я мог придумать.

Это, безусловно, работает в Ionic2 и 3, рад, что кто-то подтвердил, работает ли он также в Ionic4!

Ответ 2

Хотя приведенный выше код работает для некоторых людей, но я нашел лучшее решение, в котором передается cssClass на popover.

Чтобы использовать cssClass, вы должны объявить его глобально в app.scss, как показано ниже:

.custom-popover .popover-content {
  width: 80%;
  top: 70px;
  left: 30px;
  bottom: 70px
}

Ответ 3

если вы хотите всплывающее окно рядом с кнопкой te, передайте в функцию create() событие, как это

//home.html

<button ion-button icon-only (click)="presentRadioPopover($event)">
        <ion-icon name="more"></ion-icon>
 </button>

//home.ts

 presentRadioPopover(event) {
    const popover = this.popoverCtrl.create(HomepopoverPage);
    popover.present({
      ev: event
    });
  }

Ответ 4

Я нашел более простое решение, добавив стили в app.scss(Globle CSS)

.popover-content{
  top: 60px !important;
}

Ответ 5

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

Добавить опцию cssClass:

let popover = this.popoverCtrl.create(PopoverPage, {}, {cssClass: 'popover-top-right'});

popover.present({
  ev: event
});

и где-нибудь использовать следующий CSS:

.popover-top-right .popover-content {
  transform: translateY(-120%) !important;
}

Это решение несколько похоже на предложенное Mnemo, но более общее, так как вам не нужно указывать фиксированные координаты. Хотя это не так настраиваемо, как принятый обходной путь от Schlaus.

Таким образом, вы можете использовать translateXY(-100%, -100%) чтобы поместить всплывающее окно в левый верхний угол и т.д. Возможно, вам нужно !important для переопределения ионных стилей (или вместо этого использовать более специфичный селектор CSS).

Ответ 6

Для меня проблема была решена путем установки позиции с помощью css. Сначала вы должны установить cssClass вашего элемента:

Код компонента/страницы:

async showPopover (ev) { 
 component: myComponent,
 event: ev,
 cssClass: 'myPopoverStyle'
}

Затем вы должны установить глобальный CSS (как правило, app.scss).

app.scss

.myPopoverStyle .popover-content{
    top: 60px !important;
}

Ответ 7

Так что я нашел что-то похожее для моего недавнего проекта, где я хотел поместить ионный поповер вниз, а не в положение по умолчанию. Нечто похожее на Android Bottom Sheet.

Изучив несколько ответов и немного поработав самостоятельно, я нашел способ это исправить.

Шаг 1. Назначьте класс всплывающему окну:

this.popover = await this.popoverController.create({
      component: AddToCartComponentComponent,
      event: ev,
      translucent: true,
      animated: false,
      cssClass: 'bottom-sheet-popover'
    });

Шаг 2. Добавление CSS

После того, как вы назначите пользовательский класс для вашего всплывающего элемента во время создания, перейдите к глобальному CSS и реализуйте следующие настройки:

.bottom-sheet-popover .popover-content {
    width: 100% !important;
    left: 0 !important;
    bottom: 0 !important;
    right: 0 !important;
    top: calc(100% - 200px) !important;
    max-height: 200px;
    min-height: 200px; 
  }

Вот оно. Вы сделали.

Примечание: это хорошо работает с Ionic 4.