# レイアウト

# 使い方

Vuetifyには、組み込みのレイアウトシステムが付属しています。 v-app-bar や v-footer などのコンポーネントは、 app という特別なプロパティをサポートしています。 このプロパティは、対応するコンポーネントがアプリケーションのレイアウトの一部であることを Vuetify に通知します。 このセクションでは、レイアウト システムの仕組み、複数のレイアウト コンポーネントを組み合わせる方法、およびそれらをすべて動的に変更する方法の基本について説明します。

Vuetifyには、 v-app と v-main という2つのプライマリレイアウトコンポーネントがあります。 v-app コンポーネントはアプリケーションのルートであり、デフォルトの Vue エントリポイント <div id="app"> を直接置き換えます。 v-main コンポーネントは、 main HTML 要素とアプリケーションの content ルートのセマンティックな置き換えです。 VueがDOMにマウントされると、レイアウトの一部であるVuetifyコンポーネントは、現在の高さや幅をフレームワークコアに登録します。 v-main コンポーネントはこれらの値を受け取り、コンテナのサイズを調整します。

わかりやすく説明するために、基本的なVuetifyレイアウトを作成しましょう:

<v-app>
  <v-main>
    Hello World
  </v-main>
</v-app>

テンプレートにレイアウトコンポーネントがない場合、 v-main はサイズを調整する必要はなく、ページ全体を占有します。 v-app-barをv-main要素の上に追加することで変更してみましょう:

<v-app>
  <!-- appプロパティが必要です -->
  <v-app-bar app></v-app-bar>

  <v-main>
    Hello World
  </v-main>
</v-app>

v-app-bar に app プロパティを与えたので、Vuetifyはレイアウトの一部であることを認識しています。 v-main は、バーの登録された高さを取得し、その利用可能なコンテンツ領域から同じ量を削除します。 - この場合、64px のスペースが v-main のコンテナの上部から削除されます。

最後に、v-containerコンポーネントでコンテンツをラップしてgutterを追加してみましょう:

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

  <v-main>
    <v-container>
      Hello World
    </v-container>
  </v-main>
</v-app>

Up next, we take our newly established baseline and enhance it with new layout components and customization options.

# Combining layout components

More to follow

# Dynamic layouts

More to follow