{ "componentChunkName": "component---src-templates-post-js", "path": "/vuetify-v-carouselnoprops7zhong-wojian-zheng-sitemita/", "result": {"data":{"ghostPost":{"id":"Ghost__Post__610a18423986b000013a4e43","title":"【Vuetify】v-carouselのProps７種を検証してみた。","slug":"vuetify-v-carouselnoprops7zhong-wojian-zheng-sitemita","featured":false,"feature_image":null,"excerpt":"ンポーネントの中でも利用したことのない「Carousel」について、色々と検証したことを書いていこうと思います。\n\nv-carouselとは\n主に、複数の画像やコンテンツを一つのスライド内で指定した間隔で順番に表示してくれるコンポーネントです。Webサイトのトップに配置して、おすすめのコンテンツを表示するのに使われているのを見たことがあります。\n\nPropsを7種を検証してみる\nVuetifyの公式APIを確認してみると、v-carouselのPropsは結構ありますが、Props全てにサンプルが用意されていません。実際に業務で使うことがなければ、どんな挙動をするのかわからないので、いくつかのPropsの挙動を検証してみたいと思います。\n\nv-carousel APIAPI for the v-carousel component.Vuetify\n[https://vuetifyjs.com/ja/api/v-carousel/]\nカルーセル・コンポーネントカルーセルコンポーネントは、テキストや画像のスライドなどの視覚的なコンテンツを循環表示させるために使用されます。Vuetify\n[","custom_excerpt":null,"visibility":"public","created_at_pretty":"04 August, 2021","published_at_pretty":"03 June, 2021","updated_at_pretty":"04 August, 2021","created_at":"2021-08-04T13:32:02.000+09:00","published_at":"2021-06-03T12:00:00.000+09:00","updated_at":"2021-08-04T13:44:22.000+09:00","meta_title":null,"meta_description":null,"og_description":null,"og_image":null,"og_title":null,"twitter_description":null,"twitter_image":null,"twitter_title":null,"authors":[{"name":"Yasuhiro Takahashi","slug":"yasuhiro","bio":null,"profile_image":null,"twitter":null,"facebook":null,"website":null}],"primary_author":{"name":"Yasuhiro Takahashi","slug":"yasuhiro","bio":null,"profile_image":null,"twitter":null,"facebook":null,"website":null},"primary_tag":null,"tags":[],"plaintext":"ンポーネントの中でも利用したことのない「Carousel」について、色々と検証したことを書いていこうと思います。\n\nv-carouselとは\n主に、複数の画像やコンテンツを一つのスライド内で指定した間隔で順番に表示してくれるコンポーネントです。Webサイトのトップに配置して、おすすめのコンテンツを表示するのに使われているのを見たことがあります。\n\nPropsを7種を検証してみる\nVuetifyの公式APIを確認してみると、v-carouselのPropsは結構ありますが、Props全てにサンプルが用意されていません。実際に業務で使うことがなければ、どんな挙動をするのかわからないので、いくつかのPropsの挙動を検証してみたいと思います。\n\nv-carousel APIAPI for the v-carousel component.Vuetify\n[https://vuetifyjs.com/ja/api/v-carousel/]\nカルーセル・コンポーネントカルーセルコンポーネントは、テキストや画像のスライドなどの視覚的なコンテンツを循環表示させるために使用されます。Vuetify\n[https://vuetifyjs.com/ja/components/carousels/]mandatory\n公式のAPIでは、Descriptionの欄に説明がありません。翻訳してみると「必須の」という意味でした。defaultでtrueなのでfalseにすると初期表示が空のコンテンツ（何もコンテンツがない状態）が表示されます。シンプルな機能なため、説明がなかったのかなと思います。\n\n初期表示で何も表示されないreverse\nコンテンツのスライド方向が逆になります。通常のスライド方向に慣れてしまうと少し違和感がありますね。\n\nnext-icon, prev-icon\n次のコンテンツ、前のコンテンツに移動するためのボタンのアイコンを変更できます。v-slot:prev \nを利用すればより自由にカスタマイズできますが、アイコンだけ変えたい時に便利ですね。\n\n前へボタン：mdi-arrow-left-thick、次へボタン：mdi-arrow-right-bold-circle-outlineを指定progress,\nprogress-color\n用意されているコンテンツの数を100%したときに、現時点で表示されているコンテンツは何％目であるかを表現してくれるバーが追加されます。デリミターを非表示の際に、残りコンテンツがどれくらい残っているか表現することに使えるかなと思います。progress-colorは指定した色にバーの色が変化します。\n\nコンテンツが次に移る際に、バーが変化しているvertical-delimiters\n指定すると、デリミターが画面左端の縦方向に配置されます。公式APIを確認すると、vertical-delimitersに渡せる値のtypeがstringとなっているのですが、説明部分には特に指定できる文字列の記載がありませんでした。そこで、公式のGitHubを覗きに行くと、、、指定できる文字列を見つけました！、どうやら、leftとrightを指定できるみたいです。\n\nvuetify/VCarousel.ts at 18c2d6ce95978cd2b75a6eaace45141deaa7dbad ·\nvuetifyjs/vuetify🐉 Material Component Framework for Vue. Contribute to\nvuetifyjs/vuetify development by creating an account on GitHub.GitHubvuetifyjs\n[https://github.com/vuetifyjs/vuetify/blob/18c2d6ce95978cd2b75a6eaace45141deaa7dbad/packages/vuetify/src/components/VCarousel/VCarousel.ts#L58]\nrightを指定すると、右側に配置される以上が、v-carouselのPropsでどのようなことができるのか検証した結果になります。\n\n今回は公式のGitHubのソースを直接見てみましたが、説明されていない機能を見つけられるという事があったりと、直接ソースを確認するのはVuetifyの理解を深めるにはとても良い手段だと感じました。\n\nVuetifyのUIコンポーネントはまだまだあるので、今後もやってみようかなと思います","html":"

ンポーネントの中でも利用したことのない「Carousel」について、色々と検証したことを書いていこうと思います。

v-carouselとは

主に、複数の画像やコンテンツを一つのスライド内で指定した間隔で順番に表示してくれるコンポーネントです。Webサイトのトップに配置して、おすすめのコンテンツを表示するのに使われているのを見たことがあります。

Propsを7種を検証してみる

Vuetifyの公式APIを確認してみると、v-carouselのPropsは結構ありますが、Props全てにサンプルが用意されていません。実際に業務で使うことがなければ、どんな挙動をするのかわからないので、いくつかのPropsの挙動を検証してみたいと思います。

v-carousel API
API for the v-carousel component.
Vuetify
カルーセル・コンポーネント
カルーセルコンポーネントは、テキストや画像のスライドなどの視覚的なコンテンツを循環表示させるために使用されます。
Vuetify

mandatory

公式のAPIでは、Descriptionの欄に説明がありません。翻訳してみると「必須の」という意味でした。defaultでtrueなのでfalseにすると初期表示が空のコンテンツ（何もコンテンツがない状態）が表示されます。シンプルな機能なため、説明がなかったのかなと思います。

初期表示で何も表示されない

reverse

コンテンツのスライド方向が逆になります。通常のスライド方向に慣れてしまうと少し違和感がありますね。

next-icon, prev-icon

次のコンテンツ、前のコンテンツに移動するためのボタンのアイコンを変更できます。v-slot:prev を利用すればより自由にカスタマイズできますが、アイコンだけ変えたい時に便利ですね。

前へボタン：mdi-arrow-left-thick、次へボタン：mdi-arrow-right-bold-circle-outlineを指定

progress, progress-color

用意されているコンテンツの数を100%したときに、現時点で表示されているコンテンツは何％目であるかを表現してくれるバーが追加されます。デリミターを非表示の際に、残りコンテンツがどれくらい残っているか表現することに使えるかなと思います。progress-colorは指定した色にバーの色が変化します。

コンテンツが次に移る際に、バーが変化している

vertical-delimiters

指定すると、デリミターが画面左端の縦方向に配置されます。公式APIを確認すると、vertical-delimitersに渡せる値のtypeがstringとなっているのですが、説明部分には特に指定できる文字列の記載がありませんでした。そこで、公式のGitHubを覗きに行くと、、、指定できる文字列を見つけました！、どうやら、leftとrightを指定できるみたいです。

vuetify/VCarousel.ts at 18c2d6ce95978cd2b75a6eaace45141deaa7dbad · vuetifyjs/vuetify
🐉 Material Component Framework for Vue. Contribute to vuetifyjs/vuetify development by creating an account on GitHub.
GitHubvuetifyjs
rightを指定すると、右側に配置される

以上が、v-carouselのPropsでどのようなことができるのか検証した結果になります。

今回は公式のGitHubのソースを直接見てみましたが、説明されていない機能を見つけられるという事があったりと、直接ソースを確認するのはVuetifyの理解を深めるにはとても良い手段だと感じました。

VuetifyのUIコンポーネントはまだまだあるので、今後もやってみようかなと思います

","url":"https://ghost.tech.anti-pattern.co.jp/vuetify-v-carouselnoprops7zhong-wojian-zheng-sitemita/","canonical_url":null,"uuid":"9ee0bf78-6ece-4043-933b-460867cdd1cb","page":null,"codeinjection_foot":null,"codeinjection_head":null,"codeinjection_styles":null,"comment_id":"610a18423986b000013a4e43","reading_time":3}},"pageContext":{"slug":"vuetify-v-carouselnoprops7zhong-wojian-zheng-sitemita"}}, "staticQueryHashes": ["176528973","2358152166","2561578252","2731221146","4145280475"]}