この記事は Vue 2.x 系、 Vuetify 2.x 系 を対象とした記事になります。
2022年3月、Vue 3.x 系統に対応した Vuetify 3 Beta がリリースされました。
Vuetify 3 Beta のインストールを試してみた記事もありますので、ぜひそちらもご覧ください。
対象の記事：Vuetify3 Betaをインストールしてみた件
今回はタイトルの通り、Vue.jsベースの高機能UIフレームワークである Vuetify のUIコンポーネントを使ってみた使用感などを、書いていきたいと思います。
今回ご紹介するのは、通常のスライダー用コンポーネントと、カルーセル型コンポーネントの2つについてです。
↑スライダーは、こんな感じのものが実装できます。
↑カルーセルは、こんな感じのものが実装できます。
Vuetifyの導入方法について
導入方法は、公式のこのページ
Vuetifyをはじめましょう–Vuetify
にもある通り、CLI経由で使う方法と、CDN経由で使う方法があります。
本腰を入れてWebアプリケーション等の制作を行うならおすすめはCLI経由でのインストールですが、
お手軽にまずは試してみたい、という場合はCDN経由で試してみる事もできます。
CLI経由の場合
CLI経由でのインストール方法については、以下の記事に記載しましたので、そちらも合わせてご覧ください。
[Vue.js] Vuetify を導入して Material Design をスマートに取り入れる方法
CDNの場合(おすすめは上記のCLIによる導入です)
CDN経由の場合は下記です。
<head></head> 内に以下の3つを読み込みます(googleフォントとmaterialdesignアイコンはなくても動きます)。
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
bodyの閉じタグ( </body> )の直前に以下を読み込みます。
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
そして、これまたbodyの閉じタグ( </body> )の直前に (これは慣例的なサンプルなので、ケースによっては、他の場所に書いても当然動きます)、
Vue.jsとひもづけるための指定を以下のように書きます。
<script>
new Vue({
el: '#app',
vuetify: new Vuetify(),
})
</script>
上記の、el: で指定した要素がVue.jsと紐づいて動く部分になります。
html側には、このように同名のIDをつけておきます。
<div id="app">
<v-app>
<v-main>
<v-container>
<p>Wow! Good UI Framework 'Vuetify'!</p>
</v-container>
</v-main>
</v-app>
</div>
CDN経由の場合は以上で準備完了です。
スライダーを表示してみる
以下のように<v-slide-group>, <v-slide-item>を使用すると、
スライダーが表示可能です。
※v-img の *******.png となっている部分は適宜、画像のパスを指定してください。また、サンプルコードのためstyleは直書きです。
classを指定する事ももちろん可能です。
<template>
<v-sheet>
<v-slide-group multiple show-arrows>
<v-slide-item v-for="n in 8" :key="n">
<v-card style="margin: 0 20px 0 0; width: 320px; height: 240px;">
<v-img class="white--text align-end" height="120px" src="********.png">
<v-card-title>sample title {{ n }}</v-card-title>
<v-card-text class="text--primary">
{{ n }}番目のカードテキスト
</v-card-text>
</v-card>
<v-slide-item>
</v-slide-group>
</v-sheet>
</template>
↑こんな感じのスライダーが実装できます。v-cardと組み合わせる事で、カード型デザインとの相性も良さそうですね。
v-slide-group, v-slide-item のサンプル
v-slide-group, v-slide-item のサンプル
上記のリンクに、サンプルを用意しました。v-card を使ったカード型UIが並ぶスライダー型のコンテンツです。ご覧ください。
スライダーのVuetify公式ページは以下になります。
スライドグループ・コンポーネント — Vuetify
カルーセル型スライダーを表示してみる
Vuetifyのコンポーネントは、本当に多種多様なものが用意されていまして、中にはカルーセル型のスライダーを実装できるものもあります。
どうするかというと、 <v-carousel> を使用すれば、実装が可能です。
<template>
<v-carousel>
<v-carousel-item
v-for="(item,i) in items"
:key="i"
reverse-transition="fade-transition"
transition="fade-transition"
>
<v-img v-bind:src="item.src" v-bind:lazy-src="item.src" class="grey lighten-2">
<template v-slot:placeholder>
<v-row
class="fill-height ma-0"
align="center"
justify="center"
>
<v-progress-circular
indeterminate
color="blue-grey"
></v-progress-circular>
</v-row>
</template>
</v-img>
</v-carousel-item>
</v-carousel>
</template>
↑上記のように <v-carousel> を使用すると、このようなカルーセル型スライダーが実装できます。
v-carousel, v-carousel-item のサンプル
先ほどの v-slide-item のサンプルの下に、v-carousel の実際に動くサンプルをご用意しました。
v-carousel, v-carousel-item のサンプル
どのような表示ができるか、ぜひご覧ください。
各スライドの画像の元ソースはどこで定義しているかというと、vue.js における data() の部分です。
export default {
data () {
return {
items: [
{
src: 'sample01.jpg',
},
{
src: 'sample02.jpg',
},
{
src: 'sample03.jpg',
},
],
}
},
}
上記のように記述して、items という名前の data を配列として定義しておきます。
この配列のキー src の値として各画像のパスを格納しておき、
それを9行目の v-img に v-bind して値を渡しています。
この辺りの、v-bind等に関してはvue.js公式に、詳しい解説がありますので一読をおすすめします。
こちらも上記のリンクに、サンプルを用意しましたのでご覧ください。
カルーセル型スライダーのVuetify公式ページは以下になります。
カルーセル・コンポーネント — Vuetify
この記事のまとめ
今回は、Vuetifyの豊富なUIコンポーネントの中から、<v-slide-group>, <v-slide-item>、<v-carousel> を使用して通常のスライダー、カルーセル型スライダーを実装する方法についてご紹介しました。
以前も書きましたが、Vue.js と Vuetify は、とてもおすすめの組み合わせです。
当サイトでは今後も Vue.js、 Vuetify についての記事を掲載していく予定です。
※この記事は、内容の品質向上を目的に、随時更新を行う場合があります。