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

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

Vuetify でアコーディオン型のリストを表示してみる

VuetifyのUIコンポーネントを実際に試してみるシリーズの記事の、9回目になります。
今回は、アコーディオン型のリストを実装することができる
v-expansion-panels について、書いていきます。

↑こんな感じのリストを表示してみます。


なお、「アコーディオン型のリスト」と書きましたが、
Vuetifyでは、厳密には
「エキスパンションパネル」
と言います。
※これについては、後述します。

Vuetifyの導入方法について等は、以前の記事:
[Vue.js]Vuetify のUIコンポーネントを使ってみる[v-slide, v-caroucel編]CDN経由での導入方法を、
[Vue.js] Vuetify を導入して Material Design をスマートに取り入れる方法 内に、CLI経由での導入方法 をご紹介しています。あわせてご覧ください。

コードをご紹介

<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 を加えるだけです。

オプション(props)を加えたサンプル

基本形のサンプルの下に、各propsを加えたサンプルを作成しましたので
次のリンクより、確認いただけます。
Vuetifyのサンプル_エキスパンションパネルを使用してみる

公式ドキュメント、APIページについて

v-expansion-panels コンポーネントの Vuetify公式ページは以下です。

上でご紹介した各種 props の他にも、さまざまな例が記載されていますので、一読をおすすめします。
エクスパンションパネル・コンポーネント — Vuetify

また、公式APIページはこちらになります。ここには他のコンポーネント同様、設定できる props の一覧が詳細に記載されています。
v-expansion-panel API — Vuetify
v-expansion-panels API — Vuetify

この記事のまとめ

今回は、Vuetify のUIコンポーネントの中から、
アコーディオン型リスト(なんども言いますが、厳密には、Vuetifyでは「エキスパンションパネル」と呼ばれます)
を実装することができる v-expansion-panels についてご紹介しました。

こちらのUIコンポーネントも、前回ご紹介した
タブ型のUIと同様、限られた領域に
リスト表示を効率よくさせる事ができる、という特徴を持っている、優れたUIパーツのひとつですね。
(今回のUIコンポーネントは、縦方向に順序だてて、情報をリスト形式で見せる事ができる、という点も特徴と言えそうです。)

また今回は、表示させるリストの内容自体も
Vue.js の data 内にあらかじめ全て定義しておき、
それを v-for で展開する、
という例でご紹介しました。

いつもの記事の様に、一部分だけをdata定義して、あとは直書きしていたサンプルよりも、
かなり簡潔に書けるという事が見て取れたかと思います。

当サイトでは今後も Vue.js、 Vuetify に関する記事を掲載していく予定です。

※この記事は、内容の品質向上を目的に、随時更新を行う場合があります。