Introducción

Un panel que se desliza desde el borde de la pantalla para presentar contenido o acciones sin abandonar la página actual.

Uso

Cajón básico

import { Drawer, Button } from "../components/ui";

export default function MyPage() {
  return (
    <Drawer
      trigger={<Button>Open Drawer</Button>}
      title="Settings"
      description="Adjust your preferences."
      body="Drawer body content goes here."
      cancel={<Button variant="outline">Close</Button>}
      confirm={<Button>Save</Button>}
    />
  );
}

Constructor de páginas CMS

Este componente está disponible como un bloque drawer en el Constructor de páginas (content/pages/*.json). trigger es una lista de bloques anidada (el CMS siempre envía un array):

{
  "type": "drawer",
  "title": "Settings",
  "description": "Adjust your preferences.",
  "confirmText": "Save",
  "cancelText": "Close",
  "trigger": [{ "type": "button", "text": "Open Drawer" }]
}

Propiedades

Drawer

| title | `string \ | JSX.Element` | El título del cajón. | | description | `string \ | JSX.Element` | La descripción del cajón. | | body | `string \ | JSX.Element` | El contenido principal. | | footer | `string \ | JSX.Element` | Contenido personalizado del pie. |

| cancel | JSX.Element | Elemento renderizado como disparador de cierre (cancelar). | | confirm | JSX.Element | Elemento renderizado como disparador de acción. | | closable | boolean | Si se muestra el botón de cierre. Por defecto: true. | | interactive | boolean | Habilita la hidratación del lado del cliente para comportamiento interactivo. | | class | string | Clases CSS personalizadas para el elemento raíz. |

Los props adicionales (por ejemplo, open, defaultOpen, onOpenChange, id) se reenvían al primitive de cajón subyacente.