Swipe list
Lista con acciones reveladas por gesto horizontal — patrón iOS Mail / Apple Reminders. Touch-first: en pantallas táctiles desliza la fila a izquierda para revelar acciones. Click fuera o tap en la fila cierra.
En desktop (este demo se sirve normalmente desde un ratón), pasa mouse=true para activar el fallback de mouse-drag. Sin eso, el gesto solo responde a touch real. Las clases .is-open / data-swipe-open="true" también funcionan estáticamente sin JS.
A
Anna López
Re: oferta proveedor — confirmamos para…
12:34
Archivar Borrar
E
Equipo ops
Backup nocturno completado · 0 errores
11:08
Archivar Borrar
N
Newsletter
Resumen semanal · KPIs · 14 % de mejora en…
09:51
Archivar Borrar
C
Carlos Vega
Factura adjunta — vencimiento 30 días
Ayer
Archivar Borrar
Copy
<ul class="swipe" data-swipe-mouse>
<li class="swipe-item">
<div class="swipe-row">
<span class="avatar" aria-hidden="true">A</span>
<div>
<div class="title">Anna López</div>
<div class="sub">Re: oferta proveedor — confirmamos para…</div>
</div>
<span class="meta">12:34</span>
</div>
<div class="swipe-actions"><button type="button" class="swipe-btn archive">Archivar</button><button type="button" class="swipe-btn danger">Borrar</button>
</div>
</li>
<li class="swipe-item">
<div class="swipe-row">
<span class="avatar" aria-hidden="true">E</span>
<div>
<div class="title">Equipo ops</div>
<div class="sub">Backup nocturno completado · 0 errores</div>
</div>
<span class="meta">11:08</span>
</div>
<div class="swipe-actions"><button type="button" class="swipe-btn archive">Archivar</button><button type="button" class="swipe-btn danger">Borrar</button>
</div>
</li>
<li class="swipe-item">
<div class="swipe-row">
<span class="avatar" aria-hidden="true">N</span>
<div>
<div class="title">Newsletter</div>
<div class="sub">Resumen semanal · KPIs · 14 % de mejora en…</div>
</div>
<span class="meta">09:51</span>
</div>
<div class="swipe-actions"><button type="button" class="swipe-btn archive">Archivar</button><button type="button" class="swipe-btn danger">Borrar</button>
</div>
</li>
<li class="swipe-item">
<div class="swipe-row">
<span class="avatar" aria-hidden="true">C</span>
<div>
<div class="title">Carlos Vega</div>
<div class="sub">Factura adjunta — vencimiento 30 días</div>
</div>
<span class="meta">Ayer</span>
</div>
<div class="swipe-actions"><button type="button" class="swipe-btn archive">Archivar</button><button type="button" class="swipe-btn danger">Borrar</button>
</div>
</li>
</ul>
Copy
{% from "swipe.jinja" import swipe %}
{{ swipe(items=emails, actions=[
{"label": "Archivar", "kind": "archive"},
{"label": "Borrar", "kind": "danger"},
], mouse=true) }}
Copy
{% from "swipe.jinja" import swipe %}
{{ swipe(items=emails, actions=[
{"label": "Archivar", "kind": "archive"},
{"label": "Borrar", "kind": "danger"},
], mouse=true) }}
Install the Jinja addon and import the component:
pip install outfitkitThen in your template:
{% from "<component>.jinja" import <component> %}
{{ <component>(...) }}Or with JinjaX:
<Component ... />
C
Comprar materia prima
Vencimiento mañana
·
Completar
R
Revisar inventario almacén
Pendiente desde el lunes
·
Completar
L
Llamar al transportista
Pedido #4421
·
Completar
Copy
<ul class="swipe single" data-swipe-mouse>
<li class="swipe-item">
<div class="swipe-row">
<span class="avatar" aria-hidden="true">C</span>
<div>
<div class="title">Comprar materia prima</div>
<div class="sub">Vencimiento mañana</div>
</div>
<span class="meta">·</span>
</div>
<div class="swipe-actions"><button type="button" class="swipe-btn archive">Completar</button>
</div>
</li>
<li class="swipe-item">
<div class="swipe-row">
<span class="avatar" aria-hidden="true">R</span>
<div>
<div class="title">Revisar inventario almacén</div>
<div class="sub">Pendiente desde el lunes</div>
</div>
<span class="meta">·</span>
</div>
<div class="swipe-actions"><button type="button" class="swipe-btn archive">Completar</button>
</div>
</li>
<li class="swipe-item">
<div class="swipe-row">
<span class="avatar" aria-hidden="true">L</span>
<div>
<div class="title">Llamar al transportista</div>
<div class="sub">Pedido #4421</div>
</div>
<span class="meta">·</span>
</div>
<div class="swipe-actions"><button type="button" class="swipe-btn archive">Completar</button>
</div>
</li>
</ul>
Copy
{{ swipe(items=tasks, actions=[{"label": "Completar", "kind": "archive"}], single=true, mouse=true) }}
Copy
{{ swipe(items=tasks, actions=[{"label": "Completar", "kind": "archive"}], single=true, mouse=true) }}
Install the Jinja addon and import the component:
pip install outfitkitThen in your template:
{% from "<component>.jinja" import <component> %}
{{ <component>(...) }}Or with JinjaX:
<Component ... />
P
Pedido #4421
Cliente · Ferretería Norte
·
Marcar
Cancelar
Copy
<ul class="swipe">
<li class="swipe-item is-open">
<div class="swipe-row">
<span class="avatar">P</span>
<div><div class="title">Pedido #4421</div><div class="sub">Cliente · Ferretería Norte</div></div>
<span class="meta">·</span>
</div>
<div class="swipe-actions">
<button class="swipe-btn warn">Marcar</button>
<button class="swipe-btn danger">Cancelar</button>
</div>
</li>
</ul>
Copy
{# El estado .is-open puede aplicarse vía servidor sin JS. #}
<ul class="swipe">
<li class="swipe-item is-open">
<div class="swipe-row">
<span class="avatar">P</span>
<div><div class="title">Pedido #4421</div><div class="sub">Cliente · Ferretería Norte</div></div>
<span class="meta">·</span>
</div>
<div class="swipe-actions">
<button class="swipe-btn warn">Marcar</button>
<button class="swipe-btn danger">Cancelar</button>
</div>
</li>
</ul>
Copy
{# El estado .is-open puede aplicarse vía servidor sin JS. #}
<ul class="swipe">
<li class="swipe-item is-open">
<div class="swipe-row">
<span class="avatar">P</span>
<div><div class="title">Pedido #4421</div><div class="sub">Cliente · Ferretería Norte</div></div>
<span class="meta">·</span>
</div>
<div class="swipe-actions">
<button class="swipe-btn warn">Marcar</button>
<button class="swipe-btn danger">Cancelar</button>
</div>
</li>
</ul>
Install the Jinja addon and import the component:
pip install outfitkitThen in your template:
{% from "<component>.jinja" import <component> %}
{{ <component>(...) }}Or with JinjaX:
<Component ... />
API · macro swipe()
Prop Tipo Default Descripción
itemslist[dict] []Filas. Campos: title, sub, meta, avatar, actions (override por fila). actionslist[dict] NoneAcciones por defecto para todas las filas. Cada dict: {label, kind, icon?}. singlebool falseSi true, una sola acción (full width, 6rem revelado). mousebool falseActiva el fallback de mouse drag (útil para demos en desktop).
Kinds (color semántico de la acción)
archive · info azuldanger / del · rojo destructivowarn / flag · amarillo aviso(sin kind) · medium gris
API JS — window.OKSwipe
OKSwipe.init(item) // inicializa un .swipe-item
OKSwipe.initAll(root) // inicializa todos los .swipe-item bajo root
OKSwipe.setOpen(item, b) // abre/cierra programáticamente