@wikicasa-dev/components · Layout · primitive

AccordionContentPrimitive

Unstyled collapsible panel of a primitive accordion item; hidden while the item is closed.

Unstyled collapsible panel of a primitive accordion item; hidden while the item is closed.

import AccordionContentPrimitive from "@wikicasa-dev/components/UIKit/Accordion/AccordionContentPrimitive";

Part of the primitive accordion composition: see the AccordionItemPrimitive doc for the full example. Place it inside AccordionItemPrimitive, after the header.

Usage

<script setup lang="ts">
import AccordionContentPrimitive from "@wikicasa-dev/components/UIKit/Accordion/AccordionContentPrimitive";
</script>

<template>
  <!-- inside <AccordionItemPrimitive> -->
  <AccordionContentPrimitive class="faq-answer">
    Pubblicare un annuncio su Wikicasa è gratuito per i privati.
  </AccordionContentPrimitive>
</template>

Do / Don't

  • No open/close animation and no padding by default. For a height animation, animate height from 0 to var(--reka-accordion-content-height) on [data-state="open"] (and back on [data-state="closed"]), with overflow: hidden.
  • Closed content stays in the DOM unless the root BaseAccordion has unmount-on-hide; forceMount keeps this panel mounted in any case.

API

Generated from the component's types. Do not edit by hand.

Props

Name Type Default Required Description
forceMount boolean Used to force mounting when more control is needed. Useful when controlling animation with Vue animation libraries.
asChild boolean Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
as AsTag | Component The element or component this component should render as. Can be overwritten by asChild.

Events

None.

v-model

None.

Slots

Name Slot props
default

Exposed (template ref)

None.