Drawer

Panel que se desliza desde cualquier borde del viewport (left, right, top o bottom). El drawer y su overlay semitransparente opcional se insertan en document.body mediante un portal de React, por lo que no se ven afectados por contextos de apilamiento del padre.

Props

| Prop | Tipo | Requerido | Por defecto | Descripción | |------|------|-----------|-------------|-------------| | isOpen | boolean | Sí | — | Controla si el drawer está visible. | | anchor | 'left' \| 'right' \| 'top' \| 'bottom' | Sí | — | Borde desde el que se desliza. | | onClose | () => void | No | — | Se ejecuta al hacer clic en el overlay. | | children | ReactNode | No | — | Contenido dentro del drawer. | | duration | number | No | 300 | Duración de la animación en milisegundos. | | showOverlay | boolean | No | true | Muestra u oculta el fondo semitransparente. | | width | number \| string | No | 200 (left/right) | Ancho del drawer (anclas left/right). | | height | number \| string | No | 200 (top/bottom) | Alto del drawer (anclas top/bottom). | | zIndex | number | No | 9999 | Z-index base del drawer y overlay. | | drawerStyle | React.CSSProperties | No | — | Estilos del panel del drawer. | | overlayStyle | React.CSSProperties | No | — | Estilos del overlay. |

Uso

Drawer lateral derecho

import { useState } from 'react';
import Drawer from '@/components/Drawer';

export default function Example() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <button onClick={() => setOpen(true)}>Abrir Drawer</button>
      <Drawer
        isOpen={open}
        anchor="right"
        onClose={() => setOpen(false)}
        width={320}
      >
        <div style={{ padding: 24 }}>
          <h2>Contenido del Drawer</h2>
        </div>
      </Drawer>
    </>
  );
}

Hoja inferior sin overlay

import { useState } from 'react';
import Drawer from '@/components/Drawer';

export default function Example() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <button onClick={() => setOpen(true)}>Abrir Hoja</button>
      <Drawer
        isOpen={open}
        anchor="bottom"
        height={300}
        showOverlay={false}
        drawerStyle={{ borderRadius: '16px 16px 0 0', padding: 20 }}
      >
        <p>Contenido de la hoja inferior</p>
      </Drawer>
    </>
  );
}