Components
Accordion
A vertically stacked set of collapsible sections.
import { AccordionComponent, AccordionItemComponent, AccordionTriggerComponent, AccordionContentComponent } from '@/MigsLab/shared'
Example
<AccordionComponent>
<AccordionItemComponent value="what">
<AccordionTriggerComponent>What is Vue.js?</AccordionTriggerComponent>
<AccordionContentComponent>A progressive framework...</AccordionContentComponent>
</AccordionItemComponent>
</AccordionComponent>Single item open, controlled
Set :multiple="false" so opening one item closes the others. Bind v-model to read or set the open items.
Vue.js is a progressive framework for building user interfaces.
Open: [ "what" ]
const openItems = ref<string[]>(['what'])
<AccordionComponent v-model="openItems" :multiple="false">
...
</AccordionComponent>API
AccordionComponent props
| Name | Type | Default | Description |
|---|---|---|---|
v-model | string[] | [] | Values of the open items. Optional; the accordion manages its own state when unbound. |
multiple | boolean | true | Allow more than one item open at a time. |
AccordionItemComponent props
| Name | Type | Default | Description |
|---|---|---|---|
value | string | auto id | Unique value for the item; needed when you control v-model. |
defaultOpen | boolean | false | Open the item when it first renders. |
Slots
| Name | Description |
|---|---|
AccordionTriggerComponent: default | Header text of the item; clicking it toggles the item. |
AccordionContentComponent: default | Body shown while the item is open. |