ロンラン株式会社 CEO 兼 CTO の武部です。
Vue 2 & Vuetify 2 で開発していた主力製品を Vue 3 & Vuetify 3 へと移行中です。
その総まとめはいずれまた記事にしますが、いくつかの機能やコンポーネントにおける違いの吸収の仕方について、情報を先出ししてゆきたいと思います。
今回は基本的なレイアウトについてです。
レイアウトを構成するコンポーネントはスタック順に表示されるようになった
たとえば、Vuetify 2 において一律「ブラウザの上部から下部を埋める最大の高さ」で表示されていた Navigation Drawer が、Vuetify 3 にアップグレードしてから「AppBar を除く領域」に表示される場合があります。
| Vuetify 2 | Vuetify 3 |
|---|---|
 |
 |
この違いを生成されたソースで一応確認してみます。次のとおりです。
| Vuetify 2 | Vuetify 3 |
|---|---|
 |
 |
height からは AppBar の高さ分を丁寧に取り除きつつ、top の位置も AppBar の高さ分、ずらされていますね。
これは、Vuetify 3 になってからレイアウトシステムが大胆に変更されていることに起因しています。
Meterial Design ガイドライン
Material Design の Navigation Drawer ガイドライン には、この異なる表示のごとのガイドは存在していません。ケースバイケースで選択すればよいので、言及されていないのでしょう。
新しい UI 表現ができるようになった
コード自体を修正するのは容易で、各コンポーネントのスタック順を調整してゆきます。
Navigation Drawer を AppBar に重ねて表示したいなら、AppBar の前に Navigation Drawer のコードを先に配置します（試してみましたが、あっさりうまくいきました）。
これまでと違ってかなりレイアウトの自由度が増えたため、どのようにレイアウトするのが操作性や UI においてベストかは、この機会にあらためて考えてみるのもよいかなと思います。
ちなみに私たちの製品では、新しく表現可能になった UI レイアウトもありかなと考えています。
- 固定ヘッダ領域を隠さず、メインコンテンツ領域にナビゲーションバーを出現させた方が、ヘッダ部のナビゲーションメニュー操作を奪わず、ユーザーフレンドリー
- 実際これまでの表示をあらためて検証してみると、ドロワーを起動するために押したボタンが隠れてしまう点なども少し違和感ある
Vuetify 3 化において、こういった表示上の差異が生まれてくる箇所がちらほらありますが、やっきになって Vuetify 2 版を完全再現しようとせず、よく吟味検討してみるのもひとつかなと感じました。
Discussion