Drawer

Painel que sobe de baixo da tela. Ideal para ações contextuais, filtros e confirmações — especialmente em mobile.

Exemplos

Básico

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

const aberto = ref(false)
</script>

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

  <Drawer v-model="aberto" title="Move Goal" description="Set your daily activity goal.">
    <p>Conteúdo do drawer.</p>

    <template #footer>
      <Button style="width:100%">Submit</Button>
      <Button variant="outline" style="width:100%">Cancel</Button>
    </template>
  </Drawer>
</template>

Tamanhos

<Drawer size="sm" …>…</Drawer>
<Drawer size="md" …>…</Drawer>
<Drawer size="lg" …>…</Drawer>
<Drawer size="full" …>…</Drawer>

Props

Prop	Tipo	Padrão
modelValue	boolean	false
title	string	—
description	string	—
size	"sm" | "md" | "lg" | "full"	"md"
closable	boolean	false

Alturas por tamanho

Size	Altura máxima
sm	35vh
md	55vh
lg	75vh
full	100dvh

Slots

Slot	Descrição
default	Corpo do drawer
header	Substitui o header padrão (título + descrição)
footer	Rodapé — botões em coluna, full-width

Events

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