Vuetify.js 2.2のButtonコンポーネントについて

# 概要

Buttonコンポーネントの初歩的な使い方のまとめです。

**環境**

* Windows 10 Professional 1909
* Node.js 12.14.1
* Vue.js 2.6.11
* Vuetify.js 2.2.8 (投稿時は2.2.6)

**参考**

* [Quick start - Vuetify.js] (https://vuetifyjs.com/en/getting-started/quick-start)
* [Components] (https://vuetifyjs.com/en/components/api-explorer)
* [Colors] (https://vuetifyjs.com/en/styles/colors)
* [Material Design Icons] (https://cdn.materialdesignicons.com/4.5.95/)

# [Buttons] (https://vuetifyjs.com/en/components/buttons)

## Props

### VBtn

* [VBtn] (https://github.com/vuetifyjs/vuetify/blob/v2.2.8/packages/vuetify/src/components/VBtn/VBtn.ts)
* [Routable] (https://github.com/vuetifyjs/vuetify/blob/v2.2.8/packages/vuetify/src/mixins/routable/index.ts)
* [Positionable] (https://github.com/vuetifyjs/vuetify/blob/v2.2.8/packages/vuetify/src/mixins/positionable/index.ts)
* [Sizeable] (https://github.com/vuetifyjs/vuetify/blob/v2.2.8/packages/vuetify/src/mixins/sizeable/index.ts)
* [Groupable] (https://github.com/vuetifyjs/vuetify/blob/v2.2.8/packages/vuetify/src/mixins/groupable/index.ts)
* [Toggleable] (https://github.com/vuetifyjs/vuetify/blob/v2.2.8/packages/vuetify/src/mixins/toggleable/index.ts)

```
VBtn ----  VSheet ---- Colorable
     |            `--- Elevatable
     |            `--- Measurable
     |            `--- Themeable
     |
     `--- Routable
     `--- Positionable
     `--- Sizeable
     `--- GroupableFactory
     `--- ToggleableFactory
```

|               |name           |type             |default   |relation                    |src       |
|:--------------|:--------------|:----------------|:---------|:---------------------------|:---------|
|**VBtn**       |*active-class* |string           |          |                            |  |
|               |block          |boolean          |false     |                            |  |
|               |depressed      |boolean          |false     |                            |  |
|               |fab            |boolean          |false     |                            |  |
|               |icon           |boolean          |false     |                            |  |
|               |loading        |boolean          |false     |                            |  |
|               |outlined       |boolean          |false     |                            |  |
|               |retain-focus-on-click|boolean    |false     |                            |  |
|               |rounded        |boolean          |false     |                            |  |
|               |*tag*          |string           |'button'  |                            |'button' |
|               |text           |boolean          |false     |                            |  |
|               |type           |string           |'button'  |                            |'button' |
|               |value          |any              |undefined |                            |  |
|**VSheet**     |tag            |string           |'div'     |                            |'div' |
|               |tile           |boolean          |false     |                            | |
|Colorable      |color          |string           |undefined |                            | |
|Elevatable     |elevation      |number or string |undefined |                            | |
|Measurable     |height         |number or string |undefined |                            | |
|               |max-height     |number or string |undefined |                            | |
|               |max-width      |number or string |undefined |                            | |
|               |min-height     |number or string |undefined |                            | |
|               |min-width      |number or string |undefined |                            | |
|               |width          |number or string |undefined |                            | |
|Themeable      |dark           |boolean          |false     |                            |null |
|               |light          |boolean          |false     |                            |null |
|Routable       |active-class   |string           |          |                            |  |
|               |append         |boolean          |false     |                            |  |
|               |disabled       |boolean          |false     |                            |  |
|               |exact          |boolean          |false     |                            |  |
|               |exact-active-class|string        |undefined |                            |  |
|               |link           |boolean          |false     |href, to                    |  |
|               |href           |string or object |undefined |link                        |  |
|               |to             |string or object |undefined |link                        |  |
|               |nuxt           |boolean          |false     |nuxt-link                   |  |
|               |replace        |boolean          |false     |                            |  |
|               |ripple         |boolean or object|undefined |v-ripple directive.         |  |
|               |tag            |string           |'button'  |                            |  |
|               |target         |string           |undefined |                            |  |
|Positionable   |absolute       |boolean          |false     |                            |  |
|               |bottom         |boolean          |false     |                            |  |
|               |fixed          |boolean          |false     |                            |  |
|               |left           |boolean          |false     |absolute, fixed             |  |
|               |right          |boolean          |false     |absolute, fixed             |  |
|               |top            |boolean          |false     |                            |  |
|Sizeable       |large          |boolean          |false     |                            |  |
|               |small          |boolean          |false     |                            |  |
|               |x-large        |boolean          |false     |                            |  |
|               |x-small        |boolean          |false     |                            |  |
|Groupable      |btnToggle      |                 |          |?                           |  |
|Toggleable     |input-value    |any              |undefined |                            |  |

* value : グループ内でコンポーネントが選択されるときに使用される値。 指定しない場合、インデックスが使用されます。
* input-value : ボタンのアクティブ状態を制御します。

## 実装例

### テーマ

**dark**

ダークテーマの各ボタン形状の一覧です。2段目は同一形状に対して`disabled`プロパティを指定した無効化されたときのボタンです。
iconボタンの場合はslotにv-iconコンポーネントを使用します。

```vue
<v-btn dark>Default</v-btn>
<v-btn dark depressed>depressed</v-btn>
<v-btn dark fab>fab</v-btn>
<v-btn dark outlined>outlined</v-btn>
<v-btn dark rounded>rounded</v-btn>
<v-btn dark text>text</v-btn>
<v-btn dark tile>tile</v-btn>
<v-btn dark icon height="50" width="50">
  <v-icon>mdi-vuetify</v-icon>
</v-btn>
```

![button-dark.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/b4e8b08b-2de7-4641-f210-46324de0c762.png)

**light**

ライトテーマの各ボタン形状の一覧です。`light`プロパティ以外のソースコードはダークテーマと同一です。
![button-light.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/57d9c7b5-98a1-26b2-f023-8b045e607310.png)

### カラー

`color`プロパティでカードの背景色を指定します。

```vue
<v-btn color="red">red</v-btn>
```

![button-color.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/f696af60-82d8-2aa8-bed6-84ad6fe9bb62.png)

### エレベーション

`elevation`プロパティには0から24までの数値を指定できます。数値が大きくなるほどボタンが浮き上がって見えます。

```vue
<v-btn elevation="0">elevation=0</v-btn>
```

![button-elevation.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/d494cc2b-da96-d11d-ba59-d948270517a3.png)

### サイズ

サイズは、デフォルトに加え、`x-small`、`small`、`large`、`x-large`プロパティから選べます。また任意のサイズは`height` / `width`プロパティで指定できます。（その他にmin-height/min-width、max-height/max-widthもあります。）

```vue
<v-btn x-small>x-small</v-btn>
<v-btn small>small</v-btn>
<v-btn>default</v-btn>
<v-btn large>large</v-btn>
<v-btn x-large>x-large</v-btn>
<v-btn height="80" width="160">height=80 <br />width=160</v-btn>
```

![button-size.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/9aa7cee0-bea5-7027-445f-f98992c1011b.png)

### ブロック

`block`プロパティを指定するとボタンの表示幅がコンテンツいっぱいに広がります。

```vue
<v-col cols="12" md="6">
  <v-btn>non block</v-btn>
  <v-btn block>block</v-btn>
</v-col>

<v-col class="12" md="4">
  <v-btn>non block</v-btn>
  <v-btn block>block</v-btn>
</v-col>

<v-col class="12" md="2">
    <v-btn>non block</v-btn>
    <v-btn block>block</v-btn>
</v-col>
```

図はPCのモニタで表示したときのものです。
![button-block.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/3e2ec650-3e19-51a9-7ca2-4618b4f0287f.png)

### blur

`retain-focus-on-click`プロパティを指定すると、ボタンクリック後も選択色が解除されません。

```vue
<v-btn>A</v-btn>
<v-btn>B</v-btn>
<v-btn>C</v-btn>
<v-divider vertical class="ma-2"></v-divider>
<v-btn retain-focus-on-click>A</v-btn>
<v-btn retain-focus-on-click>B</v-btn>
<v-btn retain-focus-on-click>C</v-btn>
```

このGIFアニメーションは左側の3つがプロパティの指定なし、右側の3つがプロパティの指定があるボタンです。
![button-retain.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/b59a5aec-a781-daf8-1285-e07841d706e6.gif)

### リップル

`ripple`プロパティを指定するとボタンをクリックしたときにリップル（波紋）のエフェクトが発生します。デフォルトではクリックした点を中心に波紋が広がるエフェクトですが、center=trueという指定にすると必ずボタンの中心から波紋が広がります。またclassで波紋の色を指定することもできます。
`:ripple="false"`とするとリップルのエフェクトは発生しなくなります。

```vue
<v-btn height="80" width="200">defalut</v-btn>
<v-btn height="80" width="200" :ripple="{ center: true }">center = true</v-btn>
<v-btn height="80" width="200" :ripple="{ center: false, class: 'blue--text' }">center = false <br />blue--text</v-btn>
<v-btn height="80" width="200" :ripple="false">ripple = false</v-btn>
```

![button-ripple.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/e0e49498-539c-2ab1-b470-ddb83c0e66ed.gif)

### ページ遷移

ボタンをクリックしたときにページ遷移を行うには`to`、`nuxt`、`href`プロパティを使います。
vue-routerの場合は`to`、Nuxtの場合は`nuxt`、外部のページへ遷移する場合は`href`が使用できます。`href`では新しくタブを開きたい場合に`target`プロパティも使用できます。

```vue
<v-btn link>link</v-btn>
<v-btn href="https://www.google.co.jp" target="_blank">href</v-btn>
<v-btn href="#top">#top</v-btn>
<v-btn :to="{ name: 'Home' }" active-class="blue">to Home</v-btn>
<v-btn :to="{ name: 'Button' }" exact-active-class="red">to Button</v-btn>
```

なお、`link`プロパティを指定しただけではページ遷移は行われません。

### ローディング

`loading`プロパティでボタンにローディングアニメーションを追加することができます。値にtrueをセットするとローディングが開始され、falseで終了します。
ローディングアニメーションのカスタマイズは後述のloaderスロットで行います。

```vue
<v-btn height="60" width="120" color="red" :loading="loading" :disabled="loading" @click="loader('loading')">Load</v-btn>
<v-btn height="60" width="120" color="pink" outlined :loading="loading2" :disabled="loading2" @click="loader('loading2')">Load2</v-btn>
<v-btn height="60" width="120" color="purple" rounded :loading="loading3" :disabled="loading3" @click="loader('loading3')">Load3</v-btn>
<v-btn height="60" width="120" color="deep-purple" tile :loading="loading4" :disabled="loading4" @click="loader('loading4')">Load4</v-btn>
```

![button-load1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/52bb6583-a053-cd20-211a-b2f3efe5e3bc.gif)

v-progress-linearコンポーネントを使用した例

```vue
<v-sheet color="light-blue lighten-4" style="height: 200px; width: 300px; position: relative">
  <v-progress-linear :active="loading7" :indeterminate="loading7" top color="blue accent-4"></v-progress-linear>
  <v-btn absolute bottom right color="cyan ligten-4" :disabled="loading7" @click="loader('loading7')">
    Load7
  </v-btn>
</v-sheet>
```

![button-load2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/976543b5-fec2-6dec-d556-c56cfd2644d4.gif)

### ポジション

#### abusolute

親のコンテンツからの絶対位置でボタンの表示位置を指定するには`absolute`と`top`、`bottom`、`left`、`right`プロパティを使用します。
この場合、親コンテンツには`position: relative`が必要です。

```vue
<v-sheet color="grey" style="height: 300px; width: 600px; position: relative">
  <v-btn absolute top left>top + left</v-btn>
  <v-btn absolute top right>top + right</v-btn>
  <v-btn absolute bottom left>bottom + left</v-btn>
  <v-btn absolute bottom right>bottom + right</v-btn>
</v-sheet>
```

![button-position-absolute.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/f76dc860-9dd2-878e-f75a-badeab63cf60.png)

#### fixed

ページの絶対位置でボタンの表示位置を指定するには`fixed`と`top`、`bottom`、`left`、`right`プロパティを使用します。
下記の例は画面いっぱいに縦長の画像を表示しその四隅にボタンを配置する例です。

```vue
<template>
  <v-container fluid>
    <v-row>
      <v-sheet height="1440" width="810" color="grey lighten-3" class="ma-8">
        <v-img :src="require('@/assets/kashima.jpg')" height="1440" width="810" aspect-ratio="2" contain>
          <div class="fill-height repeating-gradient"></div>
        </v-img>
        <v-btn fixed top left x-large>top + left</v-btn>
        <v-btn fixed top right x-large>top + right</v-btn>
        <v-btn fixed bottom left x-large>bottom + left</v-btn>
        <v-btn fixed bottom right x-large>bottom + right</v-btn>
      </v-sheet>
    </v-row>
  </v-container>
</template>

<style scoped>
.bottom-gradient {
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.4) 0%, transparent 72px);
}

.repeating-gradient {
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(205, 150, 0, 0.25),
    rgba(205, 120, 0, 0.25) 5px,
    rgba(0, 0, 255, 0.25) 5px,
    rgba(0, 0, 255, 0.25) 10px
  );
}
</style>
```

画像の上部を表示している状態

![button-position-fix1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/ddce9b05-5184-bb21-5172-1641f180eaf9.png)

スクロールして画像の下部を表示している状態

![button-position-fix2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/6197073c-78b3-0806-e7a4-821145d63789.png)


## Slots

loaderスロットでローディングアニメーションをカスタマイズできます。

**v-progress-circularコンポーネントを使用した例**

```vue
<v-btn height="64" width="140" color="cyan ligten-4" :loading="loading5" :disabled="loading5" @click="loader('loading5')">
  <template v-slot:loader>
    <v-progress-circular size="42" width="6" color="blue accent-4" indeterminate></v-progress-circular>
  </template>
  Load5
</v-btn>
```

**CSSアニメーションの例**

```vue
<v-btn height="64" width="140" :loading="loading6" :disabled="loading6" color="light-blue accent-4" @click="loader('loading6')">
  <template v-slot:loader>
    <span class="custom-loader">
      <v-icon size="42">mdi-sync</v-icon>
    </span>
  </template>
  Load6
</v-btn>
```

```vue
<style scoped>
.custom-loader {
  animation: loader 1s infinite;
  display: flex;
}
@-moz-keyframes loader {
  from {
    transform: rotate(360deg);
  }
  to {
    transform: rotate(0);
  }
}
@-webkit-keyframes loader {
  from {
    transform: rotate(360deg);
  }
  to {
    transform: rotate(0);
  }
}
@-o-keyframes loader {
  from {
    transform: rotate(360deg);
  }
  to {
    transform: rotate(0);
  }
}
@keyframes loader {
  from {
    transform: rotate(360deg);
  }
  to {
    transform: rotate(0);
  }
}
</style>
```

![button-load3.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/d9b266d4-0073-893c-b914-af972e58e4d2.gif)


## Events

**click**

ボタンがクリックされたときに発行されるイベント

```vue
<v-btn @click="click">Button</v-btn>
```

引数にMouseEventのオブジェクトを取ります。

```
methods: {
    click(e) {
      console.log('click:', e)
    }
}
```


# [Button groups] (https://vuetifyjs.com/en/components/button-groups)

## Props

### VBtnToggle

* [VBtnToggle] (https://github.com/vuetifyjs/vuetify/blob/v2.2.6/packages/vuetify/src/components/VBtnToggle/VBtnToggle.ts)
* [ButtonGroup] (https://github.com/vuetifyjs/vuetify/blob/v2.2.6/packages/vuetify/src/mixins/button-group/index.ts)
* [VItemGroup] (https://github.com/vuetifyjs/vuetify/blob/v2.2.6/packages/vuetify/src/components/VItemGroup/VItemGroup.ts)
* [Groupable] (https://github.com/vuetifyjs/vuetify/blob/v2.2.6/packages/vuetify/src/mixins/groupable/index.ts)
* [Proxyable] (https://github.com/vuetifyjs/vuetify/blob/v2.2.6/packages/vuetify/src/mixins/proxyable/index.ts)
* [Themeable] (https://github.com/vuetifyjs/vuetify/blob/v2.2.6/packages/vuetify/src/mixins/themeable/index.ts)
* [Colorable] (https://github.com/vuetifyjs/vuetify/blob/v2.2.6/packages/vuetify/src/mixins/colorable/index.ts)

```text
VBtnToggle ---- ButtonGroup --- VItemGroup ---- Proxyable
           |                               `--- Themeable
           `--- Colorable
```

|               |name           |type             |default   |relation                    |src       |
|:--------------|:--------------|:----------------|:---------|:---------------------------|:---------|
|**VBtnToggle** |background-color|string          |undefined |                            |  |
|               |borderless     |boolean          |false     |                            |  |
|               |dense          |boolean          |false     |                            |  |
|               |group          |boolean          |false     |v-toolbar, v-app-bar        |  |
|               |rounded        |boolean          |false     |                            |  |
|               |shaped         |boolean          |false     |                            |  |
|               |tile           |boolean          |false     |                            |  |
|VItemGroup     |active-class   |string           |'v-item--active' |                     |  |
|               |mandatory      |boolean          |false     |                            |  |
|               |max            |number or string |undefined |                            |null  |
|               |multiple       |boolean          |false     |                            |  |
|Proxyable      |value          |any              |undefined |                            |  |
|Themeable      |dark           |boolean          |false     |                            |  |
|               |light          |boolean          |false     |                            |  |
|Colorable      |color          |string           |undefined |                            |  |

* value: コンポーネントの指定されたモデル値。

## 実装例

### テーマ

**dark**

下記はダークテーマのデフォルトの形状です。`borderless`、`dense`、`group`、`rounded`、`shaped`、`tile`プロパティを指定すると図のように形状が変化します。
この図では左端のAというボタンが選択状態です。

```vue
<v-btn-toggle dark v-model="bg1">
  <v-btn>
    <v-icon>mdi-alpha-a-box-outline</v-icon>
  </v-btn>
  <v-btn>
    <v-icon>mdi-alpha-b-box-outline</v-icon>
  </v-btn>
  <v-btn>
    <v-icon>mdi-alpha-c-box-outline</v-icon>
  </v-btn>
  <v-btn>
    <v-icon>mdi-alpha-z-box-outline</v-icon>
  </v-btn>
</v-btn-toggle>
```

なお、`group`プロパティを指定するとボタングループの背景色とボーダーラインは無くなります。
![button-group-dark.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/5f21df4c-9ed3-a8cb-2ab4-7783cd73a04e.png)

**light**

ライトテーマの形状です。`light`プロパティ以外はダークテーマと同一のソースコードです。
![button-group-light.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/71e4daf8-2794-7713-e724-f468c50eff82.png)

### カラー

ボタングループにカラーを指定するにはv-btn-toggleコンポーネントの`background-color`と`color`プロパティを使用する方法と、子要素のv-btnコンポーネントの`color`プロパティを使用する方法があります。

v-btn-toggleコンポーネントの`background-color`はボタングループ全体のカラー、`color`プロパティはクリックしたボタンのカラーになります。
なお`group`プロパティを指定しているとこれらのプロパティは無効になり背景色やボーダーは表示されなくなります。

```vue
<v-subheader>default</v-subheader>
<v-btn-toggle background-color="lime lighten-3" color="blue">
  <v-btn>
    <v-icon class="cyan--text">mdi-alpha-a-box-outline</v-icon>
  </v-btn>
  <v-btn>
    <v-icon class="cyan--text">mdi-alpha-b-box-outline</v-icon>
  </v-btn>
  <v-btn>
    <v-icon class="cyan--text">mdi-alpha-c-box-outline</v-icon>
  </v-btn>
  <v-btn>
    <v-icon class="cyan--text">mdi-alpha-z-box-outline</v-icon>
  </v-btn>
</v-btn-toggle>
```

v-btnコンポーネントの`color`プロパティを使用する方法だと、個々のボタンに別々のカラーを指定できます。

```vue
<v-subheader>v-btn=blue</v-subheader>
<v-btn-toggle>
  <v-btn color="red">
    <v-icon>mdi-alpha-a-box-outline</v-icon>
  </v-btn>
  <v-btn color="pink">
    <v-icon>mdi-alpha-b-box-outline</v-icon>
  </v-btn>
  <v-btn color="purple">
    <v-icon>mdi-alpha-c-box-outline</v-icon>
  </v-btn>
  <v-btn color="blue">
    <v-icon>mdi-alpha-z-box-outline</v-icon>
  </v-btn>
</v-btn-toggle>
```

![button-group-color.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/8b350f1c-da92-588c-0a93-8eb8e06703aa.png)

### サイズ

v-btn-toggleコンポーネントにはサイズを指定するプロパティは無いので、子要素のv-btnコンポーネントの`x-small`、`small`、`large`、`x-large`を指定します。

```vue
<v-btn-toggle>
  <v-btn x-small>
    <v-icon x-small>mdi-alpha-a-box-outline</v-icon>
  </v-btn>
  <v-btn x-small>
    <v-icon x-small>mdi-alpha-b-box-outline</v-icon>
  </v-btn>
  <v-btn x-small>
    <v-icon x-small>mdi-alpha-c-box-outline</v-icon>
  </v-btn>
  <v-btn x-small>
    <v-icon x-small>mdi-alpha-z-box-outline</v-icon>
  </v-btn>
</v-btn-toggle>
```

![button-group-size.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/8149ec41-5eba-82a5-f9af-372b2f705c5b.png)

### 選択

#### value

v-btnの`value`プロパティを指定しないと、デフォルトではインデックスが値として使用されます。下記の例では左端のボタンから0、1、2、3とインデックスが振られます。

```vue
<v-subheader>value : {{ bg4 }}</v-subheader>
<v-btn-toggle v-model="bg4">
  <v-btn>
    <v-icon>mdi-alpha-a-box-outline</v-icon>
  </v-btn>
  <v-btn>
    <v-icon>mdi-alpha-b-box-outline</v-icon>
  </v-btn>
  <v-btn>
    <v-icon>mdi-alpha-c-box-outline</v-icon>
  </v-btn>
  <v-btn>
    <v-icon>mdi-alpha-z-box-outline</v-icon>
  </v-btn>
</v-btn-toggle>
```

ボタンに任意の値を指定したい場合は`value`プロパティを使用します。

```vue
<v-subheader>value : {{ bg5 }}</v-subheader>
<v-btn-toggle v-model="bg5">
  <v-btn value="apple">
    <v-icon>mdi-food-apple</v-icon>
  </v-btn>
  <v-btn value="baguette">
    <v-icon>mdi-baguette</v-icon>
  </v-btn>
  <v-btn value="cherries">
    <v-icon>mdi-fruit-cherries</v-icon>
  </v-btn>
  <v-btn value="food">
    <v-icon>mdi-food-variant</v-icon>
  </v-btn>
</v-btn-toggle>
```

![button-group-value.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/399dca85-9047-07ec-aa6e-edc2570d22cc.gif)

#### 単一選択

`mandatory`プロパティを指定すると必ず1つだけ選択状態となるボタングループになります。

```vue
<v-subheader>mandatory : {{ bg3 }}</v-subheader>
<v-btn-toggle mandatory v-model="bg3" color="light-blue">
  <v-btn icon value="A">
    <v-icon class="cyan--text">mdi-alpha-a-box-outline</v-icon>
  </v-btn>
  <v-btn icon value="B">
    <v-icon class="cyan--text">mdi-alpha-b-box-outline</v-icon>
  </v-btn>
  <v-btn icon value="C">
    <v-icon class="cyan--text">mdi-alpha-c-box-outline</v-icon>
  </v-btn>
  <v-btn icon value="Z">
    <v-icon class="cyan--text">mdi-alpha-z-box-outline</v-icon>
  </v-btn>
</v-btn-toggle>
```

![button-group-mandatory.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/40d56fda-cab0-846d-3f22-91813d22db38.gif)

#### 複数 制限無し

`multiple`プロパティを指定すると0個以上が選択状態となるボタングループになります。

```vue
<v-subheader>multiple : {{ bgm1 }}</v-subheader>
<v-btn-toggle multiple v-model="bgm1" color="light-blue">

  // ...省略...

</v-btn-toggle>
```

![button-group-multiple.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/b4157f74-4998-4a15-065c-370b69c325cd.gif)

#### 複数 制限有り

`multiple`と`max`プロパティを指定するとmax個まで選択できるボタングループになります。

```vue
<v-subheader>max =2 / multiple : {{ bgm2 }}</v-subheader>
<v-btn-toggle :max="2" multiple v-model="bgm2" color="light-blue">

  // ...省略...

</v-btn-toggle>
```

![button-group-multiple-max.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/247b7d0f-3c7f-d999-1157-697e1ad4e6da.gif)


## Events

**change**

ユーザーの操作によって入力が変更されたときに生成されます。

```vue
<v-btn-toggle v-model="bg" @change="change">

  // ...省略...

</v-btn-toggle>
```

引数にv-btn-toggleにバインドされたモデルを受け取ります。

```
methods: {
  change(val) {
    console.log('change:', val)
  }
}
```