選択式ボタン (Button Toggle): v-btn-toggle
小さな複数のボタンをグループ化して横方向に並べることができるコンポーネントです。いくつかの選択肢の中からひとつ、もそしくは複数の項目を選ぶ目的に使われます。機能的にはラジオボタンとよく似ています。
基本
複数のボタンを v-btn-toggle
要素の子要素としてまとめることで、選択式のボタングループとして機能するようになります。デフォルトでは、選択は排他的(択一)になります。無選択状態も許容されます。
v-model
については、排他的選択のときは配列ではない変数を割り当てる必要があります。ボタンと v-model
の値の対応は、ボタンの並び順で自動的に決まります。先頭のボタンが 0
となり、以下順番に 1, 2, ...
と数値が割り当てられます。
<template>
<v-container>
<v-btn-toggle v-model="flag">
<v-btn> A </v-btn>
<v-btn> B </v-btn>
<v-btn> C </v-btn>
<v-btn> D </v-btn>
</v-btn-toggle>
<p class="my-3">{{ flag }}</p>
</v-container>
</template>
<script>
export default {
data () {
return {
flag: 0
}
},
}
</script>
選択を必須(無選択状態を許さない)にするには、mandatory
prop を使用します。
複数選択
multiple
prop を指定すると複数選択できるようになります。 v-model
には配列の入った変数を割り当てる必要があります。
<template>
<v-container>
<v-btn-toggle multiple v-model="flag">
<v-btn> A </v-btn>
<v-btn> B </v-btn>
<v-btn> C </v-btn>
<v-btn> D </v-btn>
</v-btn-toggle>
<p class="my-3">{{ flag }}</p>
</v-container>
</template>
<script>
export default {
data () {
return {
flag: [0]
}
},
}
</script>
仕切り線
divided
prop でボタンの間に仕切り線を入れることができます。
<template>
<v-container>
<v-btn-toggle multiple divided v-model="flag">
<v-btn icon="mdi-format-bold"></v-btn>
<v-btn icon="mdi-format-italic"></v-btn>
<v-btn icon="mdi-format-underline"></v-btn>
<v-btn icon="mdi-format-color-text"></v-btn>
</v-btn-toggle>
<p class="my-3">{{ flag }}</p>
</v-container>
</template>
角を丸める
rounded
prop を使うと、ボタングループの左右端の角が丸まります。rounded
の値は sm
, lg
, xl
,pill
, circle
が指定できます。
<template>
<v-sheet class="pa-3 bg-red-lighten-4">
<v-btn-toggle rounded="lg" v-model="flag">
<v-btn icon="mdi-format-bold"></v-btn>
<v-btn icon="mdi-format-italic"></v-btn>
<v-btn icon="mdi-format-underline"></v-btn>
<v-btn icon="mdi-format-color-text"></v-btn>
</v-btn-toggle>
<v-btn-toggle rounded="pill" v-model="flag" class="mx-4">
<v-btn icon="mdi-format-bold"></v-btn>
<v-btn icon="mdi-format-italic"></v-btn>
<v-btn icon="mdi-format-underline"></v-btn>
<v-btn icon="mdi-format-color-text"></v-btn>
</v-btn-toggle>
</v-sheet>
</template>
色の指定
color
prop で指定した色は、選択されたボタンの色に反映されます。未選択のボタンの背景色を指定したいときは class="bg-"
を使います。背景色を指定するときは、variant="default"
としないとなぜか色が反映されません (Vuetify 3.4.9)。
<template>
<v-container>
<v-row>
<v-col cols="6">
<v-btn-toggle v-model="flag" color="primary">
<v-btn>A</v-btn><v-btn>B</v-btn><v-btn>C</v-btn><v-btn>D</v-btn>
</v-btn-toggle>
</v-col>
<v-col cols="6">
<v-btn-toggle variant="default" v-model="flag" class="bg-primary">
<v-btn>A</v-btn><v-btn>B</v-btn><v-btn>C</v-btn><v-btn>D</v-btn>
</v-btn-toggle>
</v-col>
</v-row>
</v-container>
</template>
その他
variant
prop で外観の変更ができるはずなのですが、何を指定してもほとんど見かけが変わらない気がします。
また、ボタンをグループ化するコンポーネントとしては、他に Button Navigation があります。Button Navigation は画面いっぱいに広がるため、ツールバーの代わりにスマホの画面の上部や下部に小さいボタンを並べるような用途に向いています。