このチャプターの目次
Container (v-container)
<v-container>
は内側にある要素をひとまとまりのグループのように扱えます。機能的には <div>
とほぼ同じですが、デフォルトでマージン、パディング、幅が指定されている点が異なります。
コード:
<template>
<v-app>
<v-app-bar color="primary">
<v-app-bar-title>
Application
</v-app-bar-title>
</v-app-bar>
<v-main>
<v-container>
<p>Hoge 1</p>
<p>Hoge 2</p>
<p>Hoge 3</p>
<p>Hoge 4</p>
<p>Hoge 5</p>
</v-container>
<div>
<p>Hoge 1</p>
<p>Hoge 2</p>
<p>Hoge 3</p>
<p>Hoge 4</p>
<p>Hoge 5</p>
</div>
</v-main>
</v-app>
</template>
結果:
<v-container>
で囲った文字は、周囲に少しスペースが開きます。<div>
のほうはそれがありません。また <v-container>
は横幅の最大値が指定されています。ブラウザを横に大きく広げると、文字列が中央寄せで表示されます。
<v-container>
の幅やスペース(パディング、マージン)は指定きます。指定方法については、Spacing の項目で説明します。