画面切り替え:タブ (Tabs): v-tab
基本
v-tabs
は画面切り替えなどに使える、タブ型のボタンが並んだコンポーネントです。切り替えボタンに相当するコンポーネントは v-tab
で作成し、切り替える画面は v-window
, v-window-item
を使って作成します。v-tabs
と v-window
のv-model
に同じ変数を割り当てることで、v-tab
の切り替えに連動して表示される v-window-item
が切り替わるようになります。
<template>
<v-container class="pa-2">
<v-tabs
v-model="tab"
>
<v-tab value="1">Item One</v-tab>
<v-tab value="2">Item Two</v-tab>
<v-tab value="3">Item Three</v-tab>
</v-tabs>
<v-window v-model="tab">
<v-window-item value="1">
<v-sheet
color="red"
height="400"
tile
>
<h1 class="text-white">Window 1</h1>
</v-sheet>
</v-window-item>
<v-window-item value="2">
<v-sheet
color="blue"
height="400"
tile
>
<h1 class="text-white">Window 2</h1>
</v-sheet>
</v-window-item>
<v-window-item value="3">
<v-sheet
color="green"
height="400"
tile
>
<h1 class="text-white">Window 3</h1>
</v-sheet>
</v-window-item>
</v-window>
</v-container>
</template>
<script>
export default {
data: () => ({
tab: null,
}),
}
</script>
下記の例は、切り替える画面の内容を別のコンポーネントとして作成した例です。画面の見た目自体は上の例と同じになります。
<template>
<v-container class="pa-2">
<v-tabs
v-model="tab"
>
<v-tab value="1">Item One</v-tab>
<v-tab value="2">Item Two</v-tab>
<v-tab value="3">Item Three</v-tab>
</v-tabs>
<v-window v-model="tab">
<v-window-item value="1"><HogePageA/></v-window-item>
<v-window-item value="2"><HogePageB/></v-window-item>
<v-window-item value="3"><HogePageC/></v-window-item>
</v-window>
</v-container>
</template>
<script>
import HogePageA from './components/HogePageA.vue';
import HogePageB from './components/HogePageB.vue';
import HogePageC from './components/HogePageC.vue';
export default {
data: () => ({
tab: 0
}),
components: {
HogePageA,
HogePageB,
HogePageC,
}
}
</script>
HogePageA.vue
<template>
<v-sheet class="bg-red" height="400" tile>
<h1 class="text-white">Window 1</h1>
</v-sheet>
</template>
HogePageB.vue
<template>
<v-sheet class="bg-blue" height="400" tile>
<h1 class="text-white">Window 2</h1>
</v-sheet>
</template>
HogePageC.vue
<template>
<v-sheet class="bg-green" height="400" tile>
<h1 class="text-white">Window 3</h1>
</v-sheet>
</template>
画面の切り替え以外に使う
タブ自体は、単純に値を選ぶことのできるコンポーネントなので、画面の切り替え以外の目的にも使えます。ただ、この用途に使うのであれば、v-btn-toggle
のほうが向いています。
<template>
<v-container class="pa-2">
<v-tabs
v-model="tab"
>
<v-tab value="1">Item One</v-tab>
<v-tab value="2">Item Two</v-tab>
<v-tab value="3">Item Three</v-tab>
</v-tabs>
<h1>{{tab}}</h1>
</v-container>
</template>
<script>
export default {
data: () => ({
tab: 0
}),
}
</script>
ツールバーとの組み合わせ
v-toolbar
と組み合わせると、タイトルやメニューのついたタブを作ることができます。v-toolbar
の v-slot:extension
の中に v-tabs
を配置します。v-app-bar
との組み合わせも可能です。
<template>
<v-container class="pa-2">
<v-toolbar title="Application" color="black" extended>
<v-spacer></v-spacer>
<v-btn icon="mdi-home"></v-btn>
<v-btn icon="mdi-dots-vertical"></v-btn>
<template v-slot:extension>
<v-tabs v-model="tab">
<v-tab value="1">Item One</v-tab>
<v-tab value="2">Item Two</v-tab>
<v-tab value="3">Item Three</v-tab>
</v-tabs>
</template>
</v-toolbar>
<v-window v-model="tab">
<v-window-item value="1">
<v-sheet color="red" height="400" tile>
<h1 class="text-white">Window 1</h1>
</v-sheet>
</v-window-item>
<v-window-item value="2">
<v-sheet color="blue" height="400" tile>
<h1 class="text-white">Window 2</h1>
</v-sheet>
</v-window-item>
<v-window-item value="3">
<v-sheet color="green" height="400" tile>
<h1 class="text-white">Window 3</h1>
</v-sheet>
</v-window-item>
</v-window>
</v-container>
</template>
<script>
export default {
data: () => ({
tab: null,
}),
}
</script>
色の指定
v-tabs
の color
prop で選択されたタブのテキストの色を, bg-color
props でタブの背景色を指定できます。
<template>
<v-container class="pa-2">
<v-tabs color="blue-darken-4" bg-color="lime-lighten-4">
<v-tab value="1">Item One</v-tab>
<v-tab value="2">Item Two</v-tab>
<v-tab value="3">Item Three</v-tab>
</v-tabs>
</v-container>
</template>
v-card
, v-toolbar
などの子要素になっているときは、親要素の色の設定をそのまま引き継ぎます。その場合でも v-tabs
で色を再度設定しなおすこともできます。
タブの位置
align-tabs
prop を使うと、タブを寄せる方向(左右、中央)を設定できます。デフォルトは左寄せ (align-tabs="start"
) です。align-tabs="center"
で中央寄せになります。
<template>
<v-container class="pa-4 w-75">
<v-tabs color="blue-darken-4" bg-color="lime-lighten-4" align-tabs="center">
<v-tab value="1">Item One</v-tab>
<v-tab value="2">Item Two</v-tab>
<v-tab value="3">Item Three</v-tab>
</v-tabs>
</v-container>
</template>
右に寄せるには align-tabs="end"
とします。
<template>
<v-container class="pa-4 w-75">
<v-tabs color="blue-darken-4" bg-color="lime-lighten-4" align-tabs="end">
<v-tab value="1">Item One</v-tab>
<v-tab value="2">Item Two</v-tab>
<v-tab value="3">Item Three</v-tab>
</v-tabs>
</v-container>
</template>
アイコン付きタブ
v-icon
でタブにアイコンを表示させること自体はできます。v-icon
を単純に挿入すると、テキストと同じ列にアイコンが表示されます。
<template>
<v-container class="pa-4 w-75">
<v-tabs color="blue-darken-4" bg-color="lime-lighten-4">
<v-tab value="1">
<v-icon class="mx-1">mdi-phone</v-icon>
Item One</v-tab>
<v-tab value="2">
<v-icon class="mx-1">mdi-heart</v-icon>
Item Two
</v-tab>
<v-tab value="3">
<v-icon class="mx-1">mdi-home</v-icon>
Item Three
</v-tab>
</v-tabs>
</v-container>
</template>
アイコンとテキストを別の行に表示させたいときは stacked
prop を使用します。
<template>
<v-container class="pa-4 w-75">
<v-tabs color="blue-darken-4" bg-color="lime-lighten-4" stacked>
<v-tab value="1">
<v-icon>mdi-phone</v-icon>
Item One</v-tab>
<v-tab value="2">
<v-icon>mdi-heart</v-icon>
Item Two
</v-tab>
<v-tab value="3">
<v-icon>mdi-home</v-icon>
Item Three
</v-tab>
</v-tabs>
</v-container>
</template>
タブの幅
fixed-tabs
prop を使うと、タブの横幅が均等割りになります。
<template>
<v-container class="pa-4 w-75">
<v-tabs color="blue-darken-4" bg-color="lime-lighten-4" fixed-tabs>
<v-tab value="1">pen</v-tab>
<v-tab value="2">this is a pen.</v-tab>
<v-tab value="3">this is a pen. That is a pencil.</v-tab>
</v-tabs>
</v-container>
</template>
grow
prop を使うと、タブの中にあるテキストの長さに応じて、タブの幅が調整されます。
<template>
<v-container class="pa-4 w-75">
<v-tabs color="blue-darken-4" bg-color="lime-lighten-4" grow>
<v-tab value="1">pen</v-tab>
<v-tab value="2">this is a pen.</v-tab>
<v-tab value="3">this is a pen. That is a pencil.</v-tab>
</v-tabs>
</v-container>
</template>
縦方向のタブ
direction
prop を使用することで、縦方向のタブを作ることができます。
コード:
<template>
<v-container class="pa-4 d-flex">
<v-tabs
v-model="tab"
direction="vertical"
bg-color="primary"
color="yellow"
>
<v-tab :value="n" v-for="n in 5">Tab {{n}}</v-tab>
</v-tabs>
<v-card class="mx-4 py-3 w-50" color="green-lighten-4">
<v-card-title class="text-h2">{{tab}}</v-card-title>
</v-card>
</v-container>
</template>
<script>
export default {
data: () => ({
tab: 0
}),
}
</script>
タブの左右送り
タブの数が多くてバーの中に入りきらない時は、タブの端付近をクリックすることで、はみ出しているタブが表示されて選べるようになります。
<template>
<v-container class="pa-4 w-50">
<v-tabs
v-model="tab"
bg-color="primary"
color="yellow"
>
<v-tab :value="n" v-for="n in 20">Tab {{n}}</v-tab>
</v-tabs>
<v-card class="my-3" height="200" color="green-lighten-4">
<v-card-title class="text-h2">{{tab}}</v-card-title>
</v-card>
</v-container>
</template>
<script>
export default {
data: () => ({
tab: 0
}),
}
</script>
center-active
prop を使うと、選ばれたタブが可能な限り画面の中央に来るようになります。これを使うと、はみ出しているタブが多少選びやすくなります。
<template>
<v-container class="pa-4 w-50">
<v-tabs
v-model="tab"
bg-color="primary"
color="yellow"
center-active
>
<v-tab :value="n" v-for="n in 20">Tab {{n}}</v-tab>
</v-tabs>
<v-card class="my-3" height="200" color="green-lighten-4">
<v-card-title class="text-h2">{{tab}}</v-card-title>
</v-card>
</v-container>
</template>
<script>
export default {
data: () => ({
tab: 0
}),
}
</script>
show-arrows
prop を使うと、タブを左右に移動させることができる矢印のアイコンが付きます。タブの数が非常に多い場合に有効です。
<template>
<v-container class="pa-4 w-50">
<v-tabs
v-model="tab"
bg-color="primary"
color="yellow"
center-active
show-arrows
>
<v-tab :value="n" v-for="n in 20">Tab {{n}}</v-tab>
</v-tabs>
<v-card class="my-3" height="200" color="green-lighten-4">
<v-card-title class="text-h2">{{tab}}</v-card-title>
</v-card>
</v-container>
</template>
<script>
export default {
data: () => ({
tab: 0
}),
}
</script>
その他
詳細は公式ページを見てください。