Toolbar
Barra superior sticky con backdrop blur. Contiene título de página opcional, búsqueda global, acciones rápidas (notificaciones, avatar) y, en móvil, botón menú. Slot libre para componer.
Copy
<header class="topbar">
<h1 class="title">Pedidos</h1>
<div class="topbar-search">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>
<input placeholder="Buscar tickets, productos…"/>
<span class="topbar-kbd">⌘K</span>
</div>
<div class="actions">
<span class="pill success"><span class="pill-dot"></span>En línea</span>
<span class="avatar sm brand">JC</span>
</div>
</header>
Copy
{% from "toolbar.jinja" import toolbar %}
{% call toolbar(page_title="Pedidos") %}
<div class="topbar-search">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>
<input placeholder="Buscar tickets, productos…"/>
<span class="topbar-kbd">⌘K</span>
</div>
<div class="actions">
<span class="pill success"><span class="pill-dot"></span>En línea</span>
<span class="avatar sm brand">JC</span>
</div>
{% endcall %}
Copy
<Toolbar page_title="Pedidos">
<div class="topbar-search">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>
<input placeholder="Buscar tickets, productos…"/>
<span class="topbar-kbd">⌘K</span>
</div>
<div class="actions">
<span class="pill success"><span class="pill-dot"></span>En línea</span>
<span class="avatar sm brand">JC</span>
</div>
</Toolbar>
Install the Jinja addon and import the component:
pip install outfitkit
Then in your template:
{% from "<component>.jinja" import <component> %}
{{ <component>(...) }}
Or with JinjaX:
<Component ... />
Pedido FCT-184
Duplicar
Guardar
Copy
<header class="topbar">
<div class="topbar-left">
<button class="topbar-back-btn" aria-label="Volver" type="button">
<iconify-icon icon="lucide:arrow-left" width="16" height="16"></iconify-icon>
</button>
</div>
<h1 class="title">Pedido FCT-184</h1>
<div class="actions">
<button class="btn ghost sm">Duplicar</button>
<button class="btn primary sm">Guardar</button>
</div>
</header>
Copy
{% from "toolbar.jinja" import toolbar %}
{% call toolbar(page_title="Pedido FCT-184", back=True) %}
<div class="actions">
<button class="btn ghost sm">Duplicar</button>
<button class="btn primary sm">Guardar</button>
</div>
{% endcall %}
Copy
<Toolbar page_title="Pedido FCT-184" back>
<div class="actions">
<button class="btn ghost sm">Duplicar</button>
<button class="btn primary sm">Guardar</button>
</div>
</Toolbar>
Install the Jinja addon and import the component:
pip install outfitkit
Then in your template:
{% from "<component>.jinja" import <component> %}
{{ <component>(...) }}
Or with JinjaX:
<Component ... />
Copy
<header class="topbar with-crumb">
<div class="topbar-crumb">
<span class="topbar-crumb-item">Inventario</span>
<span class="topbar-crumb-sep">/</span>
<span class="topbar-crumb-item">SKUs</span>
</div>
</header>
Copy
{% from "toolbar.jinja" import toolbar %}
{% call toolbar(with_crumb=True) %}
<div class="topbar-crumb">
<span class="topbar-crumb-item">Inventario</span>
<span class="topbar-crumb-sep">/</span>
<span class="topbar-crumb-item">SKUs</span>
</div>
{% endcall %}
Copy
<Toolbar with_crumb>
<div class="topbar-crumb">
<span class="topbar-crumb-item">Inventario</span>
<span class="topbar-crumb-sep">/</span>
<span class="topbar-crumb-item">SKUs</span>
</div>
</Toolbar>
Install the Jinja addon and import the component:
pip install outfitkit
Then in your template:
{% from "<component>.jinja" import <component> %}
{{ <component>(...) }}
Or with JinjaX:
<Component ... />
API
Prop Tipo Default Descripción
page_titlestr|None None Título de página opcional (h1).
backbool false Renderiza botón de volver.
attrsdict {} Atributos HTML extra.
(slot) — — Búsqueda, acciones, breadcrumb.