要素の幅を指定して横方向に並べる: GRID (v-row / v-col)
d-flex
で横方向に並べることはできますが、要素ごとにサイズ(幅)を変えようとすると面倒です。
そんな時は <v-row>
と <v-col>
を使うことで、テーブルを作る要領で要素の配置ができます。
<template>
<v-container>
<v-row>
<v-col> <v-btn>Hoge1</v-btn> </v-col>
<v-col> <v-btn>Hoge2</v-btn> </v-col>
<v-col> <v-btn>Hoge3</v-btn> </v-col>
<v-col> <v-btn>Hoge4</v-btn> </v-col>
</v-row>
</v-container>
</template>
基本形は上記です。row が行に相当し、col が列に相当します。
デフォルトでは均等割り付けになります。
v-col で cols を指定すると、それぞれの要素の幅(の割合)を指定できます。1行あたりの横幅を12として、それぞれの col の横幅を 1-12 の整数で指定します。
<template>
<v-container>
<v-row>
<v-col cols="2"> <v-btn>Hoge1</v-btn> </v-col>
<v-col cols="2"> <v-btn>Hoge2</v-btn> </v-col>
<v-col cols="4"> <v-btn>Hoge3</v-btn> </v-col>
<v-col cols="4"> <v-btn>Hoge4</v-btn> </v-col>
</v-row>
</v-container>
<v-container>
<v-row>
<v-col cols="2"> <v-btn block>Hoge1</v-btn> </v-col>
<v-col cols="2"> <v-btn block>Hoge2</v-btn> </v-col>
<v-col cols="4"> <v-btn block>Hoge3</v-btn> </v-col>
<v-col cols="4"> <v-btn block>Hoge4</v-btn> </v-col>
</v-row>
</v-container>
</template>
結果:
<v-btn>
で block
を指定すると、与えられた幅いっぱいに広がります。下の行は Block を指定しているので、HOGE1 のボタンに比べると、HOGE3、HOGE4は2倍の横幅になっていることが分かります。
セル内の要素の上下寄せ
セル内の要素を下に寄せるには、<v-col>
のクラスで d-flex align-end
を指定します。縦方向の中央揃えは align-center
です。
<template>
<v-container>
<v-row>
<v-col cols="2"> <v-btn block>Hoge1</v-btn> </v-col>
<v-col cols="2"> <v-btn block>Hoge2</v-btn> </v-col>
<v-col cols="4" class="d-flex align-end">
<p>FOO BAR</p>
</v-col>
<v-col cols="4"> <v-btn block>Hoge4</v-btn> </v-col>
</v-row>
</v-container>
</template>
結果:
セル内での中央寄せ
block
を使わずに、要素を中央寄せするには <v-col>
で d-flex flex-row justify-center
を指定します。
Vuetify 3.3.6 でも寄せられなくなっています。バージョンアップしても寄せられないままなので、どうやら仕様のようです。<v-col>
内の要素がひとつだけなら、mx-auto
で中央に寄せることもできます。
<template>
<v-container>
<v-row>
<v-col cols="2"> <v-btn>Hoge1</v-btn> </v-col>
<v-col cols="2"> <v-btn>Hoge2</v-btn> </v-col>
<v-col cols="4">
<v-btn>Hoge3</v-btn>
</v-col>
<v-col cols="4"> <v-btn>Hoge4</v-btn> </v-col>
</v-row>
<v-row>
<v-col cols="2"> <v-btn>Hoge1</v-btn> </v-col>
<v-col cols="2"> <v-btn>Hoge2</v-btn> </v-col>
<v-col cols="4" class="d-flex flex-row justify-center">
<v-btn>Hoge3</v-btn>
</v-col>
<v-col cols="4"> <v-btn>Hoge4</v-btn> </v-col>
</v-row>
<v-row>
<v-col cols="2"> <v-btn>Hoge1</v-btn> </v-col>
<v-col cols="2"> <v-btn>Hoge2</v-btn> </v-col>
<v-col cols="4">
<v-btn class="mx-auto">Hoge3</v-btn>
</v-col>
<v-col cols="4"> <v-btn>Hoge4</v-btn> </v-col>
</v-row>
</v-container>
</template>
結果:
行送り
ひとつの行の cols
の合計値が12を超えていると、自動的に次の行に改行します。
<template>
<v-container>
<v-row>
<v-col cols="3" v-for="k in 10" :key="k">
<v-btn block>
HOGE{{k}}
</v-btn>
</v-col>
</v-row>
</v-container>
</template>
結果:
セルの縦方向の結合
セルを縦方向に結合することは、基本的にはできないぽいです。no-gutters
を使うとセルの境目をなくすことができるので、連続しているセルが結合しているように見せることは可能です。
<template>
<v-container >
<v-row no-gutters >
<v-col cols="12">
<v-sheet class="bg-black pa-2">
HOGE1
</v-sheet>
</v-col>
<v-col cols="6">
<v-sheet class="bg-black pa-2">
HOGE2
</v-sheet>
</v-col>
</v-row>
</v-container>
</template>
結果:
しかし、あくまで結合したように見せるだけなので <v-btn>
のような境界のある要素の結合には使えません。
次の例のように、複数の <v-row>
を横に並べることで、疑似的に結合したように見せることも可能です。ただ、ブラウザによって表示が崩れることがあるようなので、多分よくないです。
<template>
<v-container class="d-flex flex-row">
<div>
<v-row>
<v-col>
<v-btn>HOGE1</v-btn>
</v-col>
</v-row>
<v-row>
<v-col>
<v-btn>HOGE2</v-btn>
</v-col>
</v-row>
<v-row>
<v-col>
<v-btn>HOGE3</v-btn>
</v-col>
</v-row>
</div>
<div class="d-flex flex-column pl-2">
<v-row>
<v-col>
<v-btn height="6.8em">HOGE1</v-btn>
</v-col>
</v-row>
<v-row class="pt-0">
<v-col>
<v-btn>HOGE2</v-btn>
</v-col>
</v-row>
</div>
</v-container>
</template>
結果:
他にいい方法があったら教えてください。
Grid System を使うと、かなり自由にレイアウトすることが可能です。Grid System について下記を参照してください。