この記事を書いている現在(2022年12月17日)、早くも
version 3.0.5
に更新されている様です。
今回は、その Vuetify 3 の優れた数々のコンポーネントの中から、
以前ご紹介した v-carousel とよく似た、
v-window の使用方法について、記事を書いていきます。
なお、この記事を書いた際に Vue3, Vuetify3 を動作させている環境は次のとおりです。
参考までにご確認ください。
・Mac OS Montrey (12.3.1)
・Node.js v16.18.1
↑この Node.js のバージョンは、 Corepack が同梱されているバージョン( v16.10以降 )を使用することをお勧めします。
v-window の使用方法
では早速、v-window
の使用方法です。
基本の形は次のように書きます。
<v-window v-model="myWindow.slideNumber" show-arrows > <v-window-item v-for="n in myWindow.slides" :key="n"> <v-card height="280px"> <v-card-title class="align-center bg-indigo text-white justify-center d-flex h-100"> {{n}} 枚目のスライド </v-card-title> </v-card> </v-window-item> </v-window>
↑上記は、5枚のスライドコンテンツをもつスライドショーを、
スライド部分に v-for
を使用して表示している例です。
使用しているコンポーネントは v-window になります。
このように、v-window を使用する際は、
v-window
の中に子要素として
v-window-item
を配置するのが基本の形になります。
v-window-item が各スライドの親要素となり、
この部分は繰り返しの記述となるため
5行目の様に v-for を使い、あらかじめ定義しておいたデータ変数(下記コード参照)の数ぶんだけ
スライドを生成している、
そんな記述となっています。
データ変数側は、たとえば次の様に用意しておきます。
<script> import { reactive } from 'vue' export default { setup() { const myWindow = reactive ({ slides: 5, slideNumber: 0 }) return { myWindow } } } </script>
↑データ変数として定義した myWindow の、
slides がスライド枚数。
slideNumber を現在何枚目のスライドか、
として使用しています。
(上で書いたhtmlコード側を見ると、
2行目で v-window に v-model”myWindow.slideNumber” として紐付け。
5行目で v-for=”n in myWindow.slides” として、繰り返す数の値として渡している事がわかると思います。)
もちろん、データ変数の名前はなんでも良いです。
上の例では myWindow.slideNumber に 0 を指定しているので
1番目のスライドから開始されますが、仮に、 myWindow.slideNumber の値を 2 に指定しておいた場合、
3番目のスライドから開始される、ということです(0始まりでスライドが生成されるため)。
また、左右のスライド操作の矢印を制御したい場合。v-carousel と同様に、
たとえば、hover時にのみ表示させるようにするには次のように書きます。
<v-window v-model="myWindow.slideNumber" show-arrows="hover" > <v-window-item v-for="n in myWindow.slides" :key="n"> <v-card height="280px"> <v-card-title class="align-center bg-indigo text-white justify-center d-flex h-100"> {{n}} 枚目のスライド </v-card-title> </v-card> </v-window-item> </v-window>
↑v-carousel
の時と同様に、
show-arrows
という prop
を使い、
hover時にのみ左右のスライド操作の矢印を表示するように指定できます。
v-windowは、v-carousel、v-tabs等のコアコンポーネント
ここまで読んで、もうお分かりかと思いますが、
実はこの v-window
、
v-carousel
や v-tabs
の中核コンポーネントとして
用いられているコンポーネント、とのことです。
v-carousel
の公式解説ページを見ると記載があるのですが、
今回ご紹介した v-window
をベースとして、
画像を表示する機能を追加拡張したコンポーネントが v-carousel
である、
とのことです。
実際に、v-carousel がレンダリングされたhtmlコードを見てみると、
スライドショー部分に展開されているコードは v-window とほぼ同じものであることがわかります(一部、 v-carousel 用のclassが付与されていたりします)。
この様に、v-window
と v-carousel
の関係性を紐解いて理解すると、
「UIコンポーネント」というものは、
「複数のUIコンポーネントの集合体」の場合もあるのだという事がわかるかと思います。
つまり、「AというUIコンポーネント」を「ベースとして拡張したものがB」、
という様な、UIパーツを系統だてて運用するのに適した考え方に繋がってくるかと思います。
この考え方があるのとないとでは、一つの案件の中での
UIコンポーネント管理のあり方が大きく変わってくる部分かと思いますので、
一見地味な知識のようでいて、けっこう重要な部分かと思ってます。
Vuetify3 公式の v-window 解説ページ
Vuetify3 公式の v-window
についての公式解説ページは以下になります。
Window component – Vuetify
v-window
で使用する事ができる props の一覧、詳細な仕様がまとめられている公式ページは以下になります。
v-window API — Vuetify
v-window-item API — Vuetify
また、今回ご紹介した v-window
に、画像を表示する機能を追加拡張したコンポーネントが、v-carousel
である、
という記述がある v-carousel 公式ページは以下になります。
Carousel component – Vuetify
Vuetify3 のUIコンポーネントを実際に使ってみた他の記事
- [Vuetify3]v-forを使って、 簡易スライドショーを表示する方法[v-window]
- [Vuetify3]Vue.js3に対応したカルーセル(スライドショー)を使う方法[v-carousel]
- [Vuetify3]Vue.js3に対応したcardを使う方法[v-card]
- [Vuetify3]Vue.js3に対応したsnackbar(通知表示)を使う方法[v-snackbar]
- [Vuetify3]Vue.js3に対応した綺麗なボタンを使う方法[v-btn]
- [Vuetify3]Vue.js3に対応したスイッチを使う方法[v-switch]
- [Vuetify3]Vue.js3に対応したラジオボタンを使う方法[v-radio]
- [Vuetify3]Vue.js3に対応したチェックボックスを使う方法[v-checkbox]
この記事のまとめ
今回は Vuetify 3 の優れた数々のコンポーネントの中から、
以前ご紹介した v-carousel とよく似た、
v-window の使用方法について、記事を書いてみました。
記事の中ほどでも書きましたが、
v-window と v-carousel の関係性を深く見ていく事で、
「UIコンポーネントを拡張する」
という概念を知る良いきっかけにもなりうるため、
ぜひ双方のコンポーネントを一度、使ってみることをおすすめします。
この記事が皆さんのより良いWeb制作体験につながれば、嬉しく思います。
※この記事は内容の品質向上を目的に、随時更新を行う場合があります。