【Vuetify】レスポンシブデザイン実装時に見るメモ

<b>Vuetifyのレスポンシブデザイン</b>を実装する前に知っておくべき事は以下の3つです。  
これさえマスターすれば恐れる事は何もありません。  

1. Grid system
1. Breakpoint service
1. mobile-breakpoint

使用例を交えながら順に解説します。

## 1. Grid system
- [Grid system](https://vuetifyjs.com/ja/components/grids/): `v-container`、`v-row`、`v-col`を用いて、コンテンツの配置・調整をできる機能

- vuetifyが備える５種類のメディアブレークポイント

| 識別子| 範囲|
|:---:|:---:|
|xs | 600px未満|
|sm | 600px以上、960px未満|
|md | 960px以上、1264px未満|
|lg | 1264px以上、1904px未満|
|xl | 1904px以上|

- `v-row`の中ではデフォルトで<b>12</b>個の`v-col`までなら１行で表示することが可能
  - `v-col`に`cols=1`を指定すること

```vue
<template>
  <v-container>
    <v-row>
      <v-col cols="1"> <card /> </v-col>
      <v-col cols="1"> <card /> </v-col>
      <v-col cols="1"> <card /> </v-col>
      <v-col cols="1"> <card /> </v-col>
      <v-col cols="1"> <card /> </v-col>
      <v-col cols="1"> <card /> </v-col>
      <v-col cols="1"> <card /> </v-col>
      <v-col cols="1"> <card /> </v-col>
      <v-col cols="1"> <card /> </v-col>
      <v-col cols="1"> <card /> </v-col>
      <v-col cols="1"> <card /> </v-col>
      <v-col cols="1"> <card /> </v-col>
    </v-row>
  </v-container>
</template>
```


【動作イメージ 】
![Kapture 2021-02-15 at 21.43.34.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/397734/f0348098-2304-e2b2-4674-5a6512e8d94b.gif)
※ `cols=1`を指定しているため、画面幅を変更しても`１行12列`は保たれます  

> さらに`v-col`を**１**つ増やすと<b>Grid system</b>の機能上、`v-row`配下の要素数が**12**を超えるため改行されて表示されます
![スクリーンショット 2021-02-15 21.41.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/397734/172f6702-5425-0814-1ea3-cef018843674.png?d=10)

### 例：画面幅が`xs`(600px未満)の時だけ`１列`にしたい場合の手順
- `cols`の合計値が**12**を超えると改行されるため、各`v-col`に`cols="12"`を指定する
- `xs`以外のメディアブレークポイント時は<b>１</b>行で表示されるよう以下も指定する
  - `sm="1" md="1" lg="1" xl="1"`

```vue
<template>
  <v-container>
    <v-row>
      <v-col cols="12" sm="1" md="1" lg="1" xl="1"> <card /> </v-col>
      <v-col cols="12" sm="1" md="1" lg="1" xl="1"> <card /> </v-col>
      <v-col cols="12" sm="1" md="1" lg="1" xl="1"> <card /> </v-col>
      <v-col cols="12" sm="1" md="1" lg="1" xl="1"> <card /> </v-col>
      <v-col cols="12" sm="1" md="1" lg="1" xl="1"> <card /> </v-col>
      <v-col cols="12" sm="1" md="1" lg="1" xl="1"> <card /> </v-col>
      <v-col cols="12" sm="1" md="1" lg="1" xl="1"> <card /> </v-col>
      <v-col cols="12" sm="1" md="1" lg="1" xl="1"> <card /> </v-col>
      <v-col cols="12" sm="1" md="1" lg="1" xl="1"> <card /> </v-col>
      <v-col cols="12" sm="1" md="1" lg="1" xl="1"> <card /> </v-col>
      <v-col cols="12" sm="1" md="1" lg="1" xl="1"> <card /> </v-col>
      <v-col cols="12" sm="1" md="1" lg="1" xl="1"> <card /> </v-col>
    </v-row>
  </v-container>
</template>
```

【画面イメージ 】
![Kapture 2021-02-15 at 22.05.34.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/397734/61744d7b-ac63-dcf9-43c6-616f73033c15.gif)
※ `v-col`では`xs`のブレークポイントが存在しないため、画面幅が600pxの場合は`cols`の値が優先されるhttps://vuetifyjs.com/ja/components/grids/#breakpoint-sizing  


---
- 画面幅が`xs(600px未満)の時以外`は`3行4列`にしたい場合は、`cols以外の値`に**3**を指定します

```vue
<template>
  <v-container>
    <v-row>
      <v-col cols="12" sm="3" md="3" lg="3" xl="3"> <card /> </v-col>
      <v-col cols="12" sm="3" md="3" lg="3" xl="3"> <card /> </v-col>
      <v-col cols="12" sm="3" md="3" lg="3" xl="3"> <card /> </v-col>
      <v-col cols="12" sm="3" md="3" lg="3" xl="3"> <card /> </v-col>
      <v-col cols="12" sm="3" md="3" lg="3" xl="3"> <card /> </v-col>
      <v-col cols="12" sm="3" md="3" lg="3" xl="3"> <card /> </v-col>
      <v-col cols="12" sm="3" md="3" lg="3" xl="3"> <card /> </v-col>
      <v-col cols="12" sm="3" md="3" lg="3" xl="3"> <card /> </v-col>
      <v-col cols="12" sm="3" md="3" lg="3" xl="3"> <card /> </v-col>
      <v-col cols="12" sm="3" md="3" lg="3" xl="3"> <card /> </v-col>
      <v-col cols="12" sm="3" md="3" lg="3" xl="3"> <card /> </v-col>
      <v-col cols="12" sm="3" md="3" lg="3" xl="3"> <card /> </v-col>
    </v-row>
  </v-container>
</template>
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/397734/f1b4cd1a-9e5f-fd3e-f654-20c56e0b7369.png)





## 2. Breakpoint service

- [Breakpoint service](https://vuetifyjs.com/en/features/breakpoints/#breakpoint-service)：画面幅のサイズを検知して論理値を返してくれる機能  

### 例：ツールバーの表示項目を制御したいとき

```vue:ToolBar.vue
<template>
  <v-toolbar>
    <v-app-bar-nav-icon></v-app-bar-nav-icon>
    <v-toolbar-title>ツールバータイトル</v-toolbar-title>
    <v-spacer></v-spacer>
    <v-btn >
      ツールバーボタン
    </v-btn>
    <v-btn icon>
      <v-icon>mdi-heart</v-icon>
    </v-btn>
  </v-toolbar>
</template>
```

上記テンプレートの場合、画面幅を小さくすると、ツールバーの項目が被ってしまいます

|画面幅が広い |画面幅が狭い |
|:---:|:---:|
|![スクリーンショット 2021-02-15 22.25.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/397734/f7c38fa0-7e32-7d8a-454b-4ccf101f278e.png)|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/397734/05947b64-6d68-4cb2-573e-fa2b6662c03a.png)|

`ツールバーボタン`を非表示にしたい場合は、<v-btn>に`v-if="!$vuetify.breakpoint.xs"`をv-btnに指定する事で、画面幅がxs(600px)未満の場合に非表示にさせることができます。

```vue
<template>
  <v-toolbar>
    <v-app-bar-nav-icon></v-app-bar-nav-icon>
    <v-toolbar-title>ツールバータイトル</v-toolbar-title>
    <v-spacer></v-spacer>
    <v-btn v-if="!$vuetify.breakpoint.xs">
      ツールバーボタン
    </v-btn>
    <v-btn icon>
      <v-icon>mdi-heart</v-icon>
    </v-btn>
  </v-toolbar>
</template>
```

【動作イメージ 】　　
![Kapture 2021-02-15 at 22.33.09.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/397734/be390ca9-c761-8a3f-5b98-23731d9c58a5.gif)

> $vuetify.breakpoint.○○では、〇〇の値を各メディアタイプの識別子に変更する事で、それぞれの画面幅で切り替え値を取得することができます。

## 3. mobile-breakpoint
- mobile-breakpoint：Vuetifyコンポーネントに存在する属性値
  - `v-data-table`や`v-navigation-drawer`に存在します
  - 見た目の表示を切り替える境界値です

今回は、 公式サイトの[v-data-table](https://vuetifyjs.com/zh-Hans/components/data-tables/#section-63d269fd)を例に解説します。

```vue
<template>
  <div>
    <v-data-table
      :headers="headers"
      :items="desserts"
      item-key="name"
      class="elevation-1"
      :search="search"
      :custom-filter="filterOnlyCapsText"
    >
      <template #top>
        <v-text-field
          v-model="search"
          label="Search (UPPER CASE ONLY)"
          class="mx-4"
        ></v-text-field>
        ...(長くなるので割愛)
        ...
    </v-data-table>
  </div>
</templatte>
```
この`v-data-table`を表示したまま、画面幅を変えてみましょう。
【動作イメージ】

![Kapture 2021-02-15 at 23.04.55.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/397734/501e4cde-281b-8901-e661-330693643fbb.gif)




このように、画面幅600px未満になった場合に自動で表示形式が変わってしまいます。
~~個人的に、全然期待しない表示形式に切り替わってビビりました😇~~

こちらは、`v-data-table`の[mobile-breakpoint](https://vuetifyjs.com/zh-Hans/api/v-data-table/#section-5c5e6027)のデフォルト値が`600px`に指定されているため、このような挙動になっています。

### 例：表示切り替えがされないよう`0`を指定する
- 表形式を変更したくない場合は`v-data-table`に`:mobile-breakpoint="0"`を指定しましょう。


```vue
<template>
  <div>
    <v-data-table
      ....
      :mobile-breakpoint="0"
    >
        ...(長くなるので割愛)
        ...
    </v-data-table>
  </div>
</templatte>
```

【動作イメージ】
画面幅が600px未満の場合でも表示形式が切り替わらなくなりました
![Kapture 2021-02-15 at 23.11.17.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/397734/e6d16fe5-3061-bf2f-b2be-e2003b8eaeaf.gif)

`v-data-table`以外にも、自動で表示形式が切り替わるコンポーネントは存在しているので、レスポンスデザイン実装時には適宜確認して`mobile-breakpoint`を設定してしましょう。


---

以上、<b>Vuetifyでレスポンシブデザインを実装する前に知っておくべき事</b>でした。🦒