上の画面を見てください。
下のタブは大まかなカテゴリー選択の役目を補っている、ons-tabです。
一番左の豆電球アイコンが現在アクティブな状態です。
中央上の【新着、カテゴリ別、ランキング】は先程の豆電球によって呼び出されたページ内のons-tabです。
つまりこの画面は【左下の電気マークTab】内の【新着】を見ている所です
LineやMessegeアプリ等であるような流行りのタブの中にタブが有るような感じです。
中の要素としてButtonが表示されてはいますが、上のTabと重なってしまい正しく表示されません。。他の解像度では上手くいくものもありますが、ほとんどうまくいきません・
どうやったら正しく表示できるのでしょうか?
//Main.html
<html> <ons-page> <ons-toolbar position="top" style="padding:auto;"> <div class="center" >My App -</div> </ons-toolbar> <ons-list> <ons-tabbar position="bottom" > <ons-tab page="page1.html" icon="ion-lightbulb" active></ons-tab> <ons-tab page="page2.html" icon="ion-plus-round"></ons-tab> <ons-tab page="page3.html" icon="ion-android-star"></ons-tab> <ons-tab page="page4.html" icon="ion-ios-home" ></ons-tab> </ons-tabbar> </ons-list> </ons-page> </html>
//page1.html
<ng-include src="'ranking.html'" ></ng-include> <ons-template id="ranking.html"> <ons-page> <ons-list> <ons-tabbar position="top" > <ons-tab page="rank_new.html" label="新着" active="true"></ons-tab> <ons-tab page="rank_category.html" label="カテゴリ別" ></ons-tab> <ons-tab page="rank_top.html" label="ランキング" ></ons-tab> </ons-tabbar> <ons-template id="rank_new.html" > <ons-page> <ons-button modifier="large" class="login-button">Button</ons-button> <ons-button modifier="large" class="login-button">Button</ons-button> <ons-button modifier="large" class="login-button">Button</ons-button> </ons-page> </ons-template> ・ ・//後は別のページ処理 ・
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。