[Vue.js] v-speed-dial を Vuetify で簡単に使ってみる方法[v-speed-dial]

Vuetify関連の記事_v-speed-dialについて

Vuetifyで、スピードダイヤルメニューを使ってみる

VuetifyのUIコンポーネントを実際に試してみるシリーズの記事、21回目になります。
今回は、フローティングアクションボタンから展開されるUIパーツ、スピードダイヤルについての記事です。
これを使用するには、 v-speed-dial というコンポーネントを使っていきます。

↑v-speed-dial を使って、こういうUIパーツを扱ってみます。

スピードダイヤル、そもそもどんなUIパーツ?

スピードダイヤル、というもの自体ですが
こちらはマテリアルデザインのUIコンポーネントの概念のひとつです。
(マテリアルデザインをVue.js上で具現化しているVuetifyにUIコンポーネントがある、ということは、やはりマテリアルデザイン自体にもそういう概念がある、という事です)

詳しい解説が、次のマテリアルデザイン公式サイト内にあります。
Buttons: floating action button – Material Design

↑このMaterial Design公式ページを見るとわかりますが、スピードダイヤルは、
フローティングアクションボタンを押すことによって展開される「3〜6つの関連するアクションを表示できる」ボタンが並んだUIパーツのことです。
(上記公式ページでは、さまざまな用例をみることができます。)

ということで、スピードダイヤルというのが何者か判明したところで、
続いては、コードなどについて書いていきます。

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

v-speed-dialを扱うためのコード

<template>
  <v-speed-dial
    v-model="myfab"
    absolute
    bottom
    right
    direction="left"
    transition="scale-transition"
  >
    <template v-slot:activator>
      <v-btn
        v-model="myfab"
        color="blue-grey darken-4"
        dark
        fab
      >
        <v-icon v-if="myfab">
          mdi-close
        </v-icon>
        <v-icon v-else>
          mdi-plus
        </v-icon>
      </v-btn>
    </template>
    <v-btn
      fab
      dark
      small
      color="blue-grey darken-3"
    >
      <v-icon>mdi-pencil</v-icon>
    </v-btn>
    <v-btn
      fab
      dark
      small
      color="blue-grey darken-2"
    >
      <v-icon>mdi-movie-edit</v-icon>
    </v-btn>
    <v-btn
      fab
      dark
      small
      color="blue-grey darken-1"
    >
      <v-icon>mdi-file-image</v-icon>
    </v-btn>
    <v-btn
      fab
      dark
      small
      color="pink"
    >
      <v-icon>mdi-delete</v-icon>
    </v-btn>
  </v-speed-dial>
</template>

↑スピードダイヤルは、起点となるFAB(フローティングアクションボタン)と、
それを押すことで展開される最大6個までのボタン要素で構成されています。(上記の例では4つのボタンが展開されます。)

スピードダイヤルを使うには、まず v-speed-dial でFAB(フローティングアクションボタン)と各ボタン要素全体をラップします。
(※2~9行目 〜 末尾の v-speed-dial までの部分。)

起点となるFAB(フローティングアクションボタン)は 10~24行目までの部分、
25行目から並んでいる v-btn がFABを押してスピードダイヤルが展開された時に出現する
各ボタン要素になります。

表示、非表示の基準となっているのは、
v-speed-dial と FABとして使っている v-btn (10~24行目まで)
に指定している v-model に紐づく data で、
この data の中身は true/false のいずれかが入っています。
FABをクリックするとこの data に true(trueの場合はfalse)が渡されることにより
スピードダイヤルが展開/非表示になる、というわけです。

v-speed-dial には、見ての通り様々な prop を指定できるのですが、
上記のコードの例でいうと

absolute … position: absolute; の状態にする
bottom … FABが表示される位置を下部に指定
right … FABが表示される位置を右に指定
direction=”left” … スピードダイヤルが展開される方向を指定。この場合は左側。
transition=”scale-transition” … スピードダイヤルが展開された際のトランジションを指定。

という意味になります。
FABの表示位置は top, right, bottom, left が指定できます。
スピードダイヤルが展開される方向(direction)も、同様に上下左右の4方向指定可能です。
スピードダイヤルが展開された際のトランジションは、
Vuetifyに定義されているトランジションをキーワードで指定するか、
または独自に作成したトランジションを指定することも可能です。
Vuetifyの組み込みトランジション一覧は以下リンクを参照。
Transitions — Vuetify

もうお分かりかと思いますが、data については、真偽値が入るものを用意しておけば良いので、
例えば次のようにしておきます。

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

実際に動くサンプル

今回も、実際に動くサンプルを作成してあります。
次のリンクより、確認いただけます。
Vuetifyのスピードダイヤルを使うサンプル

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

v-speed-dial コンポーネントの Vuetify 公式ページは以下です。
フローティングアクションボタンと組み合わせて使うUIパーツなので、
FAB(Floating Action Button)のページ内で紹介されています。

FABコンポーネント — Vuetify

また、公式APIページはこちらになります。他のコンポーネント同様に、使用可能な props の一覧がこのページに記載されています。どんな prop が指定できるか確認することができます。
v-speed-dial API — Vuetify

この記事のまとめ

今回は、Vuetify のUIコンポーネントの中から、
フローティングアクションボタンから展開され、
ユーザーアクションの選択肢として表示することができるボタンメニュー、
v-speed-dial について、ご紹介しました。

この記事の冒頭にもリンクがありますが、Google の Material Design 公式ページの解説も合わせて読むと、
「スピードダイヤル」というUIパーツの本来の意図や構成要素、
について知る事ができるので、良い知見が得られると思います。
Buttons: floating action button – Material Design

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

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