Vue JS Accordion

A simple Accordion component for Vue JS.
This component is compatible with Vue 3.

• Vue JS Accordion
  • Installation
  • Usage
    • Simple usage example
  • Props
  • Events

Installation

First, run npm install @2alheure/vue-accordion.
Then import it with import Accordion from "@2alheure/vue-accordion";.

Usage

Simple usage example

<Accordion :headerStyle="headerStyle" :contentStyle="contentStyle">
  <template #header">
    Your accordion title. Can also be <strong>HTML</strong>.
  </template>

  Your accordion content. It can be simple text like this.
  <p>It can also be HTML.</p>
</Accordion>

<script>
  import Accordion from "@2alheure/vue-accordion";
  
  export default {
    components: {
      Accordion
    },
    data() {
      return {
        headerStyle: 'background-color: white;',
        contentStyle: {
          color: 'red',
          fontSize: '42px'
        }
      }
    }
  };
</script>

Props

| Name | Type | Default value | Description | | :------------- | :-------------: | :------------------------------------------------------------: | ---------------------------------------------------------- | | opened | Boolean | false | Whether the content should be displayed when loaded. | | symbolOpened | String | ∨ | The symbol to use for the opened accordion. (Can be HTML.) | | symbolClosed | String | > | The symbol to use for the closed accordion. (Can be HTML.) | | headerStyle | String / Object | padding: .5rem; | The style for the header. | | symbolStyle | String / Object | font-size: 1.5rem; font-weight: 700; vertical-align: middle; | The style for the symbol. | | contentStyle | String / Object | width: 98%; margin: auto; padding: .5rem; | The style for the content. | | accordionClass | String / Object | null | The classes for the accordion. | | headerClass | String / Object | null | The classes for the header. | | symbolClass | String / Object | null | The classes for the symbol. | | contentClass | String / Object | null | The classes for the content. |

Events

| Name | Description | | :----- | ---------------------------------------------------------------- | | open | Emitted each time the accordion is opened. | | close | Emitted each time the accordion is closed. | | switch | Emitted each time the accordion switches between open and close. |