Компонент акордеона Vue

Простий та легкий плагін компонента акордеон для Vue 3. Підтримує як глобальну реєстрацію плагінів, так і локальне використання компонентів. Написано на TypeScript. Компонент акордеон містить мінімум стилів CSS, що спрощує його інтеграцію в будь-який ваш дизайн. Ви можете встановити компонент за допомогою менеджерів пакетів NPM або Yarn. Компонент дозволяє налаштувати можливість одночасної активації одного або кількох елементів акордеона. До відкритого елемента акордеона додано клас CSS “active”.

Демо: https://vue.webstep.top/ws-acc

Встановлення

# via npm
npm install vue-ws-acc

# or via yarn
yarn add vue-ws-acc

Використання

1. Глобальна реєстрація (як плагін)

import { createApp } from 'vue';
import App from './App.vue';
import VueWsAcc from 'vue-ws-acc';
import 'vue-ws-acc/dist/vue-ws-acc.css';

const app = createApp(App);
app.use(VueWsAcc);
app.mount('#app');

Так компонент <VueWsAcc /> доступний глобально.

2. Локальна реєстрація (як компонент)

<template>
  <VueWsAcc :items="accordionItems" />
</template>

<script lang="ts" setup>
import VueWsAcc from 'vue-ws-acc';
import 'vue-ws-acc/dist/vue-ws-acc.css';

const accordionItems = [
  { title: 'Section 1', content: 'Content for section 1' },
  { title: 'Section 2', content: 'Content for <strong>section</strong> 2' }
];
</script>

Значення “content” може міститиHTML теги.

Multiple

За замовчуванням одночасно може бути активним лише один елемент акордеона. Однак цю поведінку можна змінити за допомогою атрибута “multi”, що дозволить активувати декілька елементів одночасно.

<VueWsAcc :items="accordionItems" multi />

Стилі

Компонент використовує мінімум стилів CSS. Ці стилі легко перевизначити. Але, якщо вам потрібно вимкнути додаткові стилі компонентів, ви можете зробити це за допомогою атрибута “simple”.

<VueWsAcc :items="accordionItems" simple />

Props

Приклад елемента акордеона – item: { title: string, content: string }

NPM: https://www.npmjs.com/package/vue-ws-acc
GitHub: https://github.com/igorrybalko/vue-ws-acc