理系公務員のプログラミング日記

前回：Vue3でVuetifyを利用する　①

作成したプロジェクトにダッシュボードのサンプルを作る

新しく作成されたプロジェクトのフォルダは、従来のVue CLIを使った場合と同じ構成です。

srcフォルダのApp.vueを開き、下記のように編集してください。

<template>
  <v-app>
    <v-navigation-drawer color="primary">
      <div class="pa-5">
        <h2>ナビゲーションバー</h2>
        <div class="pt-2">
          <p>
            この部分は画面サイズが1280pxより大きい時のみ表示される設定です。
          </p>
        </div>
      </div>
    </v-navigation-drawer>

    <v-app-bar color="accent" absolute="true">
      <div class="pa-5">
        <h2>ヘッダー</h2>
        <p>この部分は「headerタグ」に変換されます。</p>
      </div>
    </v-app-bar>

    <!-- style属性で通常のcssも利用できる -->
    <v-main style="height: 200vh">
      <v-container fluid>
        <v-card class="mx-auto my-10">
          <p>
            「v-app-bar」と「v-footer」はデフォルトでは画面上下に固定されます(CSSのpositon="fixed"の状態)。
          </p>
          <p>「absolute="true"」属性を付けると、スクロールに従い移動します。</p>
        </v-card>

        <v-card class="mx-auto my-10">
          <p>
            「v-app-bar」と「v-footer」はデフォルトでは画面上下に固定されます(CSSのpositon="fixed"の状態)。
          </p>
          <p>「absolute="true"」属性を付けると、スクロールに従い移動します。</p>
        </v-card>

        <h3>公式から完コピのカルーセルパネルの例</h3>
        <v-carousel>
          <v-carousel-item
            src="https://cdn.vuetifyjs.com/images/cards/docks.jpg"
            cover
          ></v-carousel-item>

          <v-carousel-item
            src="https://cdn.vuetifyjs.com/images/cards/hotel.jpg"
            cover
          ></v-carousel-item>

          <v-carousel-item
            src="https://cdn.vuetifyjs.com/images/cards/sunshine.jpg"
            cover
          ></v-carousel-item>
        </v-carousel>
      </v-container>
    </v-main>

    <v-footer app absolute="true" class="bg-teal">
      <div class="pa-5">
        <h2>フッター</h2>
        <p>この部分は「footerタグ」に変換されます。</p>
      </div>
    </v-footer>
  </v-app>
</template>
<script>
export default {
  name: "App",
};
</script>

レイアウトに関するコンポーネント

v-app

Vuetifyを利用する際に必ず必要なタグ（コンポーネント）です。

全てのVuetifyタグは必ずこのv-appタグの中に含まれる必要があります。

注意したい点として、これは全てのコンポーネントにv-appタグが必要というわけではありません。

全てのコンポーネントの親（つまりApp.vueにあるAppコンポーネント）にさえ配置すれば、その子のコンポーネント達はv-appタグの中に含まれることになります。

v-app-bar

サイトの上部に配置するヘッダーやナビゲーションのコンポーネントを作成してくれるタグです。

htmlのheaderタグに変換されます。

ナビゲーションとして利用することが念頭にあるので、デフォルトでは画面上部に固定されます(CSSのpositon="fixed"の状態)。

v-navigation-drawer

サイトの左部に配置するナビゲーションのコンポーネントを作成してくれるタグです。

htmlのnavタグに変換されます。

location="right"属性を追加することで、サイトの右側に固定することができます。

Vuetify公式での使い方を見ると、このタグを２つ利用し左右二つのサイドバーを作成していることがわかります。

v-footer

サイトの下部に配置するフッターのコンポーネントを作成してくれるタグです。

htmlのfooterタグに変換されます。

v-app-barと同様に、デフォルトでは画面下に固定されています。