Drawer

Panel lateral right (default), left o bottom. Mismo patrón data-state que el modal.

Nota: las variantes inferiores son markup estático con state="open" hardcodeado — la X visual no cierra el drawer. Para abrir/cerrar reactivo, mira el ejemplo final con Datastar ($open).

Right (default)

<div class="drawer-stage">
  <div class="drawer-root" data-state="open">
  <div class="backdrop"></div>
  <aside class="drawer glass">
    <header class="head">
      <div class="heading">
        <h3 class="title lg">Detalle del pedido</h3>
        <p class="sub">Pedido #1024</p>
      </div>
      <button class="close" aria-label="Cerrar">✕</button>
    </header>
    <div class="content scroll body">
    <p>3 líneas · 87,40 €</p>
    <p>Cliente: Juan Pérez</p>
  </div>
  </aside>
</div>
</div>

{% from "drawer.jinja" import drawer %}
<div class="drawer-stage">
  {% call drawer(title="Detalle del pedido", subtitle="Pedido #1024", state="open") %}
    <p>3 líneas · 87,40 €</p>
    <p>Cliente: Juan Pérez</p>
  {% endcall %}
</div>

<div class="drawer-stage">
  <Drawer title="Detalle del pedido" subtitle="Pedido #1024" state="open">
    <p>3 líneas · 87,40 €</p>
    <p>Cliente: Juan Pérez</p>
  
</Drawer>
</div>

Install the Jinja addon and import the component:

pip install outfitkit

Then in your template:

{% from "&lt;component&gt;.jinja" import &lt;component&gt; %}
{{ &lt;component&gt;(...) }}

Or with JinjaX:

<Component ... />

Left

<div class="drawer-stage">
  <div class="drawer-root" data-state="open">
  <div class="backdrop"></div>
  <aside class="drawer glass left">
    <header class="head">
      <div class="heading">
        <h3 class="title lg">Filtros</h3>
        
      </div>
      <button class="close" aria-label="Cerrar">✕</button>
    </header>
    <div class="content scroll body">
    <p>Categoría, precio, disponibilidad...</p>
  </div>
  </aside>
</div>
</div>

{% from "drawer.jinja" import drawer %}
<div class="drawer-stage">
  {% call drawer(title="Filtros", side="left", state="open") %}
    <p>Categoría, precio, disponibilidad...</p>
  {% endcall %}
</div>

<div class="drawer-stage">
  <Drawer title="Filtros" side="left" state="open">
    <p>Categoría, precio, disponibilidad...</p>
  
</Drawer>
</div>

Install the Jinja addon and import the component:

pip install outfitkit

Then in your template:

{% from "&lt;component&gt;.jinja" import &lt;component&gt; %}
{{ &lt;component&gt;(...) }}

Or with JinjaX:

<Component ... />

Bottom

<div class="drawer-stage">
  <div class="drawer-root" data-state="open">
  <div class="backdrop"></div>
  <aside class="drawer glass bottom">
    <header class="head">
      <div class="heading">
        <h3 class="title lg">Acciones rápidas</h3>
        
      </div>
      <button class="close" aria-label="Cerrar">✕</button>
    </header>
    <div class="content scroll body">
    <p>Compartir, duplicar, eliminar...</p>
  </div>
  </aside>
</div>
</div>

{% from "drawer.jinja" import drawer %}
<div class="drawer-stage">
  {% call drawer(title="Acciones rápidas", side="bottom", state="open") %}
    <p>Compartir, duplicar, eliminar...</p>
  {% endcall %}
</div>

<div class="drawer-stage">
  <Drawer title="Acciones rápidas" side="bottom" state="open">
    <p>Compartir, duplicar, eliminar...</p>
  
</Drawer>
</div>

Install the Jinja addon and import the component:

pip install outfitkit

Then in your template:

{% from "&lt;component&gt;.jinja" import &lt;component&gt; %}
{{ &lt;component&gt;(...) }}

Or with JinjaX:

<Component ... />

Datastar · abrir/cerrar

<div data-signals="{ open: false }">
  <button
  type="button"
  class="btn primary"
   data-on:click="$open = true">Abrir drawer</button>
  <div class="drawer-stage" data-show="$open" style="display: none;">
    <div class="drawer-root" data-state="open">
  <div class="backdrop"></div>
  <aside class="drawer glass">
    <header class="head">
      <div class="heading">
        <h3 class="title lg">Notificaciones</h3>
        
      </div>
      <button class="close" aria-label="Cerrar">✕</button>
    </header>
    <div class="content scroll body">
      <p>3 notificaciones nuevas.</p>
    </div>
  </aside>
</div>
  </div>
</div>

{% from "button.jinja" import button %}
{% from "drawer.jinja" import drawer %}
<div data-signals="{ open: false }">
  {{ button("Abrir drawer", variant="primary", attrs={"data-on:click": "$open = true"}) }}
  <div class="drawer-stage" data-show="$open" style="display: none;">
    {% call drawer(title="Notificaciones", state="open") %}
      <p>3 notificaciones nuevas.</p>
    {% endcall %}
  </div>
</div>

<div data-signals="{ open: false }">
  <Button label="Abrir drawer" variant="primary" data-on:click="$open = true" />
  <div class="drawer-stage" data-show="$open" style="display: none;">
    <Drawer title="Notificaciones" state="open">
      <p>3 notificaciones nuevas.</p>
    
</Drawer>
  </div>
</div>

Install the Jinja addon and import the component:

pip install outfitkit

Then in your template:

{% from "&lt;component&gt;.jinja" import &lt;component&gt; %}
{{ &lt;component&gt;(...) }}

Or with JinjaX:

<Component ... />

API

Prop	Tipo	Default	Descripción
`title`	str	—	Título del drawer.
`subtitle`	str	""	Subtítulo opcional.
`side`	"right"\|"left"\|"bottom"	"right"	Lado por el que aparece.
`state`	"open"\|"closed"	"closed"	Estado inicial.
`attrs`	dict	{}	Atributos extra en el root.
(slot)	—	—	Contenido del body.