Collapsible Panel Library For Vue.js 3

Install & Download:

# NPM
$ npm i @dafcoe/vue-collapsible-panel

Description:

A collapsible panel JavaScript library for Vue 3 that lets you create accordion-style toggleable content in Vue apps.

How to use it:

1. Import the Collapsible Panel library.

// Locally
import {
  VueCollapsiblePanelGroup,
  VueCollapsiblePanel,
} from '@dafcoe/vue-collapsible-panel'
// Globally
import VueCollapsiblePanel from '@dafcoe/vue-collapsible-panel'
const app = createApp(App)
app.use(VueCollapsiblePanel).mount('#app')
// Stylesheet
import '@dafcoe/vue-collapsible-panel/dist/vue-collapsible-panel.css'

2. Add content to the collapsible panels.

<vue-collapsible-panel-group>
  <vue-collapsible-panel>
    <template #title>
      Panel 1 Title
    </template>
    <template #content>
      Panel 1 Content
    </template>
  </vue-collapsible-panel>
  <vue-collapsible-panel>
    <template #title>
      Panel 2 Title
    </template>
    <template #content>
      Panel 2 Content
    </template>
  </vue-collapsible-panel>
  <vue-collapsible-panel>
    <template #title>
      Panel 3 Title
    </template>
    <template #content>
      Panel 3 Content
    </template>
  </vue-collapsible-panel>
</vue-collapsible-panel-group>

3. Available props for the VueCollapsiblePanelGroup component.

accordion: {
  type: Boolean,
  default: false, // accordion mode
},
baseColor: {
  type: String,
  default: '#333333',
},

4. Available prop for the VueCollapsiblePanel component. This prop allows you to determine whether the panel should be expanded on page load.

expanded: {
  type: Boolean,
  default: true,
},

Preview: