CataUiCollapse

A collapsible component that provides a toggle mechanism to show or hide content. The component features a label and a chevron icon that rotates to indicate the collapse state.

Basic Usage

Basic usage:

With v-model:

This content's visibility is controlled by the isOpen variable

<CataUiCollapse label="The label" color="#fff">
    Collapsible content here
</CataUiCollapse>

Using v-model

<CataUiCollapse v-model="isOpen" label="Controlled collapse">
    This content's visibility is controlled by the isOpen variable
</CataUiCollapse>

Tips

If v-model is not provided, the collapse state will be handled by the component itself.

Props

Prop	Description	Type	Default	Required
color	Text and border line color	String	'var(--color-grey-900)'	false
label	The text label displayed in the collapse header	String	''	false
v-model	Controls the collapse state (open/closed)	Boolean		false

Slots

Slot	Description
default	Collapsible content