Sheet

Painel deslizante que entra por qualquer borda da tela. Ideal para navegação lateral, formulários contextuais e detalhes de itens.

Exemplos

Lateral direita (padrão)

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

const aberto = ref(false)
</script>

<template>
  <Button @click="aberto = true">Abrir sheet</Button>

  <Sheet v-model="aberto" title="Detalhes do pedido" description="Informações completas sobre o pedido #1042.">
    <p>Conteúdo do sheet.</p>

    <template #footer>
      <Button variant="outline" @click="aberto = false">Fechar</Button>
      <Button @click="aberto = false">Salvar</Button>
    </template>
  </Sheet>
</template>

Posicionamento

<Sheet placement="left" …>…</Sheet>
<Sheet placement="right" …>…</Sheet>
<Sheet placement="top" …>…</Sheet>
<Sheet placement="bottom" …>…</Sheet>

Props

Prop	Tipo	Padrão
modelValue	boolean	false
title	string	—
description	string	—
placement	"right" | "left" | "top" | "bottom"	"right"
size	"sm" | "md" | "lg" | "xl" | "full"	"md"
closable	boolean	true

Larguras por tamanho (placement lateral)

Size	Largura
sm	280px
md	380px
lg	480px
xl	580px
full	100%

Slots

Slot	Descrição
default	Corpo do sheet
header	Substitui o header padrão (título + descrição)
footer	Rodapé com ações (botões)

Events

Evento	Payload	Descrição
update:modelValue	boolean	Emitido ao abrir/fechar sheet