【Vue】Vuetify ～ コンポーネント編 ～

Vue フロントエンドフレームワーク

■ はじめに

https://dk521123.hatenablog.com/entry/2020/12/26/000242

の続き。
今回は、Vuetify の コンポーネント について取り上げる

目次

【０】始める前に
　１）デザイン例 / テンプレート
　２）App.vue の修正
【１】v-app
【２】v-content / v-main
【３】v-container / v-row / v-col / v-layout / v-flex
【４】v-app-bar / v-toolbar / v-system-bar / v-footer
【５】v-navigation-drawer
【６】v-space
【７】v-img
【８】v-btn
【９】v-icon
■ 補足：router-xxxx (router-link / router-view) について

なお、ユーザ通知に関わるコンポーネントについては、
以下の関連記事を参照のこと。

Vuetify ～ ユーザへの通知 ～
https://dk521123.hatenablog.com/entry/2021/03/01/225352

【０】始める前に

１）デザイン例 / テンプレート

以下のサイトのデザイン例やテンプレートは勉強になる

Wireframes 

* Examples をみて、気になったらGithubアイコンボタン押すと
　Githubに移動し、ソースを参照できる

https://vuetifyjs.com/en/getting-started/wireframes/
themes
https://vuetifyjs.com/en/resources/themes/

２）App.vue の修正

* App.vue を以下のように修正している

サンプル 

<template>
  <v-app>
    <router-view/>
  </v-app>
</template>

<script lang="ts">
import Vue from 'vue';

export default Vue.extend({
  name: 'App',
  data: () => ({
    //
  }),
});
</script>

【１】v-app

* 必須コンポーネント
* v-navigation-drawerなどのコンポーネントを使用する場合、
　v-app直下に配置する

構造イメージ 

<template>
  <v-app>
    <!-- ★ここにVuetifyのコンポーネントを入れます★ -->
  </v-app>
</template>

【２】v-content / v-main

* v-content は、Vuetify 2.3.0から非推奨らしいので、
　v-main を使うべき。

https://qiita.com/00__/items/bfe971ac0be84b7e184b

構造イメージ 

<template>
  <v-app>
    <!-- ★ ここに注目 ★ -->
    <v-content>
      <router-view />
    </v-content>
  </v-app>
</template>

【３】v-container / v-row / v-col / v-layout / v-flex

* Vuetify は、12分割のグリッドシステムを採用している
 => その際に必要なタグ。

https://vuetifyjs.com/ja/components/grids/#section-4f7f304465b9
v-container 

* グリッドシステムを利用するための元になる入れ物を作るタグ

v-row 

* 行(row)の定義

v-col 

* 列(column)の定義

サンプル 

<template>
  <v-app>
    <v-content>
      <v-container>
        <!-- 1行目 -->
        <v-row class="grey lighten-3" style="height: 150px;">
          <v-col style="background-color: #FFCDD2">
            01-01
          </v-col>
          <v-col style="background-color: #F8BBD0">
            01-02
          </v-col>
          <v-col style="background-color: #E1BEE7">
            01-03
          </v-col>
          <v-col style="background-color: #D1C4E9">
            01-04
          </v-col>
          <v-col style="background-color: #C5CAE9">
            01-05
          </v-col>
          <v-col style="background-color: #BBDEFB">
            01-06
          </v-col>
          <v-col style="background-color: #B3E5FC">
            01-07
          </v-col>
          <v-col style="background-color: #B2EBF2">
            01-08
          </v-col>
          <v-col style="background-color: #B2DFDB">
            01-09
          </v-col>
          <v-col style="background-color: #C8E6C9">
            01-10
          </v-col>
          <v-col style="background-color: #DCEDC8">
            01-11
          </v-col>
          <v-col style="background-color: #F0F4C3">
            01-12
          </v-col>
        </v-row>
        <!-- 2行目 -->
        <v-row cols="4" class="grey lighten-3" style="height: 150px;">
          <v-col style="background-color: #FFF9C4">
            02-01
          </v-col>
          <v-col cols="8" style="background-color: #FFECB3">
            02-02
          </v-col>
        </v-row>
      </v-container>
    </v-content>
  </v-app>
</template>

補足：v-layout / v-flex について

* Vue 1.x では、 v-row / v-col の代わりに
　 v-layout / v-flex を使用する

v-layout 

*  v-row の Vue 1.x 版

v-flex 

*  v-col の Vue 1.x 版

【４】v-app-bar / v-toolbar / v-system-bar / v-footer

v-app-bar / v-toolbar / v-system-bar 

* ヘッダー部として使える

https://vuetifyjs.com/ja/components/app-bars/
https://vuetifyjs.com/ja/components/toolbars/
https://vuetifyjs.com/ja/components/system-bars/

v-footer 

* フッター部を作成する際に使用

https://vuetifyjs.com/ja/components/footer/

サンプル 

