OnsenUIのtabbarで固定ページを差し込む

課題

onsenuiにはtabbarでページを簡単にタブ表示できるようになっている。ただ、ページ全体が切り替わるため、切り替わりに関わらず、固定の共通的なページを表示したい場合は一工夫必要となる。
１時間悩んだので、備忘として残す。

やりたいことイメージ

tab1↔tab2での画面遷移でも共通ページはそのまま表示させておく。

実現方法

まず、共通ページをどう出すか？
OnsenUIの一般的なつくりとして、ons-toolbarとons-tabbarの組み合わせがあるので、ons-toolbarに共通ページとするコンテンツを差し込んだ。

<ons-toolbar>
 <!-- 共通ページコンテンツ -->
</ons-toolbar>

ただ、このままだと、複数行が必要なコンテンツの場合はtoolbarのスタイルで高さが足りないため、高さ指定をしてやる必要がある。

<ons-toolbar style="height: 40%" >
 <!-- 共通ページコンテンツ -->
</ons-toolbar>

次にtabbarだが、ここでtabbarを差し込むとページが崩れてしまう。
そこで以下のように、toolbar側でdisplay:blockを指定してやる。
OnsenUIでhtml展開されたものを開発者モードで確認した際に、displayがflex設定されており、そこで影響が出ているように見えていたため、displayを強制的に変更させた。

tabbar側は、margin-top指定でどこからtabbarを表示させるかを設定してやる。

<ons-toolbar style="height: 40%;display:block" >
 <!-- 共通ページコンテンツ -->
</ons-toolbar>
<ons-tabbar position="top" style="margin-top:45%">
</ons-tabbar>

おわり