[Vuetify3]v-forを使って、 簡易スライドショーを表示する方法[v-window]

[Vuetify3]v-forを使って、 簡易スライドショーを表示する方法[v-window]
2022年11月1日に満を持してリリースされたVuetify 3 (コードネーム:Titan)
この記事を書いている現在(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-carouselv-tabsの中核コンポーネントとして
用いられているコンポーネント、とのことです。

v-carousel公式解説ページを見ると記載があるのですが、
今回ご紹介した v-window をベースとして、
画像を表示する機能を追加拡張したコンポーネントが v-carousel である、
とのことです。

実際に、v-carousel がレンダリングされたhtmlコードを見てみると、
スライドショー部分に展開されているコードは v-window とほぼ同じものであることがわかります(一部、 v-carousel 用のclassが付与されていたりします)。

この様に、v-windowv-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のUIコンポーネントを実際に使ってみた記事は、次のものがあります。

※ 随時更新中です!!

この記事のまとめ

今回は Vuetify 3 の優れた数々のコンポーネントの中から、
以前ご紹介した v-carousel とよく似た、
v-window の使用方法について、記事を書いてみました。

記事の中ほどでも書きましたが、
v-windowv-carousel の関係性を深く見ていく事で、
UIコンポーネントを拡張する
という概念を知る良いきっかけにもなりうるため、
ぜひ双方のコンポーネントを一度、使ってみることをおすすめします。

この記事が皆さんのより良いWeb制作体験につながれば、嬉しく思います。

※この記事は内容の品質向上を目的に、随時更新を行う場合があります。

この記事をシェアする: