【Vue.js】【Vuetify】Vuetifyの備忘録

Vuetifyを作成するときに調べたサイトや、簡単なコーディング内容を記録していきます。記載時の環境としては「vue-cli4」を利用していることが前提となっています

Vuetifyのインストール

プロジェクト作成後、プロジェクトフォルダ内で下記コマンドを実施。プリセットの選択は「default」(公式で推奨)

$ vue add vuetify

・App.vueにツールバーをVuetifyで作成したコードが追加される(v-appタグ内)
・src/pluginsフォルダ内に「vuetify.js」が作成される。設定等をここで行う
参照：クイックスタート

Vuetify利用時の注意点

vuetifyはv-appタグ内で利用できます。一部のみに適用したい場合などはコンポーネントごとに記載するか、全体に適用するためVue.appに記載するか検討が必要。(Vue.appで全体をv-appタグで囲った後に、コンポーネントごとにv-appを定義するとレイアウトが壊れましたので注意が必要)

レイアウトについて

基本的にはGridシステムを使って「card」や「Sheet」で中身を作っていくイメージ？

カードとシートの違いについて

どちらも役割は同じだが、高機能なのが「カード」シンプルに使えるのが「シート」
(参考：What's the difference between Vuetify card and sheet?)

テキストについて

クラスを付与して文字サイズやフォントの指定をおこなう
(参考：Text and typography)

marginやpaddingについて

クラスを付与して指定をおこなう
(参考：Spacing)

表示制御について

下記通りクラスを付与して指定をおこなう
・「xs」の場合 d-{value} .「sm, md, lg, xl」の場合は、.d-{breakpoint}-{value}.
(参考：Display )

ツールバー(ヘッダー)の作成

下記手順で作成する。
・v-app-varの追加
・タイトルの追加(「v-toolbar-title」かタイトル用の画像を「v-img」で追加)
・必要に応じてボタン・タブの追加

    <div>
        <v-app-bar
           app
           color="primary"
           dark
           prominent
           shrink-on-scroll
           src="@/assets/shoe_polish_header.jpg"
       >
           <v-toolbar-title><v-icon x-large>mdi-shoe-formal</v-icon> Shoes Polish Site</v-toolbar-title>
       </v-app-bar>
   </div>

プロパティについて
・app : 常に画面の上部でついてくるようになります
・prominent : サイズを大きくできる
・src : 背景画像の設定が可能
・shrink-on-scroll : スクロール時にサイズを小さくする
・fade-img-on-scroll : スクロール時に画像を消す

スロットについて
・img : srcで設定した画像について加工可能

Vuetifyではツールバーに「v-toolbarコンポーネント」を提供していますが、サイトのメインのツールバーには「v-app-varコンポーネント」を利用することが通常のようです。
(参考：What is difference between v-app-bar and v-toolbar in vuetify?)

ヘッダーへのボタン・タブの追加

・ボタンの追加
v-app-barタグ内に下記の通り記述する

<v-spacer></v-spacer> <!-- ボタンを右寄せする -->
<v-btn text large class="font-weight-regular">Home</v-btn>

・タブの追加
v-app-barタグ内に下記の通り記述する

<v-tabs>
　　<v-tab>Home</v-tab>
　　<v-tab>Booking</v-tab>
</v-tabs>

アイコンの追加

「v-iconコンポーネント」を利用する。

<v-icon>mdi-iconName</v-icon>

Vuetifyではデフォルトで「Material Design Icons」を利用できるので「」から使いたいものを探し「mdi-」を付けることで利用できます。

画像(画像の修正)

「v-imgコンポーネント」を利用する

プロパティについて
・contain : 画像をすべて表示する
・gradient : 画像に簡単な加工ができる

画像のsrcの指定方法による差異について

参考：【Vue.js】imgタグのsrc要素は指定の仕方によって読み込み方が違う

視差効果付き画像

「v-parallaxコンポーネント」を利用する
プロパティについて
・src : 画像のソースを指定する
v-imageのようにgradientを入れる方法
・v-parallaxにgradientは対応していないので、CSSで「background: linear-gradient()」を追加して対応する
(参考： reddit:How to dimm v-parallax image?)
・CSSをうまくできなかったので「v-overlay」でcolorでグラデーション無しの色変更のみ行いました。
(参考 : stack overflow:How to make gradient over v-parallax image with vuetify?)

カレンダーの追加

「v-calendarコンポーネント」を利用する。
・カレンダーの前後ページの遷移
v-modelを設定しないとページ遷移が動きません。v-modelを定義するとcalrendarのfunctionのprev()やnext()によってページ遷移が可能となります

<v-calendar
   ref="calendar"
   v-model="focus"
   color="primary"
   type="month"
></v-calendar>

$refs.calendar.prev()
$refs.calendar.next()

this.$refs.calendar.titleを利用した月の表示について
カレンダーの描画よりも先に読み取られてしまうため、初期表示時に表示できない問題発生(調査中)