An accordion component for vue.js.
This component is released under the MIT license. See LICENSE file for more details.
import Accordion from '@dzangolab/vue-accordion'
import '@dzangolab/vue-accordion/dist/accordion.css' // import stylesheet
Vue.component(Accordion)
import Accordion from '@dzangolab/vue-accordion'
import '@dzangolab/vue-accordion/dist/accordion.css' // import stylesheet
export default {
components: {
Accordion
}
}
The Accordion is meant to be usable out of the box. Include it in your template and pass it an items
prop.
<Accordion
:items="items"
/>
The items
prop must be in the form of :
items: [
{
content: 'some content',
title: 'Item 1'
},
{
content: 'some more content',
title: 'Item 2'
},
{
content: 'some other content',
title: 'Item 3'
}
]
Name | Description |
---|---|
title |
Use this slot to customize each item's title |
toggle |
Use this slot to customize each item's toggle button |
content |
Use this slot to customize each item's content |
Name | Type | Description | Default |
---|---|---|---|
default-index |
Number |
The item to be opened by default. | 0 |
duration |
Number |
The duration of the transition when an item is opened. | 350 |
items |
Array |
The list of items in the accordion. | () => [] |
show-toggle |
Boolean |
Whether the toggle button should be shown in each accordion item. | true |
transition |
String |
The transition to use when opening an accordion item. | "ease" |
Name | Type | Description | Initial value |
---|---|---|---|
index |
number |
The index of the currently selected item. | value of defaultIndex prop |
Name | Description |
---|---|
accordion:select |
Fired when an accordion item is selected. Arguments
|
Whether the item at specified index is open.
Syntax
isActive(index: number): unknown
Parameters
index: number