【Vue.js】Vuetifyにパンくず、スライダー、タイル、アコーディオン、カレンダーを配置（v-carousel、v-carousel、v-card、v-expansion-panels、v-calendar）

Vue.jsの続きです。前回はVuetifyのヘッダー、フッターを配置してみました。今回はさらにいろんなパーツを配置してみます。パンくず（v-carousel）、スライダー（v-carousel）、タイル（v-card）、アコーディオン（v-expansion-panels）、カレンダー（v-calendar）を配置してみました。それではいきましょう！

【目次】

前回記事

※参考：【Vue.js】Vuetifyにヘッダー、フッターを配置（v-app-bar、v-footer） - クモのようにコツコツと

前回のおさらい

Vuetifyのヘッダー、フッダーを配置。

See the Pen Vuetify 04 by イイダリョウ (@i_ryo) on CodePen.

v-app-bar、v-footerを使用している。詳細は前回記事を参照。

※参考：【Vue.js】Vuetifyにヘッダー、フッターを配置（v-app-bar、v-footer） - クモのようにコツコツと

今回はさらにいろいろ配置してみた！

Vuetify公式サイトのサンプルで目についたよく使いそうなUIパーツをピックアップ。

※参考：https://vuetifyjs.com/en/components/api-explorer

パンくずリスト（v-breadcrumbs ）

パンくずリストリストを設置してみる。

See the Pen Vuetify 05 by イイダリョウ (@i_ryo) on CodePen.

ヘッダーの下にパンくずリストが表示されている。

HTMLコード

   <div>
    <v-breadcrumbs :items="items" divider=">"></v-breadcrumbs>
  </div>

HTMLはシンプル。:items属性でitemsと紐付けし、divider属性でパンくずを繋ぐ記号を>に指定。

JSコード

    new Vue({
      el: '#app',
      vuetify: new Vuetify(),
        data: () => ({
        //（中略）
        //パンくず
          items: [
        {
          text: 'Home',
          disabled: false,
          href: 'https://codepen.io/i_ryo',
        },
        {
          text: '会社概要',
          disabled: false,
          href: 'https://codepen.io/i_ryo/pens/public',
        },
        {
          text: 'ごあいさつ',
          disabled: true,
          href: 'https://codepen.io/i_ryo/pen/WNezWJg',
        },
      ],
  })
    })

• itemsオプションの値は配列
• 配列の中がさらに連想配列になっていてる
• textキーの値は表示される文字列
• disabledキーの値がtrueだとリンクが無効になるようだ
• hrefキーの値はリンク先のURL

パンくずの中身はJSで設定されている。

スライダー（v-carousel）

スライダーを配置してみる

See the Pen Vuetify 06 by イイダリョウ (@i_ryo) on CodePen.

パンくずの下にスライダーが追加されている。横にスライドする。

    <v-carousel>
    <v-carousel-item
      v-for="(color, i) in colors"
      :key="color"
    >
      <v-sheet
        :color="color"
        height="100%"
        tile
      >
        <v-row
          class="fill-height"
          align="center"
          justify="center"
        >
          <div class="display-3">すらいど {{ i + 1 }}</div>
        </v-row>
      </v-sheet>
    </v-carousel-item>
  </v-carousel>

• v-carouselを配置
• v-carousel-itemの属性、v-forでcolors（JSに記載）の色の繰り返しを設定、:keyでcolorと紐付け
• v-sheetも:colorでcolorの値と紐付け、高さ指定、tile型を指定
• v-rowでカードの高さ、文字の揃えなどを指定
• .display-3内のマスタッシュタグでv-forのiに1を加えた数値を表記

JSコード

    new Vue({
      el: '#app',
      vuetify: new Vuetify(),
        data: () => ({
      //（中略）
      //スライダー
        colors: [
        'primary',
        'secondary',
        'yellow darken-2',
        'red',
        'orange',
      ],
     })
    })

colorsの中の配列でHTMLのv-forで繰り返す色を指定。

タイル（v-card）

タイル状のカードを配置してみる。

See the Pen Vuetify 07 by イイダリョウ (@i_ryo) on CodePen.

スライダーの下にタイルを表示。公式サイトではタイルは1枚だがここでは3枚配置してみた。

