CataUiAccordionItem

The CataUiAccordionItem component represents an individual collapsible section within an accordion. It displays a header that's always visible and a body section that can be toggled by clicking the header.

<CataUiAccordion v-model="activeItems">
    <CataUiAccordionItem>
        <template #header>Header</template>
        <template #body>Body Content</template>
    </CataUiAccordionItem>
    <CataUiAccordionItem accordionItemId="custom-id" error sticky useVShow>
        <template #header>Header with custom properties</template>
        <template #body>Body Content that uses v-show instead of v-if</template>
    </CataUiAccordionItem>
</CataUiAccordion>

Warning

This component can only be used as a child of a CataUiAccordion component.

Props

Prop	Description	Type	Default	Required
accordionItemId	Custom ID for the accordion item, used for v-model tracking in the parent accordion	String/Number	guid	false
error	Applies error styling to the accordion item	Boolean	false	false
sticky	Makes the header stick to the top when scrolling while the item is expanded	Boolean	undefined	false
useVShow	Uses v-show instead of v-if for toggling body content (preserves state when collapsed)	Boolean	false	false

Slots

Slot	Description
body	Body content being toggled when header is clicked
header	Header content that's always displayed

Notes

When no accordionItemId is provided, a UUID is automatically generated
The sticky prop can be useful for long accordion content that requires scrolling
The error prop applies a visual indicator for validation or error states
Using useVShow can be beneficial when you need to preserve component state or avoid re-rendering