# Application

Vuetifyでは、v-appコンポーネント、ならびに v-navigation-drawerv-app-barv-footer などのコンポーネントの app プロパティによって、<v-main>コンポーネントを中心とする適切なサイジングが行われます。これはアプリケーションのブートストラップに役立ちます。 そのため、レイアウトのサイズ指定と格闘することなく、真にユニークなインターフェースを作り上げることができます。 v-app は、すべてのアプリケーションで必須のコンポーネントです。 v-app は Vuetify の多くのコンポーネントや機能のマウントポイントとなり、デフォルトのアプリケーションの variant (dark/light) を子コンポーネントに伝播させたり、Safari などのブラウザーで特定の種類のクリックイベントに対する適切なクロスブラウザーサポートを提供したりします。 v-app は、アプリケーション内で一度だけレンダリングする必要があります。

# API

# デフォルトのアプリケーションマークアップ

以下は、Vuetify のデフォルトのアプリケーションマークアップの例です。 app プロパティを適用すれば、レイアウト要素はどこにでも配置できます。 The key component to making your page content work together with layout elements is v-main. The v-main component will be dynamically sized depending upon the structure of your designated app components. v-bottom-navigation を含め、上のようなコンポーネントのいずれか、またはすべての組み合わせを使用できます。

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

<!-- App.vue -->

<v-app>
  <v-navigation-drawer app>
    <!-- -->
  </v-navigation-drawer>

  <v-app-bar app>
    <!-- -->
  </v-app-bar>

  <!-- アプリケーションのコンポーネントに基づいてコンテンツのサイズを決定 -->
  <v-main>

    <!-- アプリケーションに適切なgutterを提供 -->
    <v-container fluid>

      <!-- vue-routerを使用する場合 -->
      <router-view></router-view>
    </v-container>
  </v-main>

  <v-footer app>
    <!-- -->
  </v-footer>
</v-app>

# Application コンポーネント

以下は app prop をサポートするすべてのコンポーネントのリストです。これらすべてがアプリケーションのレイアウト要素として使用できます。 これらは組み合わせることができますが、それぞれのコンポーネントが存在できるのは常に1つのみです。 ただし、コンポーネントを交換することは可能で、レイアウトもそれに対応します。 どのようなレイアウトが作成できるかを紹介するさまざまな例については、 ワイヤフレーム ページをご覧ください。

これらのアプリケーション用の各コンポーネントは、レイアウトシステム内で影響を与える既定の領域と優先順位を持ちます。

  • v-app-bar: 常にアプリケーションの最上部に配置されます。優先度は v-system-bar より低くなっています。
  • v-bottom-navigation: 常にアプリケーションの下部に配置されます。v-footerよりも高い優先度となっています。
  • v-footer: v-bottom-navigation よりも低い優先度で、常にアプリケーションの下部に配置されます。
  • v-navigation-drawer: アプリケーションの左側または右側に配置されます。設定により、v-app-bar の横または下に配置できます。
  • v-system-bar: v-app-barよりも高い優先度で、常にアプリケーションの上部に配置されます。

# Application service

アプリケーションサービスは、Vuetify のレイアウトの設定に使用します。 アプリケーションサービスは v-main コンポーネントと通信し、アプリケーションのコンテンツのサイズを適切に調整します。 アクセス可能ないくつかのプロパティを以下に紹介します。

{
  bar: number
  bottom: number
  footer: number
  insetFooter: number
  left: number
  right: number
  top: number
}

これらの値は、app プロパティでコンポーネントの追加や削除を行うと自動的に更新されます。 これらの値は編集できず、_読み取り専用_です。 これらの値にアクセスするには、$vuetify オブジェクトのapplication プロパティを参照します。

console.log(this.$vuetify.application.top) // 56

# アクセシビリティ

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

準備はできましたか?

Vuetifyのチームが選ぶ関連コンテンツで他の学習トピックに進むか、下のナビゲーション リンクでページ間を移動できます。
GitHub でこのページを編集する
最終更新日:09/18/2021, 7:08:41 AM