@pascholda1/vue-accordion

a simple slot based accordion with minimal styling and nesting support.

Installation

npm i @pascholda1/vue-accordion

Usage

<template>
  <vue-accordion>
    <!-- Basic Usage -->
    <vue-collapse title="Collapse 1">
      CONTENT 1
    </vue-collapse>
    <!-- Basic Usage END-->

    <!-- Custom Header Usage -->
    <vue-collapse>
      <template #header>
        <strong>Collapse 2</strong>
      </template>
      CONTENT 2
    </vue-collapse>
    <!-- Custom Header Usage END -->

    <!-- Custom Header Icon Usage -->
    <vue-collapse>
      <template #header>
        <vue-collapse-header>
          x <!-- ICON SLOT -->
        </vue-collapse-header>
      </template>
      CONTENT 3
    </vue-collapse>
    <!-- Custom Header Icon Usage END -->

  </vue-accordion>
</template>

<script>
import VueAccordion      from '@pascholda1/vue-accordion/src/components/VueAccordion';
import VueCollapse       from '@pascholda1/vue-accordion/src/components/VueCollapse';
import VueCollapseHeader from '@pascholda1/vue-accordion/src/components/VueCollapseHeader';

export default {
  name: 'PsAccordionDemo',
  components: {
    VueAccordion,
    VueCollapse,
    VueCollapseHeader,
  },
};
</script>

<style lang="scss">

@import "@pascholda1/vue-accordion/src/scss/vue_accordion_bundle";

</style>