Jak ustawić popover w Ionic 2

Question

Jak ręcznie ustawić popover w Ionic 2?

Nie mogę ustawić pozycji w klasie css, ponieważ kontroler popover ustawia pozycję w stylu śródliniowym.

Answer 1

Przeglądając kod, nie wydaje się, że istnieje opcja pozycji popover. Jednak podczas otwierania okna popover w wyniku kliknięcia przez użytkownika, można go ustawić za pomocą zdarzenia kliknięcia. Możemy wykorzystać tę wiedzę do ręcznego pozycjonowania, a także:

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

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

pop.present({ev}); 

kilka rzeczy do uwaga:

• Można ustawić wartość dla top, left, albo jedno i drugie.
• Wartości należy podać w pikselach, jako liczby.
• Jeśli nie podano top lub left, to dla tej wartości stosowany jest zwykły algorytm pozycjonowania.

Z przyjemnością dowiem się, czy jest lepszy sposób, ale jak dotąd jest to najlepsze, co mogę wymyślić.

Answer 2

Chociaż powyższy kod działa dla niektórych osób, ale znalazłem lepsze rozwiązanie, gdy przechodzę cssClass na popover.

Aby skorzystać z CssClass, należy ją zadeklarować globalnie w app.scss jak pokazano poniżej:

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

W pliku .TS można przechodzić z klasy jak poniżej :

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

 
popover.present();