現在、シンプル体重管理のAndroid版およびiOS版の改造を行っていますが、Onsen UIの４つあるons-tabの１つを削除したところ、横に間延びした感じなので、中央に寄せる方法がないか考えました。
今回は、ons-tabを中央に寄せる方法について説明したいと思います。
結論から申しますと、ons-tabの両脇に空のdivタグを挿入します。
ons-tabが３つの場合、1/5のサイズになります。
<ons-tabbar position="bottom" tab-border>
<div class="tabbar__item"></div>
<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>
<div class="tabbar__item"></div>
</ons-tabbar>通常、ons-tabが３つある場合、１つのタブが横幅に対して1/3のサイズになります。
上記コードのように、ons-tabの両脇に空のdivタグを挿入した場合、1/5のサイズになります。
中央に寄った感じになります。
1/7のサイズです。
横幅が小さいスマートフォンですと、タブを押すのに苦労しそうです。
タブレットのサイズですと、丁度よいかもしれません。
 | 新品価格 |
