Skip to content

Sheet

Drawer que entra desde un borde. Sirve para filtros, ajustes, detalle o menú sin abandonar la página. Para diálogos centrados usa Modal; para confirmar una acción, AlertDialog.

Preview principal

SHEETright · md · filters

lado

tamaño

escena

drawer lateral · Escape / backdrop · z-index alto

Para qué sirve

Contenido secundario sin salir de la página. Modal = centrado; AlertDialog = confirmar.

CASOS

filtros

Refinar una tabla o listado manteniendo la vista.

ajustes

Formularios cortos (nombre, preferencias) con Guardar / Cancelar.

detalle

Inspeccionar un ítem (ticket, factura) sin navegar a otra ruta.

menú

Navegación lateral (móvil o layouts densos), suele ir a la izquierda.

Cuándo usarlo

Section titled “Cuándo usarlo”
Necesitas… Usa
Panel lateral / drawer Sheet
Diálogo centrado (formulario, wizard) Modal
Confirmar eliminar / logout AlertDialog

Uso

Section titled “Uso”
import { useState } from "react";
import { Sheet, Button } from "devsoftec-ui";


function Ejemplo() {
  const [open, setOpen] = useState(false);


  return (
    <>
      <Button onClick={() => setOpen(true)}>Filtros</Button>
      <Sheet open={open} onClose={() => setOpen(false)} title="Filtros" side="right" size="sm">
        {/* campos */}
        <Button variant="primary" onClick={() => setOpen(false)}>Aplicar</Button>
      </Sheet>
    </>
  );
}

Props

Section titled “Props”
Prop Tipo Default Descripción
open boolean — Visible
onClose () => void — Escape / backdrop / ✕
title ReactNode — Título del header
side right | left right Borde de entrada
size sm | md | lg md Ancho (360 / 420 / 520)
hideClose boolean false Oculta la ✕
children ReactNode — Cuerpo

Comportamiento

Section titled “Comportamiento”
  • Portal a document.body + z-index alto
  • role="dialog" · aria-modal · aria-labelledby
  • Bloquea scroll del body
  • Escape y clic en backdrop cierran
  • Animación slide desde el borde