vue.js

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

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

vue-accordionとは

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

 

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

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

 

インストール

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

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日ぶり)、一日中寝てしまいました。
また今週から更新を頑張っていきますので、よろしくお願いします。

  • この記事を書いた人

カバノキ

印刷会社のWEB部隊に所属してます。 WEB制作に携わってから、もう時期10年になります。 普段の業務では、PHPをメインにサーバーサイドの言語を扱っています。 最近のお気に入りはJavascriptです。 Vue.jsを狂喜乱舞しながら、社内に布教中です。

-vue.js
-, , , ,