Componente

Drawer

Slide-in panel (right or left) with backdrop. Use showDrawer(id)/hideDrawer(id).

{% comp_drawer ... %}

Código a utilizar

template.html

{% comp_drawer id="preview-drawer" title="Panel Lateral" subtitle="Ejemplo de drawer deslizante" icon="PencilIcon" icon_color="primary" size="md" content="<div class="space-y-4"><p class="text-sm text-gray-600">El contenido del drawer se renderiza aquí. Usa el tag <code class="bg-gray-100 px-1 rounded text-primary-600">capture</code> para generar el HTML del formulario.</p><div class="p-4 bg-primary-50 border border-primary-100 rounded-xl"><p class="text-xs font-bold text-primary-600 mb-1">Tip de uso</p><p class="text-xs text-primary-500">showDrawer('id') y hideDrawer('id') controlan la visibilidad desde cualquier JS.</p></div></div>" %}

Vista previa en vivo

Panel Lateral

Ejemplo de drawer deslizante

El contenido del drawer se renderiza aquí. Usa el tag capture para generar el HTML del formulario.

Tip de uso

showDrawer('id') y hideDrawer('id') controlan la visibilidad desde cualquier JS.

API Props & Playground

Los cambios actualizan la vista previa en tiempo real

Prop	Valor	Default
`id` 'main'		'main'
`title` ''		''
`subtitle` ''		''
`icon` None		None
`icon_color` 'primary'		'primary'
`size` Tamaño del componente 'md'		'md'
`position` Posición en la pantalla 'right'		'right'
`content` ''		''
`classes` ''		''

Carga la librería con {% load components_ui %} antes de usar el componente.