Tabs — OutfitKit
Tabs
Tablist horizontal o vertical. El consumidor compone los .ok-tab dentro y enlaza el estado activo con aria-selected.
Default — underline
<div data-signals="{ tab: 'resumen' }" style="width: 100%;">
<div class="ok-tabs">
<button class="tab" data-on:click="$tab = 'resumen'" data-attr:aria-selected="$tab === 'resumen'" aria-selected="true">Resumen</button>
<button class="tab" data-on:click="$tab = 'movimientos'" data-attr:aria-selected="$tab === 'movimientos'" aria-selected="false">Movimientos <span class="tab-badge">128</span></button>
<button class="tab" data-on:click="$tab = 'conciliacion'" data-attr:aria-selected="$tab === 'conciliacion'" aria-selected="false">Conciliación <span class="tab-badge">3</span></button>
<button class="tab" data-on:click="$tab = 'auditoria'" data-attr:aria-selected="$tab === 'auditoria'" aria-selected="false">Auditoría</button>
<button class="tab" data-on:click="$tab = 'configuracion'" data-attr:aria-selected="$tab === 'configuracion'" aria-selected="false">Configuración</button>
</div>
</div>{% from "tabs.jinja" import tabs %}
<div data-signals="{ tab: 'resumen' }" style="width: 100%;">
{% call tabs() %}
<button class="tab" data-on:click="$tab = 'resumen'" data-attr:aria-selected="$tab === 'resumen'" aria-selected="true">Resumen</button>
<button class="tab" data-on:click="$tab = 'movimientos'" data-attr:aria-selected="$tab === 'movimientos'" aria-selected="false">Movimientos <span class="tab-badge">128</span></button>
<button class="tab" data-on:click="$tab = 'conciliacion'" data-attr:aria-selected="$tab === 'conciliacion'" aria-selected="false">Conciliación <span class="tab-badge">3</span></button>
<button class="tab" data-on:click="$tab = 'auditoria'" data-attr:aria-selected="$tab === 'auditoria'" aria-selected="false">Auditoría</button>
<button class="tab" data-on:click="$tab = 'configuracion'" data-attr:aria-selected="$tab === 'configuracion'" aria-selected="false">Configuración</button>
{% endcall %}
</div><div data-signals="{ tab: 'resumen' }" style="width: 100%;">
<Tabs>
<button class="tab" data-on:click="$tab = 'resumen'" data-attr:aria-selected="$tab === 'resumen'" aria-selected="true">Resumen</button>
<button class="tab" data-on:click="$tab = 'movimientos'" data-attr:aria-selected="$tab === 'movimientos'" aria-selected="false">Movimientos <span class="tab-badge">128</span></button>
<button class="tab" data-on:click="$tab = 'conciliacion'" data-attr:aria-selected="$tab === 'conciliacion'" aria-selected="false">Conciliación <span class="tab-badge">3</span></button>
<button class="tab" data-on:click="$tab = 'auditoria'" data-attr:aria-selected="$tab === 'auditoria'" aria-selected="false">Auditoría</button>
<button class="tab" data-on:click="$tab = 'configuracion'" data-attr:aria-selected="$tab === 'configuracion'" aria-selected="false">Configuración</button>
</Tabs>
</div>Install the Jinja addon and import the component:
pip install outfitkitThen in your template:
{% from "<component>.jinja" import <component> %}
{{ <component>(...) }}Or with JinjaX:
<Component ... />Con iconos
<div class="ok-tabs">
<button class="tab" aria-selected="true">
<svg class="tab-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="9"/><rect x="14" y="3" width="7" height="5"/><rect x="14" y="12" width="7" height="9"/><rect x="3" y="16" width="7" height="5"/></svg>
Vista general
</button>
<button class="tab" aria-selected="false">
<svg class="tab-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 3v18h18"/><path d="M7 14l4-4 4 4 5-5"/></svg>
Métricas
</button>
<button class="tab" aria-selected="false">
<svg class="tab-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="7" r="4"/><path d="M5 21v-2a4 4 0 0 1 4-4h6a4 4 0 0 1 4 4v2"/></svg>
Equipo
</button>
</div>{% from "tabs.jinja" import tabs %}
{% call tabs() %}
<button class="tab" aria-selected="true">
<svg class="tab-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="9"/><rect x="14" y="3" width="7" height="5"/><rect x="14" y="12" width="7" height="9"/><rect x="3" y="16" width="7" height="5"/></svg>
Vista general
</button>
<button class="tab" aria-selected="false">
<svg class="tab-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 3v18h18"/><path d="M7 14l4-4 4 4 5-5"/></svg>
Métricas
</button>
<button class="tab" aria-selected="false">
<svg class="tab-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="7" r="4"/><path d="M5 21v-2a4 4 0 0 1 4-4h6a4 4 0 0 1 4 4v2"/></svg>
Equipo
</button>
{% endcall %}<Tabs>
<button class="tab" aria-selected="true">
<svg class="tab-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="9"/><rect x="14" y="3" width="7" height="5"/><rect x="14" y="12" width="7" height="9"/><rect x="3" y="16" width="7" height="5"/></svg>
Vista general
</button>
<button class="tab" aria-selected="false">
<svg class="tab-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 3v18h18"/><path d="M7 14l4-4 4 4 5-5"/></svg>
Métricas
</button>
<button class="tab" aria-selected="false">
<svg class="tab-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="7" r="4"/><path d="M5 21v-2a4 4 0 0 1 4-4h6a4 4 0 0 1 4 4v2"/></svg>
Equipo
</button>
</Tabs>Install the Jinja addon and import the component:
pip install outfitkitThen in your template:
{% from "<component>.jinja" import <component> %}
{{ <component>(...) }}Or with JinjaX:
<Component ... />Variant pill
<div class="ok-tabs pill">
<button class="tab" aria-selected="true">Hoy</button>
<button class="tab" aria-selected="false">7 días</button>
<button class="tab" aria-selected="false">30 días</button>
<button class="tab" aria-selected="false">Año</button>
</div>{% from "tabs.jinja" import tabs %}
{% call tabs(variant="pill") %}
<button class="tab" aria-selected="true">Hoy</button>
<button class="tab" aria-selected="false">7 días</button>
<button class="tab" aria-selected="false">30 días</button>
<button class="tab" aria-selected="false">Año</button>
{% endcall %}<Tabs variant="pill">
<button class="tab" aria-selected="true">Hoy</button>
<button class="tab" aria-selected="false">7 días</button>
<button class="tab" aria-selected="false">30 días</button>
<button class="tab" aria-selected="false">Año</button>
</Tabs>Install the Jinja addon and import the component:
pip install outfitkitThen in your template:
{% from "<component>.jinja" import <component> %}
{{ <component>(...) }}Or with JinjaX:
<Component ... />Datastar · cambio reactivo de tab
Tab activo: general
<div data-signals="{ tab: 'general' }" style="width: 100%;">
<div class="ok-tabs">
<button class="tab" data-on:click="$tab = 'general'" data-attr:aria-selected="$tab === 'general'" aria-selected="true">General</button>
<button class="tab" data-on:click="$tab = 'facturacion'" data-attr:aria-selected="$tab === 'facturacion'" aria-selected="false">Facturación <span class="tab-badge">3</span></button>
<button class="tab" data-on:click="$tab = 'equipo'" data-attr:aria-selected="$tab === 'equipo'" aria-selected="false">Equipo</button>
<button class="tab" data-on:click="$tab = 'seguridad'" data-attr:aria-selected="$tab === 'seguridad'" aria-selected="false">Seguridad</button>
</div>
<div style="margin-top: 16px; padding: 14px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink-2); font-size: 13px;">
Tab activo: <strong data-text="$tab">general</strong>
</div>
</div>{% from "tabs.jinja" import tabs %}
<div data-signals="{ tab: 'general' }" style="width: 100%;">
{% call tabs() %}
<button class="tab" data-on:click="$tab = 'general'" data-attr:aria-selected="$tab === 'general'" aria-selected="true">General</button>
<button class="tab" data-on:click="$tab = 'facturacion'" data-attr:aria-selected="$tab === 'facturacion'" aria-selected="false">Facturación <span class="tab-badge">3</span></button>
<button class="tab" data-on:click="$tab = 'equipo'" data-attr:aria-selected="$tab === 'equipo'" aria-selected="false">Equipo</button>
<button class="tab" data-on:click="$tab = 'seguridad'" data-attr:aria-selected="$tab === 'seguridad'" aria-selected="false">Seguridad</button>
{% endcall %}
<div style="margin-top: 16px; padding: 14px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink-2); font-size: 13px;">
Tab activo: <strong data-text="$tab">general</strong>
</div>
</div><div data-signals="{ tab: 'general' }" style="width: 100%;">
<Tabs>
<button class="tab" data-on:click="$tab = 'general'" data-attr:aria-selected="$tab === 'general'" aria-selected="true">General</button>
<button class="tab" data-on:click="$tab = 'facturacion'" data-attr:aria-selected="$tab === 'facturacion'" aria-selected="false">Facturación <span class="tab-badge">3</span></button>
<button class="tab" data-on:click="$tab = 'equipo'" data-attr:aria-selected="$tab === 'equipo'" aria-selected="false">Equipo</button>
<button class="tab" data-on:click="$tab = 'seguridad'" data-attr:aria-selected="$tab === 'seguridad'" aria-selected="false">Seguridad</button>
</Tabs>
<div style="margin-top: 16px; padding: 14px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink-2); font-size: 13px;">
Tab activo: <strong data-text="$tab">general</strong>
</div>
</div>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
| Prop | Tipo | Default | Descripción |
|---|---|---|---|
variant | "default"|"pill"|"vertical" | "default" | Estilo del tablist. |
attrs | dict | {} | Atributos HTML extra. |
| (slot) | — | — | Botones .ok-tab con aria-selected. |