Skeletons (states)
Placeholder animado para contenido en carga. La macro states renderiza un átomo .ok-skel con kind = text, title, circle, avatar, btn, chip, card, row.
<div style="display:flex;flex-direction:column;gap:8px;width:300px">
<span class="skel title"></span>
<span class="skel text"></span>
<span class="skel text" style="width:80%"></span>
<span class="skel text" style="width:60%"></span>
</div>
{% from "states.jinja" import states %}
<div style="display:flex;flex-direction:column;gap:8px;width:300px">
{{ states(kind="title") }}
{{ states(kind="text") }}
{{ states(kind="text", width="80%") }}
{{ states(kind="text", width="60%") }}
</div>
<div style="display:flex;flex-direction:column;gap:8px;width:300px">
<States kind="title" />
<States kind="text" />
<States kind="text" width="80%" />
<States kind="text" width="60%" />
</div>
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 style="display:flex;gap:10px;align-items:center;width:320px">
<span class="skel avatar"></span>
<div style="flex:1;display:flex;flex-direction:column;gap:6px">
<span class="skel title"></span>
<span class="skel text" style="width:50%"></span>
</div>
</div>
{% from "states.jinja" import states %}
<div style="display:flex;gap:10px;align-items:center;width:320px">
{{ states(kind="avatar") }}
<div style="flex:1;display:flex;flex-direction:column;gap:6px">
{{ states(kind="title") }}
{{ states(kind="text", width="50%") }}
</div>
</div>
<div style="display:flex;gap:10px;align-items:center;width:320px">
<States kind="avatar" />
<div style="flex:1;display:flex;flex-direction:column;gap:6px">
<States kind="title" />
<States kind="text" width="50%" />
</div>
</div>
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 style="width:280px;display:flex;flex-direction:column;gap:10px">
<span class="skel card" style="height:90px"></span>
<span class="skel title"></span>
<span class="skel text" style="width:80%"></span>
<div style="display:flex;gap:6px">
<span class="skel chip"></span>
<span class="skel chip" style="width:54px"></span>
<span class="skel chip" style="width:88px"></span>
</div>
</div>
{% from "states.jinja" import states %}
<div style="width:280px;display:flex;flex-direction:column;gap:10px">
{{ states(kind="card", height="90px") }}
{{ states(kind="title") }}
{{ states(kind="text", width="80%") }}
<div style="display:flex;gap:6px">
{{ states(kind="chip") }}
{{ states(kind="chip", width="54px") }}
{{ states(kind="chip", width="88px") }}
</div>
</div>
<div style="width:280px;display:flex;flex-direction:column;gap:10px">
<States kind="card" height="90px" />
<States kind="title" />
<States kind="text" width="80%" />
<div style="display:flex;gap:6px">
<States kind="chip" />
<States kind="chip" width="54px" />
<States kind="chip" width="88px" />
</div>
</div>
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 style="display:flex;gap:14px;align-items:center">
<span class="skel circle" style="width:32px;height:32px"></span>
<span class="skel btn"></span>
<span class="skel row" style="width:240px"></span>
</div>
{% from "states.jinja" import states %}
<div style="display:flex;gap:14px;align-items:center">
{{ states(kind="circle", width="32px", height="32px") }}
{{ states(kind="btn") }}
{{ states(kind="row", width="240px") }}
</div>
<div style="display:flex;gap:14px;align-items:center">
<States kind="circle" width="32px" height="32px" />
<States kind="btn" />
<States kind="row" width="240px" />
</div>
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 |
|---|
kind | "text"|"title"|"circle"|"avatar"|"btn"|"chip"|"card"|"row"|"lg" | "text" | Forma del esqueleto. |
width | str|None | None | Ancho CSS opcional (ej. "60%", "120px"). |
height | str|None | None | Altura CSS opcional. |
attrs | dict | {} | Atributos HTML extra. |