Accordion

Colapsa e expande seções de conteúdo.

Exemplos

<script setup lang="ts">
import { Accordion } from '@halfbyte/maka'

const items = [
  { value: 'q1', label: 'O que é o Maka UI?' },
  { value: 'q2', label: 'Como instalar?' },
  { value: 'q3', label: 'Posso personalizar os tokens?' },
]
</script>

<template>
  <Accordion :items="items">
    <template #q1>
      <p>Maka UI é uma biblioteca de componentes Vue 3 baseada em Panda CSS e Ark UI.</p>
    </template>
    <template #q2>
      <p>Instale com <code>npm install @halfbyte/maka</code>.</p>
    </template>
    <template #q3>
      <p>Sim! Os tokens são definidos no panda.config.ts do seu projeto.</p>
    </template>
  </Accordion>
</template>

Múltipla abertura

<Accordion :items="items" :multiple="true">…</Accordion>

Props

Prop	Tipo	Padrão
items	AccordionItemDef[]	obrigatório
modelValue	string | string[]	—
multiple	boolean	false
collapsible	boolean	true

AccordionItemDef

Campo	Tipo	Descrição
value	string	Identificador único do item
label	string	Texto exibido no gatilho
disabled	boolean	Desabilita o item (opcional)

Slots

Cada item tem um slot nomeado com seu value:

<template #meu-item>Conteúdo do acordeão</template>

Events

Evento	Payload	Descrição
update:modelValue	string | string[]	Emitido ao abrir/fechar itens