Tags
Etiquetas para clasificar entidades. Variantes de color, sólidas, con tamaños y removibles.
Default
Brand
Activo
Pendiente
Crítico
Info
Neutral
<div class="tags">
<span class="tag">
Default
</span>
<span class="tag brand">
Brand
</span>
<span class="tag leaf">
Activo
</span>
<span class="tag warn">
Pendiente
</span>
<span class="tag danger">
Crítico
</span>
<span class="tag info">
Info
</span>
<span class="tag neutral">
Neutral
</span>
</div>
{% call tags() %}
{{ tag("Default") }}
{{ tag("Brand", variant="brand") }}
{{ tag("Activo", variant="leaf") }}
{{ tag("Pendiente", variant="warn") }}
{{ tag("Crítico", variant="danger") }}
{{ tag("Info", variant="info") }}
{{ tag("Neutral", variant="neutral") }}
{% endcall %}
<Tags>
{{ tag("Default") }}
{{ tag("Brand", variant="brand") }}
{{ tag("Activo", variant="leaf") }}
{{ tag("Pendiente", variant="warn") }}
{{ tag("Crítico", variant="danger") }}
{{ tag("Info", variant="info") }}
{{ tag("Neutral", variant="neutral") }}
</Tags>
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 ... />
VIP
Pagado
Demora
Anulado
Nuevo
<div class="tags">
<span class="tag solid brand">
VIP
</span>
<span class="tag solid leaf">
Pagado
</span>
<span class="tag solid warn">
Demora
</span>
<span class="tag solid danger">
Anulado
</span>
<span class="tag solid info">
Nuevo
</span>
</div>
{% call tags() %}
{{ tag("VIP", variant="brand", solid=True) }}
{{ tag("Pagado", variant="leaf", solid=True) }}
{{ tag("Demora", variant="warn", solid=True) }}
{{ tag("Anulado", variant="danger", solid=True) }}
{{ tag("Nuevo", variant="info", solid=True) }}
{% endcall %}
<Tags>
{{ tag("VIP", variant="brand", solid=True) }}
{{ tag("Pagado", variant="leaf", solid=True) }}
{{ tag("Demora", variant="warn", solid=True) }}
{{ tag("Anulado", variant="danger", solid=True) }}
{{ tag("Nuevo", variant="info", solid=True) }}
</Tags>
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="tags">
<span class="tag brand xs">
XS
</span>
<span class="tag brand sm">
SM
</span>
<span class="tag brand">
Default
</span>
<span class="tag brand lg">
Large
</span>
</div>
{% call tags() %}
{{ tag("XS", variant="brand", size="xs") }}
{{ tag("SM", variant="brand", size="sm") }}
{{ tag("Default", variant="brand") }}
{{ tag("Large", variant="brand", size="lg") }}
{% endcall %}
<Tags>
{{ tag("XS", variant="brand", size="xs") }}
{{ tag("SM", variant="brand", size="sm") }}
{{ tag("Default", variant="brand") }}
{{ tag("Large", variant="brand", size="lg") }}
</Tags>
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 ... />
Urgente
Cocina
Mesa 7
Sin gluten
Activos:
<div data-signals="{ tags: ['urgente', 'cocina', 'mesa-7', 'sin-gluten'] }">
<div class="tags">
<span class="tag brand is-removable" data-show="$tags.includes('urgente')">
Urgente
<button type="button" class="tag-remove" data-on:click="$tags = $tags.filter(t => t !== 'urgente')" aria-label="Eliminar">×</button>
</span>
<span class="tag success is-removable" data-show="$tags.includes('cocina')">
Cocina
<button type="button" class="tag-remove" data-on:click="$tags = $tags.filter(t => t !== 'cocina')" aria-label="Eliminar">×</button>
</span>
<span class="tag info is-removable" data-show="$tags.includes('mesa-7')">
Mesa 7
<button type="button" class="tag-remove" data-on:click="$tags = $tags.filter(t => t !== 'mesa-7')" aria-label="Eliminar">×</button>
</span>
<span class="tag warning is-removable" data-show="$tags.includes('sin-gluten')">
Sin gluten
<button type="button" class="tag-remove" data-on:click="$tags = $tags.filter(t => t !== 'sin-gluten')" aria-label="Eliminar">×</button>
</span>
</div>
<p style="margin-top:10px;font-size:13px;color:var(--ink-3);">
Activos: <code data-text="$tags.join(', ') || '—'"></code>
</p>
</div>
<div data-signals="{ tags: ['urgente', 'cocina', 'mesa-7', 'sin-gluten'] }">
<div class="tags">
<span class="tag brand is-removable" data-show="$tags.includes('urgente')">
Urgente
<button type="button" class="tag-remove" data-on:click="$tags = $tags.filter(t => t !== 'urgente')" aria-label="Eliminar">×</button>
</span>
<span class="tag success is-removable" data-show="$tags.includes('cocina')">
Cocina
<button type="button" class="tag-remove" data-on:click="$tags = $tags.filter(t => t !== 'cocina')" aria-label="Eliminar">×</button>
</span>
<span class="tag info is-removable" data-show="$tags.includes('mesa-7')">
Mesa 7
<button type="button" class="tag-remove" data-on:click="$tags = $tags.filter(t => t !== 'mesa-7')" aria-label="Eliminar">×</button>
</span>
<span class="tag warning is-removable" data-show="$tags.includes('sin-gluten')">
Sin gluten
<button type="button" class="tag-remove" data-on:click="$tags = $tags.filter(t => t !== 'sin-gluten')" aria-label="Eliminar">×</button>
</span>
</div>
<p style="margin-top:10px;font-size:13px;color:var(--ink-3);">
Activos: <code data-text="$tags.join(', ') || '—'"></code>
</p>
</div>
<div data-signals="{ tags: ['urgente', 'cocina', 'mesa-7', 'sin-gluten'] }">
<div class="tags">
<span class="tag brand is-removable" data-show="$tags.includes('urgente')">
Urgente
<button type="button" class="tag-remove" data-on:click="$tags = $tags.filter(t => t !== 'urgente')" aria-label="Eliminar">×</button>
</span>
<span class="tag success is-removable" data-show="$tags.includes('cocina')">
Cocina
<button type="button" class="tag-remove" data-on:click="$tags = $tags.filter(t => t !== 'cocina')" aria-label="Eliminar">×</button>
</span>
<span class="tag info is-removable" data-show="$tags.includes('mesa-7')">
Mesa 7
<button type="button" class="tag-remove" data-on:click="$tags = $tags.filter(t => t !== 'mesa-7')" aria-label="Eliminar">×</button>
</span>
<span class="tag warning is-removable" data-show="$tags.includes('sin-gluten')">
Sin gluten
<button type="button" class="tag-remove" data-on:click="$tags = $tags.filter(t => t !== 'sin-gluten')" aria-label="Eliminar">×</button>
</span>
</div>
<p style="margin-top:10px;font-size:13px;color:var(--ink-3);">
Activos: <code data-text="$tags.join(', ') || '—'"></code>
</p>
</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 · tags (contenedor)
| Prop | Tipo | Default | Descripción |
|---|
attrs | dict | None | Atributos extra. |
API · tag (chip individual)
| Prop | Tipo | Default | Descripción |
|---|
label | str | — | Texto de la etiqueta. |
variant | str | None | brand · leaf · warn · danger · info · neutral. |
size | str | None | xs · sm · lg. |
solid | bool | false | Aplica fondo sólido. |
removable | bool | false | Renderiza botón ×. |
remove_action | str | "" | Expresión Datastar para data-on:click del botón ×. |
attrs | dict | None | Atributos extra. |