OnsenUIを利用して自前のwebサイトをSPAにしよう！企画のアレです。

これの続き↓

組み合わせて使用する記事が少ないのなんのって！一応公式にサンプルがあるのだけど他の要素も色々入っていて結構ボリュームあって、シンプルに理解するには時間がかかった・・・ということで書きました。

これを読んだらきっと分かるはず（分かってほしい）

簡単だよ！

今回はサンプルとして、タブ2つとタブの画面それぞれから詳細画面に移動できる＆戻れるものを作ります。簡単な一覧と詳細のイメージ。（詳細共通にして計3ページ）

構成の確認

こんな感じで入れ子に↓

これに共通のヘッダー（ツールバー）をつける時にはons-splitter-contentにons-toolbarなどを入れたら良いし、ons-splitter-side内にサイドメニューが書けます（今回は割愛しますがこちらは公式見るだけですんなりできるはず）

とりあえずこれだけ覚えておけばいいやつ

ons-splitter：縦に分割する画面や横からスワイプで表示するスライディングメニューを作る
ons-navigator：ページの管理、ナビゲーション
ons-tabbar：タブでコンテンツの切り替え

画像の構成は、

ons-splitterでサイドメニュー(side)と中身(content)を分けて、
ons-navigatorの中に出るものがページとして、
タブを使う場合はons-tabbarのtabで切り替え

としています。
タブを使わないページもあるはずなので。

これを踏まえてソースコードを見ていきます。

（railsに乗っていてjsフレームワーク入れていない場合には、とりあえず確認できるようにroutes.rbにmy-tabbarとページのパスの記載を）
routes.rbの書き方が書いてある記事↓
（SPAだから正確にはURLの指定じゃないけど、書き方は一緒）

slim(html)ファイル分割してます。

index：全体管理のページ、トップページ
my-tabbar：タブ
pageA：タブあり（タブで表示）、アクセス時activeのページ
pageB：タブあり（タブで表示）、アクセス時非activeのページ
pageC：タブなし。AとBの次のページ（詳細とか）

index.slim

トップページにタブバーありのページを指定するよ

ons-splitter
  ons-splitter-side
    // 省略
  ons-splitter-content
    ons-navigator id="page-navigator" page="my-tabbar"

ons-splitter(-content) > ons-navigator > ons-tabbar。

my-tabbar.slim

tabbarだけで1ファイルにしておくね

ons-page id="my-tabbar"
  ons-tabbar
   ons-tab [page="pageA" label="A" icon="ion-home, material:md-home" badge="7" active]
   ons-tab [page="pageB" label="B" icon="md-settings"]

ons-pageでこれはコンポーネントだよ！と言っている。無いと怒られるので注意。

page="タブを押したら表示するコンポーネント"
label="タブの文字"
icon="タブのアイコン"
badge="バッヂ（ある場合）の数"
active：my-tabbarで最初にアクティブになっているタブ

pageA.slim

ons-page id="pageA"
  .content
    p Aだよ
    a onclick="document.querySelector('#navigator').pushPage('pageC')"
      button Cに遷移するよ

pageB.slim

ons-page id="pageB"
  .content
    p Bだよ
    a onclick="document.querySelector('#navigator').pushPage('pageC')"
      button Cに遷移するよ

pageC.slim

ons-page id="pageC"
  .content
    p タブなしCだよ
    a onclick="document.querySelector('#navigator').popPage()"
      button 前表示してたページに戻るよ(AかB)