このチャプターの目次
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>
結果:
表示したいコンテンツを <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>
結果:
<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>
結果:
<v-main>
で囲まれた文字列は、アプリケーションバーと重ならないように、自動的に配置されるようになります。
なお <v-main>
は <v-app>
もしくは <v-layout>
の内側に配置する必要があります。 一応、<v-main>
を同じページ内に複数配置することも可能です(お勧めしません)。