Componente de acordeón Vue

Un plugin sencillo y ligero para el componente acordeón de Vue 3. Admite el registro global de plugins y el uso local de componentes. Escrito en TypeScript. El componente acordeón contiene un mínimo de estilos CSS, lo que facilita su integración en cualquier diseño. Puede instalarlo mediante los gestores de paquetes NPM o Yarn. El componente permite configurar la capacidad de tener uno o varios elementos del acordeón activos simultáneamente. La clase CSS “active” se añade al elemento acordeón abierto.

Demo: https://vue.webstep.top/ws-acc

Instalación

# via npm
npm install vue-ws-acc

# or via yarn
yarn add vue-ws-acc

Uso

1. Registro global (como plugin)

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');

Ahora el componente <VueWsAcc /> está disponible globalmente.

2. Registro local (por componente)

<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>

El valor “content” puede contener etiquetas HTML.

Múltiple

De forma predeterminada, solo un elemento de acordeón puede estar activo a la vez. Sin embargo, este comportamiento se puede modificar mediante el atributo “multi”, que permite que varios elementos estén activos a la vez.

<VueWsAcc :items="accordionItems" multi />

Estilos

El componente utiliza un mínimo de estilos CSS. Estos estilos son fáciles de anular. Sin embargo, si necesita deshabilitar estilos opcionales del componente, puede hacerlo mediante el atributo “simple”.

<VueWsAcc :items="accordionItems" simple />

Props

Artículo de item: { title: string, content: string }

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