Stats
Contenedor en grid para mostrar varios <Stat /> en línea con bordes verticales entre ellos.
Clientes nuevos
38
igual que mes
<div class="stats">
<div class="stat">
<div class="label">Pedidos</div>
<div class="value">1.284</div><div class="stat-delta up">+6,2%</div>
</div>
<div class="stat">
<div class="label">Facturación</div>
<div class="value">€48.210</div><div class="stat-delta up">+9,1%</div>
</div>
<div class="stat">
<div class="label">Devoluciones</div>
<div class="value">12</div><div class="stat-delta down">−4 vs mes</div>
</div>
<div class="stat">
<div class="label">Clientes nuevos</div>
<div class="value">38</div><div class="stat-delta">igual que mes</div>
</div>
</div>
{% from "stat.jinja" import stat %}
{% from "stats.jinja" import stats %}
{% call stats() %}
{{ stat("Pedidos", "1.284", delta="+6,2%", delta_dir="up") }}
{{ stat("Facturación", "€48.210", delta="+9,1%", delta_dir="up") }}
{{ stat("Devoluciones", "12", delta="−4 vs mes", delta_dir="down") }}
{{ stat("Clientes nuevos", "38", delta="igual que mes") }}
{% endcall %}
<Stats>
<Stat label="Pedidos" delta="+6,2%" delta_dir="up" />
<Stat label="Facturación" delta="+9,1%" delta_dir="up" />
<Stat label="Devoluciones" delta="−4 vs mes" delta_dir="down" />
<Stat label="Clientes nuevos" delta="igual que mes" />
</Stats>
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 ... />
<div class="stats">
<div class="stat">
<div class="label">Stock crítico</div>
<div class="value">7 SKU</div>
</div>
<div class="stat">
<div class="label">En tránsito</div>
<div class="value">23</div>
</div>
<div class="stat">
<div class="label">Almacenes</div>
<div class="value">4</div>
</div>
</div>
{% from "stat.jinja" import stat %}
{% from "stats.jinja" import stats %}
{% call stats() %}
{{ stat("Stock crítico", "7 SKU") }}
{{ stat("En tránsito", "23") }}
{{ stat("Almacenes", "4") }}
{% endcall %}
<Stats>
<Stat label="Stock crítico" />
<Stat label="En tránsito" />
<Stat label="Almacenes" />
</Stats>
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 |
variant | str|None | None | Modificador opcional (ej. glass). |
attrs | dict | {} | Atributos HTML extra. |
| (slot) | — | — | Items <Stat />. |