VC UI Library

Collapse

VcCollapseItem

Use single 'VcCollapseItem' component to store contents

Simple VcCollapseItem:

Simple VcCollapseItem with slots:

Disabled VcCollapseItem:

Expand

VcCollapse

Use 'VcCollapse' component for expand multiple panels

Expand multiple panels:

Accordion:

In accordion mode, only one panel can be expanded at once
Activate accordion mode using the 'accordion' attribute.

Expand

VcCollapse Attributes

Attribute	Description	Type	Accepted Values	Default
modelValue	currently active panel	string[]	-	[]
accordion	Whether to activate accordion mode	Boolean	true \| false	false

VcCollapse Events

Method	Description	Parameters
update:modelValue	Triggers when active panels change. Returns string[]

VcCollapseItem Attributes

Attribute	Description	Type	Accepted Values	Default
title	Title content	string	-
content	Body content	string	-
disabled	Disable the collapse item	boolean	true \| false	false
name	Unique identification of the panel. Required when uses with VcCollapse	string	-
header-class	Additional classes for title	string	-
body-class	Additional classes for content (body)	string	-
color-icon	Color name for icon (text-${color-icon})	string	-	active-elements
color-border	Color name for border bottom (border-${color-border})	string	-	ui-lines
has-border	Is visible border bottom	boolean	true \| false	true

VcCollapseItem Events

Method	Description	Parameters
update:activeName	Triggers when panel change

VcCollapseItem Slots