Chapter 05無料公開

Main Contents (v-main)

超Lチカ団編集局
超Lチカ団編集局
2023.09.12に更新
このチャプターの目次

Main Contents (v-main)

ページに表示させたいメインコンテンツは、<v-main> 内に記述します。<v-main> 内に記述することで、アプリケーションバーの下、フッターの上にコンテンツが配置されます。

コード

<template>
  <v-app>
    <v-app-bar color="primary">
      <v-app-bar-title>
        Application
      </v-app-bar-title>
    </v-app-bar>

    <v-main>
      Main Contents
    </v-main>
  </v-app>
</template>

結果:

image.png

表示したいコンテンツを <v-main> で囲わないと、アプリケーションバーと重なってしまい、うまく表示されません。

コード:

<template>
  <v-app>
    <v-app-bar color="primary">
      <v-app-bar-title>
        Application
      </v-app-bar-title>
    </v-app-bar>
    <p>hoge 1</p>
    <p>hoge 2</p>
    <p>hoge 3</p>
    <p>hoge 4</p>
    <p>hoge 5</p>
  </v-app>
</template>

結果:

image.png

<v-main> で囲わないと、文字列の先頭がアプリケーションバーと重なってしまいます。

コード:

<template>
  <v-app>
    <v-app-bar color="primary">
      <v-app-bar-title>
        Application
      </v-app-bar-title>
    </v-app-bar>
    <v-main>
      <p>hoge 1</p>
      <p>hoge 2</p>
      <p>hoge 3</p>
      <p>hoge 4</p>
      <p>hoge 5</p>
    </v-main>
  </v-app>
</template>

結果:

image.png

<v-main> で囲まれた文字列は、アプリケーションバーと重ならないように、自動的に配置されるようになります。

なお <v-main><v-app> もしくは <v-layout> の内側に配置する必要があります。 一応、<v-main> を同じページ内に複数配置することも可能です(お勧めしません)。