【Vuetify】v-carouselのProps７種を検証してみた。
ンポーネントの中でも利用したことのない「Carousel」について、色々と検証したことを書いていこうと思います。
v-carouselとは
主に、複数の画像やコンテンツを一つのスライド内で指定した間隔で順番に表示してくれるコンポーネントです。Webサイトのトップに配置して、おすすめのコンテンツを表示するのに使われているのを見たことがあります。
Propsを7種を検証してみる
Vuetifyの公式APIを確認してみると、v-carouselのPropsは結構ありますが、Props全てにサンプルが用意されていません。実際に業務で使うことがなければ、どんな挙動をするのかわからないので、いくつかのPropsの挙動を検証してみたいと思います。
mandatory
公式のAPIでは、Descriptionの欄に説明がありません。翻訳してみると「必須の」という意味でした。defaultでtrueなのでfalseにすると初期表示が空のコンテンツ（何もコンテンツがない状態）が表示されます。シンプルな機能なため、説明がなかったのかなと思います。
reverse
コンテンツのスライド方向が逆になります。通常のスライド方向に慣れてしまうと少し違和感がありますね。
next-icon, prev-icon
次のコンテンツ、前のコンテンツに移動するためのボタンのアイコンを変更できます。v-slot:prev を利用すればより自由にカスタマイズできますが、アイコンだけ変えたい時に便利ですね。
progress, progress-color
用意されているコンテンツの数を100%したときに、現時点で表示されているコンテンツは何％目であるかを表現してくれるバーが追加されます。デリミターを非表示の際に、残りコンテンツがどれくらい残っているか表現することに使えるかなと思います。progress-colorは指定した色にバーの色が変化します。
vertical-delimiters
指定すると、デリミターが画面左端の縦方向に配置されます。公式APIを確認すると、vertical-delimitersに渡せる値のtypeがstringとなっているのですが、説明部分には特に指定できる文字列の記載がありませんでした。そこで、公式のGitHubを覗きに行くと、、、指定できる文字列を見つけました！、どうやら、leftとrightを指定できるみたいです。
vuetifyjs以上が、v-carouselのPropsでどのようなことができるのか検証した結果になります。
今回は公式のGitHubのソースを直接見てみましたが、説明されていない機能を見つけられるという事があったりと、直接ソースを確認するのはVuetifyの理解を深めるにはとても良い手段だと感じました。
VuetifyのUIコンポーネントはまだまだあるので、今後もやってみようかなと思います