Ionic 2にポップオーバーを配置する方法

Question

Ionic 2に手動でポップオーバーを配置するにはどうすればよいですか？

ポップオーバーコントローラが位置をインラインスタイルで設定するため、cssクラスの位置を設定できません。

Answer 1

コードを見ると、ポップオーバーの位置にはオプションがないようです。ただし、ユーザーが何かをタップした結果としてポップオーバーを開くと、clickイベントによって配置されます。我々としても、手動位置決めのためのその知識を使用することができます。

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

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

pop.present({ev}); 

いくつかのことに注意すること：

• あなたはtop、left、またはその両方の値を設定することができます。
• 値はピクセル数で指定する必要があります。
• topまたはleftが指定されていない場合、通常の測位アルゴリズムがその値に使用されます。

もっと良い方法があるかどうかは分かりましたが、これまでのところこれが私が思いつく最高のものです。

Answer 2

しかし、上記のコードは一部の人には役立ちますが、popoverでcssClassを渡すより良いソリューションが見つかりました。以下に示すように

のCssClassを使用するには、あなたはapp.scssでグローバルに宣言する必要があります：あなた.TSファイルで

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

を、あなたは以下のようなクラスを渡すことができます：

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

 
popover.present();