前回の記事で、ons-tabを中央に寄せる方法としてdivタグを挿入する方法を説明しましたが、今回は第二弾として、別の方法について説明したいと思います。
結論から申しますと、ons-tabbarをCSSによってサイズ調整する方法です。
今回の場合、タブの数が３つなので、バランスを考えて両脇の空白箇所を12.5％、ons-tabbarを75％とします。
<ons-tabbar position="bottom" tab-border>
<ons-tab label="Tab 1" icon="home" page="tab1.html" active></ons-tab>
<ons-tab label="Tab 2" icon="home" page="tab2.html"></ons-tab>
<ons-tab label="Tab 3" icon="home" page="tab3.html"></ons-tab>
</ons-tabbar>.tabbar {
padding: 0 12.5%;
width: 75%;
}
.tabbar__border {
left: initial;
}iOSの場合
Androidの場合
シンプル体重管理は、この方法を採用しました。
 | 新品価格 |
