Popover

Exibe conteúdo rico ao clicar em um elemento gatilho.

Exemplos

Uso

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

<template>
  <Popover title="Informações" description="Detalhes adicionais sobre este item." :closable="true">
    <template #trigger>
      <Button variant="outline">Mais info</Button>
    </template>
    <p>Conteúdo personalizado aqui.</p>
  </Popover>
</template>

Props

Prop	Tipo	Padrão
title	string	—
description	string	—
placement	"top" | "bottom" | "left" | "right" | "top-start" | "top-end" | "bottom-start" | "bottom-end"	"bottom"
closable	boolean	false
open	boolean	—

Slots

Slot	Descrição
trigger	Elemento que abre o popover
default	Conteúdo do popover

Events

Evento	Payload	Descrição
update:open	boolean	Emitido ao abrir/fechar popover