【Vuetify】画面サイズで要素の表示・非表示を切り替える

こんにちは、Ryohei（@ityryohei）です！

本記事では、Vuetifyで画面サイズによって要素の表示・非表示を切り替える方法をご紹介しています。

Vuetifyで要素の表示と非表示を切り替えたいんだけど、良い方法ないかな？

上記の疑問にお答えします。

では、解説していきます。

Vuetifyのbreakpoint

Vuetifyはマテリアルデザインにおけるブレイクポイントが用意されています。それぞれのブレイクポイントでは予めコードが設定されています。それらを利用することで簡単にコンテンツの表示・非表示を制御することが可能となっています。

Vuetifyにおけるブレイクポイントは下記の通りです。xs～xlのコードとそれぞれの画面サイズを記載しています。

xs（Extra small）	スマホ `～ 600px`
sm（Small）	小～中型タブレット `600px ～ 960px`
md（Medium）	大型タブレット～ノートパソコン `960px ～ 1264px*`
lg（Large）	デスクトップパソコン `1264px ～ 1904px`
xl（Extra large）	4k、ウルトラワイド `～ 1904px`

上記のコードとdisplayプロパティを組み合わせることで、画面サイズによってコンテンツを制御することができます。主要デバイスはしっかり対応しているので助かりますね。

では続いて使い方を見ていきましょう！

displayのプロパティで指定する

displayのプロパティを使用する方法では、下記のような形式でクラスが用意されています。

.d-{value}

.d-{breakpoint}-{value}

breakpointとvalueに指定することができる値は下記の通りです。上記でご紹介したbreakpointのコードとdisplayのプロパティになります。

{breakpoint}	・xs ・sm ・md ・lg ・xl
{value}	・none ・inline ・inline-block ・block ・table ・table-cell ・table-row ・flex ・inline-flex

実際にコンポーネント側で記述する場合は.(ドット)は必要ありません。要素のclass属性に下記のような形でセレクタをに指定するだけです。

<div id="app">

  <v-app>

    <div class="d-none d-md-block">

        <!-- mdで表示、それ以外では非表示 -->

    </div>

  </v-app>

</div>

上記例ではdisplayのnoneとblockを指定していますが、flexやtableでも問題ありませんし、下記の表のように各ブレイクポイントにおける画面サイズで要素の表示・非表示を切り替えることも可能です。

各ブレイクポイントの画面サイズでのみ表示する

all	すべてのブレイクポイントで表示する .d-block
xs（Extra small）	xsのみ表示する .d-block .d-sm-none
sm（Small）	smのみ表示する .d-none .d-sm-block .d-md-none
md（Medium）	mdのみ表示する .d-none .d-md-block .d-lg-none
lg（Large）	lgのみ表示する .d-none .d-lg-block .d-xl-none
xl（Extra large）	xlのみ表示する .d-none .d-xl-block

各ブレイクポイントの画面サイズでのみ非表示する

all	常に非表示 .d-none
xs（Extra small）	xsのみ非表示 .d-none .d-sm-block
sm（Small）	smのみ非表示 .d-sm-none .d-md-block
md（Medium）	mdのみ非表示 .d-md-none .d-lg-block
lg（Large）	lgのみ非表示 .d-lg-none .d-xl-block
xl（Extra large）	xlのみ非表示 .d-xl-none

実際に要素に指定する場合は.(ドット)は必要ありませんので、その点だけご注意ください！

コンディションによって非表示にする

Vuetifyにはもう一点コンディションよって要素を非表示にする方法があります。ブレイクポイントで表示するのではなく、ブレイクポイントで非表示にしたい場合に有効な方法です。

指定方法は上記でご紹介した方法とほとんど同じです。.hiddenから始まるのでわかりやすいかなと思います。

.hidden-{breakpoint}-{condition}

conditionには下記の値を指定することができます。

.hidden-{breakpoint}-only

.hidden-{breakpoint}-and-down

.hidden-{breakpoint}-and-up

意味合いは下記の表の通りです。

.hidden-{breakpoint}-only	指定したブレイクポイントの画面サイズでのみ非表示にする
.hidden-{breakpoint}-and-down	指定したブレイクポイントの画面サイズ以下であれば非表示にする
.hidden-{breakpoint}-and-up	指定したブレイクポイントの画面サイズ以上であれば非表示にする

使用方法も同様で要素のclass属性に指定するだけです！

<div id="app">

  <v-app>

    <div class="hidden-md-only">

        <!-- mdで非表示、それ以外では表示 -->

    </div>

    <div class="hidden-md-and-down">

        <!-- md以下であれば非表示、それ以外では表示 -->

    </div>

    <div class="hidden-md-and-up">

        <!-- md以上であれば非表示、それ以外では表示 -->

    </div>

  </v-app>

</div>

以上がコンディションによる指定方法になります。