!npm bundle size
!npm
!GitHub package.json version

@dafcoe/vue-collapsible-panel

Easy to use, customisable collapsible panel / accordion library built using Vue3.


See it action on demo page.

Installation

Install the package as a project dependency using yarn or npm:
``
$ yarn add @dafcoe/vue-collapsible-panel

--- or ---

$ npm install --save @dafcoe/vue-collapsible-panel
`

Usage


Import VueCollapsiblePanelGroup and VueCollapsiblePanel components, either globally (on your main.js / main.ts file) or locally (on your component):
`js
// Globally
import VueCollapsiblePanel from '@dafcoe/vue-collapsible-panel'
const app = createApp(App)
app.use(VueCollapsiblePanel).mount('#app')

// Locally
import {
VueCollapsiblePanelGroup,
VueCollapsiblePanel,
} from '@dafcoe/vue-collapsible-panel'
`

Import default styles (optional - you can define your own styling):
`js
import '@dafcoe/vue-collapsible-panel/dist/vue-collapsible-panel.css'
`

Use it in the template as follows:
`html









...

`

Options


#### Accordion
By default, the accordion behaviour is not used. To use it, add the accordion on vue-collapsible-panel-group:
`html

...

`

#### Expanded
By default, all the panels are expanded. To prevent this, add :expanded="false" on vue-collapsible-panel:
`html





...

`

#### Colors
The default base hex color is #333. To change this, add base-color="#" on vue-collpasible-panel-group:
`html

...

`
For granular control over the colors, the following css variables can be overridden:
``css
--base-color
--border-color
--bg-color-header
--bg-color-header-hover
--bg-color-header-active
--bg-color-body
```

License

MIT License © Daf Coe