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)のページ内で紹介されています。
また、公式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 に関する記事を掲載していく予定です。
※この記事は、内容の品質向上を目的に、随時更新を行う場合があります。