Panel lateral deslizante (drawer) accesible con variantes de lado y animaciones. Mantine Drawer.
sheet
drawer
panel
component
ui
interactive
overlay
mantine
false
@mantine/core
react
Componente Sheet que renderiza panel deslizante lateral accesible con animaciones via Mantine Drawer
false
frontend/functions/ui/sheet.tsx
name
type
required
description
side
'top' | 'bottom' | 'left' | 'right'
false
Lado desde el que aparece el panel (default: right)
name
type
required
description
showCloseButton
boolean
false
Muestra el boton de cierre (default: true)
name
type
required
description
open
boolean
false
Estado controlado de apertura
name
type
required
description
onOpenChange
(open: boolean) => void
false
Callback cuando cambia el estado
onOpenChange
false
react
top
bottom
left
right
Ejemplo
<Sheet><SheetTriggerasChild><Buttonvariant="outline">Abrirpanel</Button></SheetTrigger><SheetContentside="right"><SheetHeader><SheetTitle>Editarperfil</SheetTitle><SheetDescription>Realizacambiosentuperfil.</SheetDescription></SheetHeader><divclassName="py-4">{/* contenido del panel */}</div><SheetFooter><SheetCloseasChild><Buttonvariant="outline">Cancelar</Button></SheetClose><Button>Guardar</Button></SheetFooter></SheetContent></Sheet>
Notas
Reutiliza Mantine Drawer para el comportamiento modal y animaciones. SheetPortal y SheetOverlay son no-ops mantenidos por compatibilidad. Exports: Sheet, SheetTrigger, SheetContent, SheetClose, SheetPortal, SheetOverlay, SheetHeader, SheetFooter, SheetTitle, SheetDescription.