「vue-accordion」を使ってアコーディオンメニューを実装する

vue-accordionとは

 

「vue-accordion」は、アコーディオンメニューコンポーネントです。

非常にシンプルな構成で実装することが可能です。

 

インストール

以下のnpm、CDNを使ってインストールします。

npm

npm install vue-accordion

CDN

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-accordion"></script>

 

gitリポジトリは以下から取得できます。

https://github.com/zeratulmdq/vue-accordion

 

導入手順

simpleなアコーディオンメニューコンポーネントを実装します。

1. ライブラリの取り込み

webpack等の場合 ※モジュール版は未検証です。

import Vue from 'vue'
import {vueAccordion} from 'vue-accordion'
Vue.component('vue-accordion', vueAccordion)

WEBページの場合

Vue.component('vue-accordion', vueAccordion)

2.メニューの要素を設定

new Vue({
  el: "#app",
    data:{
      items: [
          {
              title: 'title',
              text: 'text',
              url: 'http://hoge.com',
              image: 'path/to/img.png'
          }
      ]
    }
})

3. テンプレートを準備

<div id="app">
    <vue-accordion :items="items"></vue-accordion>
</div>

 

サンプル

>>専用ページで確認する

 

 

まとめ

アコーディオンメニューコンポーネントを実装できるライブラリでした。

実装も構成も非常にシンプルで分かり易いです。
デザインにあうようならいかがでしょうか？

 

今日はこの辺でー

 

PS.
先週の金曜日に久々にお休みを頂いたら（40日ぶり）、一日中寝てしまいました。
また今週から更新を頑張っていきますので、よろしくお願いします。