Workbeat Design System

InicioFundamentosComponentesPatronesEjemplosReferenciaGuíasChangelogAgentes IA

SideCanvas

Panel lateral apilable para detalle, edición y configuración. Se abre con `useSideCanvas().openCanvas`.

Categoría
Shell de aplicación
Fuente
components/layout/SideCanvas
Skill para agentes
—
Último cambio
2026-11-06

Importación

Importa por subruta del DS local (`src/design-system`). El barrel `@/design-system` también lo reexporta.

import { SideCanvas } from "@/design-system/components/layout/SideCanvas";

Ejemplos

Cada ejemplo se renderiza con el código real del DS; abre el código para copiarlo.

Stacked panels

Sizes

API

Generada desde los tipos y el JSDoc del código fuente.

Guía de uso

Reglas del DS y plantillas para pedirle este componente a un agente.

Relacionados

SideCanvas (contexto)

Contexto del panel lateral apilable: `openCanvas`, `closeCanvas` y tamaños.

Referencia
ConfigSidePanel

Side panel de crear/editar/ver con secciones, grid de campos y campos compartidos.

Patrón