Components
Accordion
Show and hide sections of content with UiAccordion and UiAccordionGroup.
UiAccordion wraps a native <details> element. Group items with UiAccordionGroup; share a name so only one stays open at a time.
Add an accordion group
<template>
<UiAccordionGroup>
<UiAccordion title="What is Colorffy?" name="faq">
<template #content>
<p>A Vue 3 component library and SCSS framework.</p>
</template>
</UiAccordion>
<UiAccordion title="Is it free?" name="faq">
<template #content>
<p>Yes — MIT licensed.</p>
</template>
</UiAccordion>
</UiAccordionGroup>
</template>
Control the open state
Use v-model:open for controlled expand / collapse:
<script setup lang="ts">
import { ref } from 'vue'
const open = ref(true)
</script>
<template>
<UiAccordion v-model:open="open" title="Details">
<template #content><p>Controlled panel.</p></template>
</UiAccordion>
</template>
UiAccordion props
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | null | '' | Header text (or use the #header slot). |
name | string | null | 'accordion-item' | Native <details> group name. |
text | string | null | '' | Body text (or use the #content slot). |
disabled | boolean | false | Disable interaction. |
customClass | string | string[] | Record<string, boolean> | null | null | Extra classes. |
Model: v-model:open (boolean).
Slots: #header, #content.
UiAccordionGroup props
| Prop | Type | Default | Description |
|---|---|---|---|
isTransparent | boolean | false | Surface-less container. |
customClass | string | string[] | Record<string, boolean> | null | null | Extra classes. |