[Vue.js]Vuetifyでシンプルなトグル型スイッチを表示する方法[v-switch]

Vuetifyの記事_v-switchについて

この記事は、Vuetify2.x の内容です。 Vuetify3.x の v-radio に対応した記事は、次になります。
[Vuetify3]Vue.js3に対応したスイッチを使う方法[v-switch]

Vuetifyでトグル形式のスイッチを使ってみる

VuetifyのUIコンポーネントを実際に試してみるシリーズの記事、14回目になります。
今回は、トグル形式(オンの時は次の操作がオフに、オフの時は次の操作がオンになるタイプのやつの事です)
のスイッチを実装することができる
v-switch というコンポーネントについて、書いていきます。

↑こんな感じの、トグル形式のスイッチを表示してみます。

Vuetifyの導入方法について等は、以前の記事:
[Vue.js]Vuetify のUIコンポーネントを使ってみる[v-slide, v-caroucel編]CDN経由での導入方法を、
[Vue.js] Vuetify を導入して Material Design をスマートに取り入れる方法 内に、CLI経由での導入方法 をご紹介しています。あわせてご覧ください。

早速、基本のコードをご紹介

<template>
  <v-switch v-model="mytoggle" />
</template>

↑本当にこれだけです。
Vuetify にあらかじめ定義されているコンポーネントを呼び出しているだけなので、
当然といえば当然なのですが、いつも以上にシンプルで良いですね。

解説など

とてもシンプルな構造なので、解説することはあまりないですけど、すこしだけ。
解説というより、どんなオプションがあるのか、次のセクションを見てもらった方が早いかもしれません。

上記の通り、基本形としては1行で表示可能です。

data は、こんな感じで普通に用意しておけば大丈夫です。
おわかりとは思いますが、最初にオフにしておきたい場合は値を false にしておけば良い、ということですね。

<script>
new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: {
    mytoggle: true,
  }
});
</script>

実際に動くサンプル

今回も、実際に動くサンプルを作成してあります。
次のリンクより、ご覧ください。
Vuetifyのトグル型スイッチサンプル

そのほかのオプション(props)など

この、 v-switch ですが、上記の基本形のほか、アイコンをつけたり、色を変えたり、複数の値を扱ったりできます。

アイコンをつける

<template>
  <v-switch
    v-model="mytoggle"
    messages="Night"
    prepend-icon="mdi-weather-night"
  />
</template>

↑prepend-icon という props を指定して、material-design-icons のアイコン名を指定してあげると、
先頭にアイコンを付けることができます。
また、messages という props を指定すると、トグルスイッチの下にメッセージを表示できます。
material-design-icons については、この導入編の記事を参照してください。
ページの中程に、material-design-icons の読み込み方が書いてあります。

色を変える

<template>
  <v-switch
    v-model="mytoggle"
    color="indigo"
  />
</template>

↑color という props を指定すると、トグル型スイッチの色が変更できます。
指定できる色は、Material Color の色名指定、および css で指定可能な色です。

角丸で包括されたタイプや、フラットなトグルスイッチにする

<template>
  <v-switch
    v-model="mytoggle"
    inset
  ></v-switch>
</template>
<template>
  <v-switch
    v-model="mytoggle"
    flat
  ></v-switch>
</template>

inset という props を指定すると、角丸で包括されたタイプのトグルスイッチに変わります。
flat という props を指定すると、elevation の概念を持たない、フラットなトグルスイッチに変わります。

複数の値に対応したトグルスイッチ

<template>
  <v-switch
    v-model="like"
    label="Vue"
    value="vue"
  ></v-switch>
  <v-switch
    v-model="like"
    label="Wordpress"
    value="wordpress"
  ></v-switch>
  <v-switch
    v-model="like"
    label="JavaScript"
    value="javascript"
  ></v-switch>
</template>

↑上記のように複数のスイッチを並べ、同じ v-model を指定。
data側で、配列の data を紐づけてあげるだけです。
例えば、設定画面で複数のトグルスイッチをオンオフできるようにしておいて、次のページに渡す、
のようなシーンで使えそうですね。

<script>
new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: {
    like: ['vue'],
  }
});
</script>

↑このように、配列の data を用意して、v-model で紐づけるだけです。
最初からオンにしておきたい値は、data のデフォルト値で入れておけば良いです。

props を加えたサンプル

各種 props を加えたサンプルを、先ほどの基本形の下に作成してあります。
次のリンクより、ご覧ください。
Vuetifyのトグル型スイッチサンプル

公式ドキュメント、APIページなど

v-switch コンポーネントの Vuetify公式ページは以下です。

スイッチ・コンポーネント — Vuetify

また、公式APIページはこちらになります。他のコンポーネント同様、設定できる各種 props 項目の一覧が記載されています。
v-switch API — Vuetify

Vuetify 3 の場合

Vue3.x 系統で Vuetify 3 を使用した場合の v-switch の記事を執筆しました!ぜひあわせてご覧ください!!(当ページの記事は、Vue2.x系統でVuetify 2 を使用した内容です。)
[Vuetify3]Vue.js3に対応したスイッチを使う方法[v-switch]

この記事のまとめ

今回は、Vuetify の数々のUIコンポーネントの中から、
トグル型のスイッチを扱うことができる v-switch をご紹介しました。

このトグル型のスイッチの他にも、オンオフ操作をしてもらう際には
チェックボックス、
ラジオボタン
と言った代替の手段が考えられそうですが、
それらは主に
能動的な複数選択の際や、
複数候補から1つの要素を選択してもらう場合に有効な方法であって、

提供する機能がシンプルかつ、
単純にオンオフ操作を提供する場合には
このトグル型スイッチのUIパーツの方が
より直感的で分かりやすいかなと思います(もちろん、設置するページにもよりますが)。

特に、アプリのUI等で、
なんらかの単一機能をオン、オフする場合や、
よくある形では、ダークモードを提供する際に見かける形だったりしますよね。
スイッチのオンオフ時に連動して、
画面を構成する各要素に class を付与する仕組みを用意しておけば、
比較的シンプルに実装できそうですね。

当サイトでは今後も Vue.js、 Vuetify に関する記事を掲載していく予定です。

※この記事は、内容の品質向上を目的に、随時更新を行う場合があります。

この記事をシェアする: