[Vuetify]v-btn-toggle内のボタン幅をレスポンシブ対応

概要

$vuetify.breakpoint を用いて画面幅に合わせてボタン幅を制御

1. min-widthをcomputedプロパティminWidthとバインドさせる
2. this.$vuetify.breakpoint.widthで画面幅を取得
3. 画面幅の値によってminWidthの値を分岐させる

// 1~5までの５段階評価を行うトグルボタン
<template>
 ...
   <v-btn-toggle
      v-model="value"
   >
      <v-btn
         v-for="n in 5"
         :key="n"
         :value="n"
         :min-width="minWidth"
      >
         {{ n }}
      </v-btn>
   </v-btn-toggle>
 ...
</template>

<script>
export default {
  data() {
    return {
      value: null
    }
  },
  computed: {
    minWidth() {
      return this.$vuetify.breakpoint.width <= 600 ? 24 : 48
    }
  },
  ...
</script>

まとめ

トグルボタンのボタン幅の最小値は48pxがデフォルトで、それ以下にしたいときはmin-width属性で指定する必要がある
→グリッドシステムで幅を調節するのは大変そう
→画面幅を取得しmin-widthの値を動的に制御する

$vuetify.breakpointによるレスポンシブ対応例

2パターンの対応例

widthプロパティにアクセス：ピクセル値で分岐

<script>
...
  computed: {
    width() {
      return this.$vuetify.breakpoint.width <= 600 ? 24 : 48
    }
  },
...
</script>

3パターン以上の対応例

nameプロパティにアクセス：ブレークポイントで分岐

<script>
...
  computed: {
    width() {
      switch(this.$vuetify.breakpoint.name) { // 
         case 'xs': return '24'
         case 'sm': return '30'
         case 'md': return '36'
         default: return '48'
      }
    }
  },
...
</script>

参考文献