# Application

Vuetifyでは、v-app コンポーネントおよびv-navigation-drawer, v-app-bar, v-footer などのコンポーネントの app prop が、<v-main> コンポーネントの周囲を適切なサイズでアプリケーションをブートストラップするのに役立ちます。 これにより、レイアウトのサイズを管理する手間をかけずに、真にユニークなインターフェイスを作成できます。 v-appコンポーネントは必須です。 これは、Vuetifyの多くのコンポーネントと機能のマウントポイントであり、デフォルトのアプリケーション_variant_ (dark/light) を子コンポーネントに伝播し、Safariなどのブラウザーでの特定のクリックイベントに対する適切なクロスブラウザーサポートを保証します。 v-appは、アプリケーション内で一度だけ レンダリングする必要があります。

# API

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

これは、Vuetifyのデフォルトのアプリケーションマークアップの例です。 app プロパティを適用する限り、レイアウト要素はどこにでも配置できます。 このすべてのキーコンポーネントは 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: Is always placed at the top of an application with a lower priority than v-system-bar.
  • v-bottom-navigation: Is always placed at the bottom of an application with a higher priority than v-footer.
  • v-footer: Is always placed at the bottom of an application with a lower priority than v-bottom-navigation.
  • v-navigation-drawer: Can be placed on the left or right side of an application and can be configured to sit next to or below v-app-bar.
  • v-system-bar: Is always placed at the top of an application with higher priority than v-app-bar.

# Application service

The application service is used to configure your Vuetify layout. It communicates with the v-main component so that it’s able to properly size the application content. It has a number of properties that can be accessed:

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

These values are automatically updated when you add and remove components with the app prop. They are NOT editable and exist in a READONLY state. You can access these values by referencing the application property on the $vuetify object.

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

# アクセシビリティ

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

準備はできましたか?

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