Collapsible

Container expansível/colapsável com animação. Ideal para seções opcionais de conteúdo.

Uso

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

const aberto = ref(false)
</script>

<template>
  <Collapsible v-model:open="aberto" title="Ver mais detalhes">
    <p>Conteúdo oculto que aparece ao expandir.</p>
  </Collapsible>
</template>

Exemplos

<Collapsible title="Seção expansível">
  <p>Conteúdo oculto.</p>
</Collapsible>

<!-- Controlado -->
<Collapsible v-model:open="aberto" title="Controlado">
  <p>Conteúdo.</p>
</Collapsible>

Props

Prop	Tipo	Padrão
open	boolean	—
defaultOpen	boolean	false
disabled	boolean	false
title	string	—

Slots

Slot	Descrição
trigger	Conteúdo do gatilho (substitui title)
default	Conteúdo colapsável

Events

Evento	Payload	Descrição
update:open	boolean	Emitido ao expandir/colapsar