CataUiAccordion

The CataUiAccordion component is a container for collapsible content panels (accordion items). It allows users to toggle the visibility of content sections, providing an efficient way to present information in limited space.

Basic Usage

<CataUiAccordion v-model="activeItems">
    <CataUiAccordionItem id="item1" title="Section 1">
        Content for section 1
    </CataUiAccordionItem>
    <CataUiAccordionItem id="item2" title="Section 2">
        Content for section 2
    </CataUiAccordionItem>
</CataUiAccordion>

Multiple Open Items

<CataUiAccordion v-model="activeItems" :restricted="false">
    <!-- Multiple accordion items can be open simultaneously -->
    <CataUiAccordionItem id="item1" title="Section 1">
        Content for section 1
    </CataUiAccordionItem>
    <CataUiAccordionItem id="item2" title="Section 2">
        Content for section 2
    </CataUiAccordionItem>
</CataUiAccordion>

Warning

This component is a wrapper for CataUiAccordionItem and is not useable on its own. You must include at least one CataUiAccordionItem as a child component.

Props

PropTypeDefaultRequiredDescription
restrictedBooleantrueNoWhen true, only one accordion item can be open at a time. Setting to false allows multiple items to be expanded simultaneously.
v-modelArray-YesAn array that tracks the IDs of currently active (expanded) accordion items.

Data Binding

The component uses a two-way binding through v-model to track which items are currently open:

// In your component
const activeItems = ref(['item1']); // Initially opens the item with id "item1"

Usage with Events

<template>
  <CataUiAccordion v-model="openItems">
    <CataUiAccordionItem 
      v-for="item in accordionItems" 
      :key="item.id" 
      :id="item.id" 
      :title="item.title"
    >
      {{ item.content }}
    </CataUiAccordionItem>
  </CataUiAccordion>
</template>

<script setup>
import { ref } from 'vue';

const accordionItems = [
  { id: 'section1', title: 'First Section', content: 'Content for first section' },
  { id: 'section2', title: 'Second Section', content: 'Content for second section' },
  { id: 'section3', title: 'Third Section', content: 'Content for third section' }
];

const openItems = ref(['section1']); // First item is initially open
</script>