前回に引き続き、今回も こちらのブログ記事 を参考にVuetifyコンポーネントを使用してみた感想などを書いていきます。
前回からさらに実装してみたものは以下の通りです。このうち気になったものについて少し書いていこうと思います。
スイッチ・ツールチップ・オーバーフローボタン・スライダー・ダイアログ
モーダルダイアログ・アラート・ツールバー・システムバー・ボトムシート
パンくずリスト・チップ・フローティングアクションボタン・エクスパンションパネル
カレンダー（月）（週）（日）・リスト
・スライダー
音量調整ぐらいでしか用途が思いつかなかったのですが、公式ドキュメント を見てみると
思いのほか使いどころがいろいろありそうで面白く思いました。
縦にできたり数値の高さで色を変えられたりするのも、きれいなUIにしたい時に便利そうです。
・ダイアログ・モーダルダイアログ
これがちょっとわからなくて…どちらもモーダルダイアログのような振る舞いになってしまったのですよね。ダイアログもの方でもスクロールができなかったので…。
モーダルかどうかは結構用途が違ってくるのでもうちょっと調べる必要がありそうです。
・システムバー
アプリを作る時に便利そうだなと思いました。これがあるだけで見た目の印象も結構違いそうですし。
・パンくずリスト
サンプルコードのままでホームに戻ることはできたのですが仕組みがいまだによくわからず…。覚えられたら便利そうなのでもう少し調べて理解を深めたいです。
・カレンダー
Vuetifyでのカレンダーは以前にも実装してみていたのですが、今回は参考にしたブログ記事のやり方で作り直してみました。ついでに週単位・日付単位のものも実装してみました。
プロパティの指定だけで月・週・日を変えられるのでかなり手軽です。
以前から参考サイトとカレンダーの見た目が違うのが気になっていたのですが、こちらのブログ記事だと差異がありませんでした。結局何だったのでしょう…。
あと、横長に表示されてしまっていたのは<v-container>でwidthを指定していなかったのが原因だったようです。