<template>
  <v-app>
    <!-- ヘッダー -->
    <div>
      <v-app-bar>
        Header
      </v-app-bar>
    </div>
    <!-- 本文 -->
    <v-content>
      <v-container>
         Body
      </v-container>
    </v-content>
    <!-- フッター -->
    <v-footer>
      Footer
    </v-footer>
  </v-app>
</template>

【５】v-navigation-drawer

* サイドバーとして使用できる

https://vuetifyjs.com/ja/components/navigation-drawers/

プロパティ 

* expand-on-hover : ホバーすると展開する
　（表示幅が広がる）

* permanent : サイドバーが縮小表示しても表示したままになる
　（デフォルトだと非表示）

https://qiita.com/rubytomato@github/items/1c75c2b98b8bae410ee1

サンプル 

<template>
  <v-app id="inspire">
    <v-system-bar app>
      <v-spacer></v-spacer>
      <v-icon>mdi-square</v-icon>
      <v-icon>mdi-circle</v-icon>
      <v-icon>mdi-triangle</v-icon>
    </v-system-bar>
    <!-- 左サイドバー -->
    <v-navigation-drawer
      v-model="drawer"
      app
      class="pt-4"
      color="grey lighten-3"
      mini-variant
      expand-on-hover
    >
      <v-list
        nav
        dense
      >
        <v-list-item link>
          <v-list-item-icon>
            <v-icon>mdi-folder</v-icon>
          </v-list-item-icon>
          <v-list-item-title>My Files</v-list-item-title>
        </v-list-item>
        <v-list-item link>
          <v-list-item-icon>
            <v-icon>mdi-account-multiple</v-icon>
          </v-list-item-icon>
          <v-list-item-title>Shared with me</v-list-item-title>
        </v-list-item>
        <v-list-item link>
          <v-list-item-icon>
            <v-icon>mdi-star</v-icon>
          </v-list-item-icon>
          <v-list-item-title>Starred</v-list-item-title>
        </v-list-item>
      </v-list>
    </v-navigation-drawer>
    <!-- 右サイドバー -->
    <v-navigation-drawer
      app
      clipped
      right
    >
      <v-list>
        <v-list-item
          v-for="n in 5"
          :key="n"
          link
        >
          <v-list-item-content>
            <v-list-item-title>Item {{ n }}</v-list-item-title>
          </v-list-item-content>
        </v-list-item>
      </v-list>
    </v-navigation-drawer>
    <!-- メイン : pl-0 => padding left : 0px -->
    <v-main class="pl-0">
      <v-content>
        <v-container>
          <v-row cols="4" class="grey lighten-3" style="height: 150px;">
            <v-col style="background-color: #FFF9C4">
              01
            </v-col>
            <v-col cols="8" style="background-color: #FFECB3">
              02
            </v-col>
          </v-row>
        </v-container>
      </v-content>
    </v-main>
    <!-- フッター（app:コンテンツの幅を自動調整＆固定） -->
    <v-footer
      app
      color="#5f5f5f"
    >
      <v-spacer />
      <span style="color: white">
        &copy; 2021 sample.com All Rights Reserved.
      </span>
    </v-footer>
  </v-app>
</template>

【６】v-space

* 2つのコンポーネントの間にスペースをとりたい場合に使用

サンプル 

<dive>
  <!-- なんか -->
</div>
<v-spacer></v-spacer>
<dive>
  <!-- なんか -->
</div>

【７】v-img

* 画像表示

サンプル 

<v-img
  alt="Vuetify Logo"
  class="shrink mr-2"
  contain
  src="https://cdn.vuetifyjs.com/images/logos/vuetify-logo-dark.png"
  transition="scale-transition"
  width="40"
/>

【８】v-btn

* ボタン表示するためのコンポーネント

サンプル 

<v-btn
 href="https://github.com/vuetifyjs/vuetify/releases/latest"
 target="_blank"
 text
>
 <span class="mr-2">Latest Release</span>
   <v-icon>mdi-open-in-new</v-icon>
</v-btn>

【９】v-icon

* アイコン（Material Design Icons）を表示するコンポーネント

サンプル 

<v-icon>mdi-open-in-new</v-icon>

■ 補足：router-xxxx (router-link / router-view) について

* router-link / router-view については、以下の関連記事を参照のこと。

Vue Router ～ 入門編 ～
https://dk521123.hatenablog.com/entry/2020/12/24/000000

参考文献

https://qiita.com/rubytomato@github/items/07fe07e64482f8f03ef3
https://www.if-blog.site/edgwbs/book_storage_vuetify/

関連記事

Vuetify ～ 入門編 ～
https://dk521123.hatenablog.com/entry/2020/12/26/000242
Vuetify ～ ユーザへの通知 ～
https://dk521123.hatenablog.com/entry/2021/03/01/225352
Vuetify ～ ローディング中の表示 ～
https://dk521123.hatenablog.com/entry/2021/03/03/111740
Vuetify に関するトラブルシューティング
https://dk521123.hatenablog.com/entry/2021/02/08/000000
Vue Router ～ 入門編 ～
https://dk521123.hatenablog.com/entry/2020/12/24/000000