# Application

# API

• v-app
• v-main

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

以下は、Vuetify のデフォルトのアプリケーションマークアップの例です。 app プロパティを適用すれば、レイアウト要素はどこにでも配置できます。 ページコンテンツとレイアウト要素を連動させるためのキーコンポーネントがv-mainです。 v-mainコンポーネントは指定された app コンポーネントの構造に応じて動的なサイズになります。 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にはmainのTRタグが割り当てられます。これはドキュメントやアプリケーションのbodyのメインコンテンツ領域であることを示します。