HTMLコード

   <v-layout wrap>
     <v-flex xs12 sm6 md4 text-center my-5>
   <v-card
    max-width="344"
    class="mx-auto"
  >
    <v-card-title>たいとるなんですこれは</v-card-title>
    <v-card-text>説明文、説明文。説明文、説明文。説明文、説明文。説明文、説明文。</v-card-text>
    <v-card-actions>
      <v-btn text>もっと見る</v-btn>
    </v-card-actions>
  </v-card>       
  </v-flex>
      
     <v-flex xs12 sm6 md4 text-center my-5>
   <v-card
    max-width="344"
    class="mx-auto"
  >
    <v-card-title>たいとるなんですこれは</v-card-title>
    <v-card-text>説明文、説明文。説明文、説明文。説明文、説明文。説明文、説明文。</v-card-text>
    <v-card-actions>
      <v-btn text>もっと見る</v-btn>
    </v-card-actions>
  </v-card>       
  </v-flex>
      
     <v-flex xs12 sm6 md4 text-center my-5>
   <v-card
    max-width="344"
    class="mx-auto"
  >
    <v-card-title>たいとるなんですこれは</v-card-title>
    <v-card-text>説明文、説明文。説明文、説明文。説明文、説明文。説明文、説明文。</v-card-text>
    <v-card-actions>
      <v-btn text>もっと見る</v-btn>
    </v-card-actions>
  </v-card>       
  </v-flex>
  </v-layout>

• v-cardでカードの最大幅344pxと横を成り行きにする設定
• v-card-titleにタイトルに表示される文字
• v-card-textに本文に表示される文字
• v-card-actionsでアクションを設定
• v-btn textでアクションに表示する文字

v-card-actionsでホバーでグレーになったりクリックでホワンとアニメーションする設定と紐づいているようだ。

なお、v-cardの外で囲っているv-layoutとはv-flexは前々回のボタン配置で書いた横並び設定。

※参考：【Vue.js】Vuetifyでボタンを並べてみる（v-app、v-content、v-container、v-layout、v-flex、v-btn） - クモのようにコツコツと

アコーディオン（v-expansion-panels）

アコーディオンを配置してみる。

See the Pen Vuetify 08 by イイダリョウ (@i_ryo) on CodePen.

タイルの下に配置した。タイトル部分をクリックすると本文が開く。スマホで使えるUI。

   <v-expansion-panels>
    <v-expansion-panel
      v-for="(item,i) in 5"
      :key="i"
    >
      <v-expansion-panel-header>あこーでぃおん</v-expansion-panel-header>
      <v-expansion-panel-content>
        開くと説明文がでてくるよ。開くと説明文がでてくるよ。開くと説明文がでてくるよ。開くと説明文がでてくるよ。開くと説明文がでてくるよ。開くと説明文がでてくるよ。開くと説明文がでてくるよ。
      </v-expansion-panel-content>
    </v-expansion-panel>
  </v-expansion-panels>

• v-expansion-panelsの中にv-expansion-panelを配置（今回はv-forで同じものをループ）
• v-expansion-panel-headerにタイトル
• v-expansion-panel-contentに本文

これはとてもシンプルな構成でスタイルやUIアニメは最初から用意されている。

カレンダー（v-calendar）

ちょっと凝った構成のパーツを配置してみる。カレンダーがあった。

See the Pen Vuetify 09 by イイダリョウ (@i_ryo) on CodePen.

アコーディオンの下に表示されている。画面幅で調整されていてすごいこれ！

HTMLコード

     <v-sheet height="500">
    <v-calendar
      type="month"
      now="2019-01-08"
      value="2019-01-08"
      :events="events"
    ></v-calendar>
  </v-sheet>

• v-sheetで高さを指定
• v-calendarでタイプ（月表示）、表示する月、紐づけるJSのオプション（events）などを設定

カレンダー上に表示されている予定はJSに書いてある。

JSコード

    events: [
        {
          name: '帰省',
          start: '2018-12-30',
          end: '2019-01-02',
        },
        {
          name: '仕事始め',
          start: '2019-01-07',
        },
        {
          name: '初詣',
          start: '2019-01-03',
        },
        {
          name: 'お正月',
          start: '2019-01-01',
        },
        {
          name: '会議',
          start: '2019-01-21',
        },
        {
          name: '展示会',
          start: '2019-01-30',
          end: '2019-02-01',
        },
      ],

eventsオプションのnameで表示する文字、start、endで該当する日を指定している。（endがないものは1日）

最後に

いろいろ配置してみたが、どれも構成がシンプルですね。HTMLで完結しているものも多い。そしてCSSは1行も書いてません！よく「bootstrap臭」なんて揶揄がありますが、Vuetifyで漂うのは「マテリアルデザイン臭」なので、マテリアルデザインで作りたいサイトはスタイル修正をする必要はほとんどないのではないでしょうか。

次は新分野「Vuex」に調整してみたく！それではまた！

---

※参考：Vue.jsの習得のためにやったことまとめ
qiita.com