Chapter 47無料公開

選択式ボタン (Button Toggle): v-btn-toggle

超Lチカ団編集局
超Lチカ団編集局
2024.01.14に更新

選択式ボタン (Button Toggle): v-btn-toggle

小さな複数のボタンをグループ化して横方向に並べることができるコンポーネントです。いくつかの選択肢の中からひとつ、もそしくは複数の項目を選ぶ目的に使われます。機能的にはラジオボタンとよく似ています。

基本

複数のボタンを v-btn-toggle 要素の子要素としてまとめることで、選択式のボタングループとして機能するようになります。デフォルトでは、選択は排他的(択一)になります。無選択状態も許容されます。

image

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 には配列の入った変数を割り当てる必要があります。

image

<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 でボタンの間に仕切り線を入れることができます。

image

<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 が指定できます。

image

<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>

色の指定

colorprop で指定した色は、選択されたボタンの色に反映されます。未選択のボタンの背景色を指定したいときは class="bg-" を使います。背景色を指定するときは、variant="default" としないとなぜか色が反映されません (Vuetify 3.4.9)。

image

<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 は画面いっぱいに広がるため、ツールバーの代わりにスマホの画面の上部や下部に小さいボタンを並べるような用途に向いています。