Vuetify では、 v-app コンポーネントや v-navigation-drawer, v-app-bar, v-footerなどのappプロパティが、<v-main>周りで適切なサイズになる事でアプリケーション作成を手助けします。レイアウトのサイズを決める事に苦労することなく本当にユニークなUIを実現することができます。v-app コンポーネントはすべてのアプリケーションで必要です。 v-app コンポーネントは多くのVuetifyコンポーネントのマウントポイントであり、デフォルトアプリケーションのvariant (dark/light) を子コンポーネントに伝達します。そしてsafariなど多種ブラウザに対応しています。 v-app はアプリケーションで一度のみ使用されるべきです。
アプリケーションが適切に動作するために、確実に v-app コンポーネントでラップしてください。このコンポーネントがクロスブラウザ対応に必要です。Vuetifyは1ページでの複数の独立したVuetifyインスタンスをサポートしていません。'v-app'はアプリケーションのどこにでも配置できますが、1つであり、かつ全てのvuetifyコンポ―ネントの親でなくてはなりません。
これは Vuetify のデフォルトのアプリケーションマークアップの例です。app プロパティを適用する限り、レイアウト要素はどこにでも配置できます。このすべての主要なコンポーネントはv-mainです。指定したappコンポーネントの構造に応じて、このサイズは動的に設定されます。v-bottom-navigationを含む上記のコンポーネントの一部またはすべての組み合わせを使用できます。
vue-router を使用する場合は、ビューをv-mainの中に配置することをお勧めします。
app propを適用すると、レイアウト要素に position: fixed が自動的に適用されます。アプリケーションが absolute 要素を呼び出す場合、absolute プロパティを使用して、この機能を上書きできます。
以下は app propをサポートし、アプリケーションのレイアウト要素として使用できるすべてのコンポーネントのリストです。これらのコンポーネントは組み合わせて使用することができ、それぞれのコンポーネントは常に1つだけ存在していなければなりません。しかし、それらを入れ替えることができ、レイアウトはそれに対応します。様々なレイアウトを構築する方法を示すいくつかの例については、既成レイアウト ページをチェックしてください。
これらの各アプリケーションコンポーネントには、レイアウトシステム内で影響する指定された場所と優先順位があります。
- v-system-bar:は常に
v-app-barよりも高い優先度を持ち、アプリケーションの最上部に配置されます。 - v-app-bar: は常に、
v-system-barよりも低い優先度でアプリケーションの最上部に配置されます。 - v-navigation-drawer: アプリケーションの左側または右側に配置することができ、
v-app-barの隣または下に配置するように設定することができます。 - v-footer: 常にアプリケーションの下部で、
v-bottom-navigationよりも優先度が低く配置されます。 - v-bottom-navigation: 常にアプリケーションの下部に配置され、
v-footerよりも高い優先度となります。
簡単に言えば、v-system-bar は常に v-app-bar の上にあり、v-navigation-drawer は左右どちらにも配置でき、v-footer は常に v-bottom-navigation の上に配置されているということです。
Vuetify Application
アプリケーションサービスはVuetifyのレイアウトを設定するために使用されます。アプリケーションサービスは v-main コンポーネントと通信し、アプリケーションコンテンツのサイズを適切に調整します。アプリケーションサービスには、アクセス可能なプロパティがいくつかあります:
これらの値は、app propを使ってコンポーネントを追加したり削除したりしたときに自動的に更新されます。これらの値は編集できず、 READONLY の状態で存在します。これらの値にアクセスするには、$vuetifyオブジェクトのapplicationプロパティを参照します。