[Vue.js]Vuetifyでアコーディオン型のリストを実装する方法[v-expansion-panel] :2ページ目

Vue.js&Vuetifyの記事_v-expansion-panelsについて

コードをご紹介

<template>
  <v-expansion-panels>
    <v-expansion-panel
      v-for="list in lists"
      :key="list.id"
    >
      <v-expansion-panel-header>
        {{ list.title }}
      </v-expansion-panel-header>
      <v-expansion-panel-content>
        {{ list.text }}
      </v-expansion-panel-content>
    </v-expansion-panel>
  </v-expansion-panels>
</template>

解説など

では、詳しく見ていきましょう。
この v-expansion-panels というコンポーネントも、基本系はとてもシンプルで使いやすいです。
上記の例でいうと、
2行目にある

<v-expansion-panels>

14行目の

</v-expansion-panels>

閉じタグでラップされた範囲の要素がアコーディオン型リストの領域として表示されることになります。

7~9行目の <v-expansion-panel-header> で囲まれた部分が、
各リストのタイトルが表示される部分になります（ここを押してリストを開閉できる）。

10~12行目の <v-expansion-panel-content> で囲まれた部分が、
各リストを開いた際の内容の部分です。

今回のサンプルでは、あらかじめ Vue.js の data に
lists というデータを配列で定義しておき、それを
v-for をつかって順番に取り出しています。

<script>
  new Vue({
    el: '#app',
    vuetify: new Vuetify(),
    data: {
      lists: [
          {id: 01, title: 'タイトル01',  text: 'リストの内容01'},
          {id: 02, title: 'タイトル02',  text: 'リストの内容02'},
          {id: 03, title: 'タイトル03',  text: 'リストの内容03'},
          {id: 04, title: 'タイトル04',  text: 'リストの内容04'},
          {id: 05, title: 'タイトル05',  text: 'リストの内容05'}
        ]
      }
    });
</script>

↑こちらが Vue 内の data 定義の例になります。
このように、lists（名前はなんでも良いです）という配列に各リスト項目に必要な値を定義しておいて、
それぞれ
{{ list.title }}
{{ list.text }}
として v-for の中で展開して順番に取り出しているわけです。

今回も、シンプルな構造で、
比較的簡単にアコーディオン型のリスト（※厳密には、Vuetifyでは「エキスパンションパネル」と呼ばれています）を
表示させる事が可能です。

以上を組み合わせて記述することで、次のサンプルのような表示ができます。

実際に動くサンプル

今回も実際に動くサンプルを作成してあります。
次のリンクより、ご覧ください。
Vuetifyのサンプル_エキスパンションパネルを使用してみる

「アコーディオン」と「エキスパンションパネル」の違い

上のコードの解説文中に「エキスパンションパネル」という言葉がでてきましたが、
「これって、アコーディオン型リストじゃないの？」
と思う方もいるかと思います。

Web制作の現場でも、「エキスパンションパネルを実装して」という言葉は、なかなか聞きませんよね。
「アコーディオンを実装して」ならよく聞きますが。

で、「エキスパンションパネル」ってなんなの？
という問いについては、次のリンクを見れば納得するかと思います。
どうやら、これのことを指しているようです。
Expansion panels – Components – Material Design
↑Material Design の中に存在するコンポーネントのひとつなんですね。

そもそも、Vuetify は Material Design を上手に Vue.js 上に組み込めるフレームワーク、
という側面も持っているので、これを見て納得しました。

そのほかのオプション(props)

この v-expansion-panels ですが、上のような基本形のリストのほか、
様々なオプション(オプションというより、厳密には props )が用意されています。
たとえば、
(1).上記の基本形の例は、「エキスパンションパネル」と呼ばれるものだが、それをいわゆる「アコーディオン」にする
(2).デフォルトでは他のリストを開くと現在アクティブなリストが閉じるが、それを開いたままにする
(3).開いたときに少し縮小、または少し拡大して見せる

などがあります。

(1).いわゆる「アコーディオン」にする

(1)は、以下のようにします。

<template>
  <v-expansion-panels accordion="true">
    <v-expansion-panel
      v-for="list in lists"
      :key="list.id"
    >
      <v-expansion-panel-header>
        {{ list.title }}
      </v-expansion-panel-header>
...中略...

↑このように、
2行目の v-expansion-panels に対して、 accordion という props を加えてあげます。
accordion=”true” としていますが、単純に accordion と指定するだけでも可です。
すると、リストを開いたときに、そのままスライドダウンするように挙動が変わり、
いわゆる「アコーディオン」型のリストになります。

(2).現在アクティブなリストを、開いたままにする

(2)は、次のように指定します。

<template>
  <v-expansion-panels multiple="true">
    <v-expansion-panel
      v-for="list in lists"
      :key="list.id"
    >
      <v-expansion-panel-header>
        {{ list.title }}
      </v-expansion-panel-header>
...中略...

↑このように、
2行目の v-expansion-panels に対して、 multiple という props を加えてあげます。
multiple=”true” としていますが、単純に multiple と指定するだけでも大丈夫です。
すると、現在アクティブなリストが開いたまま、他のリストを開く事ができるようになります。

(3).開いたときに少し縮小、または少し拡大して見せる

(3)は、次のように props を指定します。

<template>
  <v-expansion-panels inset>
    <v-expansion-panel
      v-for="list in lists"
      :key=" list"
    >
      <v-expansion-panel-header>
        {{ list.title }}
      </v-expansion-panel-header>
...中略...

↑開いたときに少し縮小します。

<template>
  <v-expansion-panels popout>
    <v-expansion-panel
      v-for="list in lists"
      :key="list.id"
    >
      <v-expansion-panel-header>
        {{ list.title }}
      </v-expansion-panel-header>
...中略...

↑開いたときに少し拡大します。
それぞれ、v-expansion-panels に
inset または popout
という props を加えるだけです。