Monaca × Onsen-UIでタブバー実装

Onsen-UIのコンポーネントを利用して

iPhoneアプリっぽいタブバーを用意してみる。

Onsen-UIのリファレンスから使いたいパーツのソースを

もってくれば使える。

ja.onsen.io

タブバーに関しては、MonacaのOnsen-UIのテンプレに用意されているものを利用。

デフォルトで以下が記載されている

    <ons-tabbar var="tabbar">

        <ons-tabbar-item

            icon="home"

            label="Home"

            page="navigator.html"

            active="true"></ons-tabbar-item>

        <ons-tabbar-item

            icon="comment"

            label="Comments"

            page="page2.html"></ons-tabbar-item>

        <ons-tabbar-item

            icon="gear"

            label="Settings"

            page="page3.html"></ons-tabbar-item>

            <ons-tabbar-item

            icon="gear"

            label="Settings"

            page="page4.html"></ons-tabbar-item>

    </ons-tabbar>

見た目

タブを切りかえると指定しているhtmlファイルの要素が表示される模様。

これは楽チン。

<ons-tab-bar-item>を増やして、htmlファイルを追加すると

ちゃんと紐付けられて画面遷移ができた。