AccordionItemPrimitive

Unstyled accordion section wrapper, for custom accordion items composed from the Accordion*Primitive parts.

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

Use it only when BaseAccordionItem can't produce the header you need (e.g. a two-line title with a custom "+/−" marker). It must sit inside BaseAccordion and wrap one AccordionHeaderPrimitive (containing an AccordionTriggerPrimitive) and one AccordionContentPrimitive. None of the parts has any styling, animation or arrow.

#Usage

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

const projects = [
  { id: "app", title: "Wikicasa App", subtitle: "Cerca casa dal telefono", img: "/mock/app.webp" },
  { id: "valuta", title: "Valuta casa", subtitle: "Stima online in 30 secondi", img: "/mock/valuta.webp" },
];
</script>

<template>
  <BaseAccordion type="multiple">
    <AccordionItemPrimitive v-for="p in projects" :key="p.id" v-slot="{ open }" :value="p.id">
      <AccordionHeaderPrimitive>
        <AccordionTriggerPrimitive class="project-trigger">
          <span>
            <strong>{{ p.title }}</strong><br />
            {{ p.subtitle }}
          </span>
          <span aria-hidden="true">{{ open ? "−" : "+" }}</span>
        </AccordionTriggerPrimitive>
      </AccordionHeaderPrimitive>
      <AccordionContentPrimitive>
        <img :src="p.img" :alt="p.title" style="width: 100%" />
      </AccordionContentPrimitive>
    </AccordionItemPrimitive>
  </BaseAccordion>
</template>

<style>
.project-trigger { display: flex; width: 100%; justify-content: space-between; background: none; border: 0; text-align: left; }
</style>

#Do / Don't

• value is required and unique within the accordion. disabled disables just this section.
• Its default slot exposes open (boolean) for open/closed visuals; the parts also carry data-state="open"|"closed" for CSS.
• Prefer BaseAccordionItem whenever a title plus arrow is enough.

#API

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

Props

Name	Type	Default	Required	Description
disabled	boolean			Whether or not an accordion item is disabled from user interaction. When true, prevents the user from interacting with the item.
value	string		yes	A string value for the accordion item. All items within an accordion should use a unique value.
unmountOnHide	boolean			When true, the element will be unmounted on closed state.
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	{ open: boolean; }

Exposed (template ref)

None.