Vuetify

ショップ

企業向け

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 はアプリケーションで一度のみ使用されるべきです。

確認したいコンポーネントを下から選び、利用できる props、slots、events、functions を確認してください。

これは Vuetify のデフォルトのアプリケーションマークアップの例です。app プロパティを適用する限り、レイアウト要素はどこにでも配置できます。このすべての主要なコンポーネントはv-mainです。指定したappコンポーネントの構造に応じて、このサイズは動的に設定されます。v-bottom-navigationを含む上記のコンポーネントの一部またはすべての組み合わせを使用できます。

vue-router を使用する場合は、ビューをv-mainの中に配置することをお勧めします。

以下は 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プロパティを参照します。

デフォルトでは、v-main には mainTR タグが割り当てられ、それがドキュメントやアプリケーションの body のメインコンテンツ領域であることを示します。

準備はいいですか? 以下から続きが読めます。

Caught a mistake or want to contribute to the documentation? Edit Layout on GitHub!