Pull to refresh — OutfitKit

Pull to refresh

Indicador "tira hacia abajo para actualizar" — patrón estándar de pantallas táctiles. El gesto solo se activa cuando la lista está al tope (scrollTop = 0). El JS dispara un CustomEvent("ptr:refresh", {detail:{done}}) en el host; el consumidor llama detail.done() al terminar.

Touch-first. En desktop usa mouse=true para activar fallback de mouse drag. Sin gesto real, los demos abajo lo simulan así.

Básico — pulsa y arrastra hacia abajo (mouse drag activo)

Tira para actualizar

Mensaje 1 · hace 2 minutos
Mensaje 2 · hace 5 minutos
Mensaje 3 · hace 1 hora
Mensaje 4 · hace 3 horas
Mensaje 5 · hace 1 día
Mensaje 6 · ayer
Mensaje 7 · ayer
Mensaje 8 · hace 2 días
Mensaje 9 · hace 3 días
Mensaje 10 · hace 1 semana

<div data-ptr-host data-ptr-mouse>
  <div class="ptr" data-state="idle">
    <div class="ptr-spinner" aria-hidden="true"></div>
    <span class="ptr-label">
      Tira para actualizar
    </span>
  </div>
  
<div data-ptr-scroller style="max-height:280px; overflow:auto; background:var(--bg-1); border:var(--border-w) solid var(--line); border-radius:var(--radius-md)">
  <ul class="list" style="margin:0">
    <li>Mensaje 1 · hace 2 minutos</li>
    <li>Mensaje 2 · hace 5 minutos</li>
    <li>Mensaje 3 · hace 1 hora</li>
    <li>Mensaje 4 · hace 3 horas</li>
    <li>Mensaje 5 · hace 1 día</li>
    <li>Mensaje 6 · ayer</li>
    <li>Mensaje 7 · ayer</li>
    <li>Mensaje 8 · hace 2 días</li>
    <li>Mensaje 9 · hace 3 días</li>
    <li>Mensaje 10 · hace 1 semana</li>
  </ul>
</div>

</div>

{% from "refresher.jinja" import refresher %}
{% call refresher(mouse=true) %}
<div data-ptr-scroller style="max-height:280px; overflow:auto; background:var(--bg-1)">
  <ul class="list">
    <li>Mensaje 1 · hace 2 minutos</li>
    <li>Mensaje 2 · hace 5 minutos</li>
    <li>Mensaje 3 · hace 1 hora</li>
    <li>Mensaje 4 · hace 3 horas</li>
    <li>Mensaje 5 · hace 1 día</li>
  </ul>
</div>
{% endcall %}

{% from "refresher.jinja" import refresher %}
{% call refresher(mouse=true) %}
<div data-ptr-scroller style="max-height:280px; overflow:auto; background:var(--bg-1)">
  <ul class="list">
    <li>Mensaje 1 · hace 2 minutos</li>
    <li>Mensaje 2 · hace 5 minutos</li>
    <li>Mensaje 3 · hace 1 hora</li>
    <li>Mensaje 4 · hace 3 horas</li>
    <li>Mensaje 5 · hace 1 día</li>
  </ul>
</div>
{% endcall %}

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 ... />

Con callback — incrementa contador en 1.2s

Tira para actualizar

Refrescos completados: 0

Arrastra hacia abajo desde aquí.

<div data-signals-count="0" data-on:ptr:refresh="
  $count = $count + 1;
  setTimeout(() => evt.detail.done(), 1200);
">
  <div data-ptr-host data-ptr-mouse>
  <div class="ptr" data-state="idle">
    <div class="ptr-spinner" aria-hidden="true"></div>
    <span class="ptr-label" data-ready="¡Suelta!" data-refreshing="Fetching…">
      Tira para actualizar
    </span>
  </div>
  
    <div data-ptr-scroller style="max-height:200px; overflow:auto; background:var(--bg-1); border:var(--border-w) solid var(--line); border-radius:var(--radius-md); padding:1rem">
      <p style="margin:0">Refrescos completados: <strong data-text="$count">0</strong></p>
      <p style="margin-top:.5rem; color:var(--ink-3)">Arrastra hacia abajo desde aquí.</p>
    </div>
  
</div>
</div>

<div data-signals-count="0" data-on:ptr:refresh="
  $count = $count + 1;
  setTimeout(() => evt.detail.done(), 1200);
">
  {% call refresher(mouse=true, labels={"refreshing": "Fetching…", "ready": "¡Suelta!"}) %}
    <div data-ptr-scroller style="max-height:200px; overflow:auto">
      <p>Refrescos: <strong data-text="$count"></strong></p>
    </div>
  {% endcall %}
</div>

<div data-signals-count="0" data-on:ptr:refresh="
  $count = $count + 1;
  setTimeout(() => evt.detail.done(), 1200);
">
  {% call refresher(mouse=true, labels={"refreshing": "Fetching…", "ready": "¡Suelta!"}) %}
    <div data-ptr-scroller style="max-height:200px; overflow:auto">
      <p>Refrescos: <strong data-text="$count"></strong></p>
    </div>
  {% endcall %}
</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 ... />

Estado .refreshing (spinner activo, sin gesto)

Actualizando…

<div style="background:var(--bg-1); border:var(--border-w) solid var(--line); border-radius:var(--radius-md)">
  <div class="ptr" data-state="refreshing">
    <div class="ptr-spinner" aria-hidden="true"></div>
    <span class="ptr-label">Actualizando…</span>
  </div>
</div>

<div class="ptr" data-state="refreshing">
  <div class="ptr-spinner"></div>
  <span class="ptr-label">Actualizando…</span>
</div>

<div class="ptr" data-state="refreshing">
  <div class="ptr-spinner"></div>
  <span class="ptr-label">Actualizando…</span>
</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 · macro `pull_to_refresh()`

Prop	Tipo	Default	Descripción
`state`	"idle" \| "pulling" \| "ready" \| "refreshing"	`"idle"`	Estado inicial.
`mouse`	bool	`false`	Habilita fallback de mouse drag (útil en desktop para demos).
`labels`	dict	`{}`	Override de textos por estado. Keys: `idle`, `pulling`, `ready`, `refreshing`.
(slot)	—	—	Contenido. Si quieres scroll independiente, envuelve en `<div data-ptr-scroller>`.

Evento

Evento	Detail	Descripción
`ptr:refresh`	`{done: () => void}`	Disparado en el host `[data-ptr-host]` al soltar pasado el threshold. Llama `done()` al terminar; si no, se resetea solo en 3 s.

API JS · `window.OKPullToRefresh`

OKPullToRefresh.init(host)
OKPullToRefresh.initAll(root)

Pull to refresh

API · macro pull_to_refresh()

Evento

API JS · window.OKPullToRefresh

API · macro `pull_to_refresh()`

API JS · `window.OKPullToRefresh`