Vue.jsで再利用可能なアコーディオンのコンポーネントを実装する方法を解説

アコーディオンは、Webサイトやスマホアプリでよく使用されるUIコンポーネントです。TailwindCSSやBootstrapなどのライブラリにも必ずありますが、再利用可能な柔軟性のあるものではありません。

スタイルを簡単にカスタマイズできる再利用可能なアコーディオンのコンポーネントをVue.jsで実装する方法を紹介します。

Vue.jsで再利用可能なアコーディオンのコンポーネントを実装する方法を解説

How to Build an Accordion Component in Vue.js
by by Luca Spezzano

はじめに

Vue.jsのコンポーネントに関するHow to記事は今回で4回目となりますが、最もよく読まれているのはチュートリアル記事で、具体的に使用できるものをすぐに実装することができるだと思います。

この記事では、私がプロジェクトで最もよく使用するコンポーネントの1つ、アコーディオンを解説することにしました。

アコーディオンのコンポーネントは非常に便利で、Bootstrapなど多くのライブラリにも使用されています。
さっそく実装してみましょう!

アコーディオンの実装

このチュートリアルでは、アコーディオンの機能に必要なもの以外のスタイルは使用しません。さまざまなプロジェクトで簡単に利用できるように、非常にシンプルなデザインです。

基本的なスタイルにはTailwind CSSを使用していますが、お好みのCSSを自由に使用してください。デモは、下記ページからご覧ください。

デモのキャプチャ

デモページ

ではコードを解説します。

上記のコードを解説します。

データとメソッド

data isActiveの値を変更するmethodを使用しています。この値に基づいてCSSのクラスを動的に追加または削除して、コンポーネントにコンテンツを表示または非表示にすることができます。

名前付きSlots

もう一つの注意点はnamed slotsを使用してコンテンツをコンポーネントに追加する方法です。これによりHTMLを含むあらゆるタイプのコンテンツを追加することができ、柔軟性があります。

named slots(名前付きSlots)の詳細については、下記をご覧ください

サイトのキャプチャ

The Difference Between Props, Slots and Scoped Slots in Vue.js
翻訳版: Vue.jsでSlotsの代わりにPropsを使用する理由、名前付きSlotsやスコープ付きSlotsとの違いについて解説

アコーディオンのコンポーネントの使用方法

このコンポーネントを使用するには、上記のようにnamed slotsにコンテンツを挿入してインポートします。再利用は非常に簡単で、titlecontentnamed slotsを使用して好きなコンテンツを追加できるコンポーネントを実装しています。

このコンポーネントは自由にカスタマイズできます。下記のデモページで、お好みに合わせてカスタマイズしてみてください。

デモのキャプチャ

デモページ

終わりに

多くのライブラリでアコーディオンをはじめ、その他のシンプルなコンポーネントを実装できます。しかし、シンプルなコンポーネントを実装するためだけにライブラリは必要ですか?

ライブラリを使用すると柔軟性に欠け、実装コードのサイズが大きくなってしまいます。アコーディオン、モーダル、タブ、ドロップダウンなどのコンポーネントを一から作るのが、プロジェクトにとって最適の方法です。

sponsors

top of page

©2021 coliss