UIでは、複数のページを管理するための、3つの主要なナビゲーション(ページ遷移)系のコンポーネント(VOnsNavigator、VOnsTabbar、VOnsSplitter)を用意しています。これらのコンポーネントは、子コンポーネントを持つことを前提としているため、その管理も行う必要があります。これらのコンポーネントを併用する場合には、使用する組み合わせ/順序によって、コンポーネントの挙動が変わるので、注意が必要です。他のコンポーネントに関しては、DOMツリー内の単なる「葉」(リーフ、子のないノード)と考えることができます。使用して、「Home」・「Forms」・「Animations」セクションで構成されたタブバーを作成しています。それぞれのセクションには、共通するサイドメニューを持たせるようにします。内でページを切り替えることができます。遷移先のページでは、他のコンポーネントを使用して作成したページを表示させています。これらのページでは、タブバーおよびサイドメニューの表示を行いません。使用すると、ページのプッシュ(push)によって画面遷移が実現され、ページがポップ(pop)されるまで、遷移元のページは背面に隠された状態になっています。UIでは、カスタマイズ可能なコンポーネントを提供しています。必要に応じて、このコンポーネントを別のコンポーネントでラップすることができます。使用して、カスタマイズの例を記します。使用時には、通常、ラベルとタイトルを適宜設定する必要があり、加えて別のボタンをツールバー右側に置くことがよくあります。ラップした単一ファイルコンポーネント(CustomToolbar.vue)を作成しておきます。name="right"></slot></div></v-ons-toolbar></template>すると次の1行で、カスタマイズされたツールバーを追加することができます。使用すれば上書きできます。すべての場合に対応できる、もっと手軽な方法もあります。行うポップ処理を上書きすることです。this.$store.commit('navigator/pop')"></v-ons-navigator>加えて、optionsプロパティを指定すれば、ページ遷移時のアニメーション効果も変更することができます。Tabbarに関してiOSでは通常、タブにはアイコンが置かれています。Android(マテリアルデザイン)では、ほとんどの場合ラベルが貼られているだけです。プラットフォームがiOSの場合だけ、アイコンを表示するように設定することができます。次のように、Androidの場合には、iconプロパティにnull値を渡すように記述します。Home}Androidのタイトルに関しても、次のように、プラットフォーム別の処理を置けます(なお、マテリアルデザインでは通常、タブを切り替えたときでもタイトルは固定されています)。refresh)処理も、下記のように簡単に行えます。180"></v-ons-icon>引っ張った時に、アイコンにCSSアニメーションをつける処理も忘れずに記述しましょう。ease-in-out)Formsに関してこのアプリでは、コンポーネント間での値の共有は行っていません。よって、storeにも値は保存されていません。次のようにVOnsModelディレクティブと算出プロパティを使用すれば、簡単に紐づけることができます。newValue);}}}Vuexこのアプリでは、ナビゲーション系のコンポーネントを複数組み合わせているため、各コンポーネントの操作をアプリのどこからでも行えると便利です。これには、Vuexを利用できます。セクションを直接変更する場合に便利です。Vuexは必須ではありません。Vuex抜きでも、同じ処理を実現することはできます。要望があれば、各コンポーネントの操作をアプリのどこからでも行えるようにするためのstoreオブジェクトの雛形をvue-onsenuiパッケージに追加し、利用できるようにすることも検討しています。UIでは、プッシュ(push)とポップ(pop)操作を基本とした、ルーティング用のコンポーネントを複数用意しています(使い勝手がよく、パワフルなルーティング機能を提供します)。stack)を保持することができ、それら複数のスタックを組み合わせて使用することもできます。よって、なんらかのルーターを新規に追加する必要は見いだせません。Routerの導入も検討しています。この件に関しては、近日中に、なんらかのご案内ができるかと思います。UI開発陣の熱量を感じていただけましたでしょうか。Vueを使用したハイブリッドアプリの開発の際には、ぜひvue-onsenuiをお試しください。開発は、完全にオープンにしており、随時、皆様からの問題点のご報告、プルリクエスト、ご意見・ご要望を受け付けております。UIチームでは、今後も精力的に、Vue開発者向けに改良や修正を加えていく予定です。UIフレームワーク」にするため、今後ともご支援・ご協力のほどよろしくお願いいたします。UIは、ハイブリッドアプリ向けUIを作成するためのオープンソースのライブラリーです。詳細は、GitHubページをご確認ください。Watabeフリーランスの翻訳家。インターネット・通信業界で10年ほど翻訳を経験したあと、2013年からフリーランスに。直訳ではない、わかりやすい翻訳を心がけています。