Logo

Components

VCollapse

Hardison Co. provides 2 collapse component variations: <VCollapse /> and <VCollapse with-chevron />.
There are 2 available variations that you can use to change the collapse header icon. Pass an Array to the items props to render the chosen collapse component. Check markup for more details.

Accordion Item 1

Sed ut perspiciatis unde omnis iste ...

Accordion Item 2

Sed ut perspiciatis unde omnis iste ...

Accordion Item 3

Sed ut perspiciatis unde omnis iste ...

Accordion Item 1

Sed ut perspiciatis unde omnis iste ...

Accordion Item 2

Sed ut perspiciatis unde omnis iste ...

Accordion Item 3

Sed ut perspiciatis unde omnis iste ...

<VCollapse> Props

NameDefaultType
:item-open
undefined
number | undefined
:items
[]
VCollapseItem[]
:with-chevron
undefined
boolean | undefined

<VCollapse> Slots

NameType
#collapse-item
{ item: { title: string; content: string; value?: any; url?: string | undefined; }; index: number; toggle: (key: number) => void; }
#collapse-item-content
{ item: { title: string; content: string; value?: any; url?: string | undefined; }; index: number; toggle: (key: number) => void; }
#collapse-item-head
{ item: { title: string; content: string; value?: any; url?: string | undefined; }; index: number; }
#collapse-item-summary
{ item: { title: string; content: string; value?: any; url?: string | undefined; }; index: number; toggle: (key: number) => void; }

<VCollapseModel> Props

NameDefaultType
:items required 
undefined
VCollapseItem[]
:model-value
undefined
number | undefined
:with-chevron
undefined
boolean | undefined

<VCollapseModel> Events

NameType
@update:model-value
[value: number | undefined]

<VCollapseModel> Slots

NameType
#collapse-item
{ item: { title: string; content: string; }; index: number; toggle: (key: number) => void; }
#collapse-item-content
{ item: { title: string; content: string; }; index: number; toggle: (key: number) => void; }
#collapse-item-summary
{ item: { title: string; content: string; }; index: number; toggle: (key: number) => void; }