Tab bar — OutfitKit
Tab bar
Barra de navegación inferior (mobile bottom nav). Compón .ok-tabbar-item con .ok-tabbar-icon + .ok-tabbar-label y opcional .ok-tabbar-badge. El item activo lleva aria-current="page".
Default · 5 items
<div data-signals="{ tab: 'inicio' }" style="width: 100%;">
<nav class="tabbar" aria-label="Secciones">
<a class="tabbar-item" href="#" data-on:click="$tab = 'inicio'" data-attr:aria-current="$tab === 'inicio' ? 'page' : null" aria-current="page">
<span class="tabbar-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 12 12 3l9 9M5 10v10h14V10"/></svg></span>
<span class="tabbar-label">Inicio</span>
</a>
<a class="tabbar-item" href="#" data-on:click="$tab = 'cobros'" data-attr:aria-current="$tab === 'cobros' ? 'page' : null">
<span class="tabbar-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="6" width="20" height="14" rx="2"/><path d="M2 10h20"/></svg><span class="tabbar-badge">3</span></span>
<span class="tabbar-label">Cobros</span>
</a>
<a class="tabbar-item" href="#" data-on:click="$tab = 'ventas'" data-attr:aria-current="$tab === 'ventas' ? 'page' : null">
<span class="tabbar-icon"><svg 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></span>
<span class="tabbar-label">Ventas</span>
</a>
<a class="tabbar-item" href="#" data-on:click="$tab = 'equipo'" data-attr:aria-current="$tab === 'equipo' ? 'page' : null">
<span class="tabbar-icon"><svg 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></span>
<span class="tabbar-label">Equipo</span>
</a>
<a class="tabbar-item" href="#" data-on:click="$tab = 'ajustes'" data-attr:aria-current="$tab === 'ajustes' ? 'page' : null">
<span class="tabbar-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/></svg></span>
<span class="tabbar-label">Ajustes</span>
</a>
</nav>
</div>{% from "tab-bar.jinja" import tab_bar %}
<div data-signals="{ tab: 'inicio' }" style="width: 100%;">
{% call tab_bar() %}
<a class="tabbar-item" href="#" data-on:click="$tab = 'inicio'" data-attr:aria-current="$tab === 'inicio' ? 'page' : null" aria-current="page">
<span class="tabbar-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 12 12 3l9 9M5 10v10h14V10"/></svg></span>
<span class="tabbar-label">Inicio</span>
</a>
<a class="tabbar-item" href="#" data-on:click="$tab = 'cobros'" data-attr:aria-current="$tab === 'cobros' ? 'page' : null">
<span class="tabbar-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="6" width="20" height="14" rx="2"/><path d="M2 10h20"/></svg><span class="tabbar-badge">3</span></span>
<span class="tabbar-label">Cobros</span>
</a>
<a class="tabbar-item" href="#" data-on:click="$tab = 'ventas'" data-attr:aria-current="$tab === 'ventas' ? 'page' : null">
<span class="tabbar-icon"><svg 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></span>
<span class="tabbar-label">Ventas</span>
</a>
<a class="tabbar-item" href="#" data-on:click="$tab = 'equipo'" data-attr:aria-current="$tab === 'equipo' ? 'page' : null">
<span class="tabbar-icon"><svg 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></span>
<span class="tabbar-label">Equipo</span>
</a>
<a class="tabbar-item" href="#" data-on:click="$tab = 'ajustes'" data-attr:aria-current="$tab === 'ajustes' ? 'page' : null">
<span class="tabbar-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/></svg></span>
<span class="tabbar-label">Ajustes</span>
</a>
{% endcall %}
</div><div data-signals="{ tab: 'inicio' }" style="width: 100%;">
<TabBar>
<a class="tabbar-item" href="#" data-on:click="$tab = 'inicio'" data-attr:aria-current="$tab === 'inicio' ? 'page' : null" aria-current="page">
<span class="tabbar-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 12 12 3l9 9M5 10v10h14V10"/></svg></span>
<span class="tabbar-label">Inicio</span>
</a>
<a class="tabbar-item" href="#" data-on:click="$tab = 'cobros'" data-attr:aria-current="$tab === 'cobros' ? 'page' : null">
<span class="tabbar-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="6" width="20" height="14" rx="2"/><path d="M2 10h20"/></svg><span class="tabbar-badge">3</span></span>
<span class="tabbar-label">Cobros</span>
</a>
<a class="tabbar-item" href="#" data-on:click="$tab = 'ventas'" data-attr:aria-current="$tab === 'ventas' ? 'page' : null">
<span class="tabbar-icon"><svg 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></span>
<span class="tabbar-label">Ventas</span>
</a>
<a class="tabbar-item" href="#" data-on:click="$tab = 'equipo'" data-attr:aria-current="$tab === 'equipo' ? 'page' : null">
<span class="tabbar-icon"><svg 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></span>
<span class="tabbar-label">Equipo</span>
</a>
<a class="tabbar-item" href="#" data-on:click="$tab = 'ajustes'" data-attr:aria-current="$tab === 'ajustes' ? 'page' : null">
<span class="tabbar-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/></svg></span>
<span class="tabbar-label">Ajustes</span>
</a>
</TabBar>
</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 ... />Variant indicator
<nav class="tabbar indicator" aria-label="Secciones">
<a class="tabbar-item" href="#" aria-current="page">
<span class="tabbar-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 12 12 3l9 9M5 10v10h14V10"/></svg></span>
<span class="tabbar-label">Inicio</span>
</a>
<a class="tabbar-item" href="#">
<span class="tabbar-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M3 10h18M8 2v4M16 2v4"/></svg></span>
<span class="tabbar-label">Agenda</span>
</a>
<a class="tabbar-item" href="#">
<span class="tabbar-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg></span>
<span class="tabbar-label">Historial</span>
</a>
<a class="tabbar-item" href="#">
<span class="tabbar-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 8v8M8 12h8"/></svg></span>
<span class="tabbar-label">Más</span>
</a>
</nav>{% from "tab-bar.jinja" import tab_bar %}
{% call tab_bar(variant="indicator") %}
<a class="tabbar-item" href="#" aria-current="page">
<span class="tabbar-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 12 12 3l9 9M5 10v10h14V10"/></svg></span>
<span class="tabbar-label">Inicio</span>
</a>
<a class="tabbar-item" href="#">
<span class="tabbar-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M3 10h18M8 2v4M16 2v4"/></svg></span>
<span class="tabbar-label">Agenda</span>
</a>
<a class="tabbar-item" href="#">
<span class="tabbar-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg></span>
<span class="tabbar-label">Historial</span>
</a>
<a class="tabbar-item" href="#">
<span class="tabbar-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 8v8M8 12h8"/></svg></span>
<span class="tabbar-label">Más</span>
</a>
{% endcall %}<TabBar variant="indicator">
<a class="tabbar-item" href="#" aria-current="page">
<span class="tabbar-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 12 12 3l9 9M5 10v10h14V10"/></svg></span>
<span class="tabbar-label">Inicio</span>
</a>
<a class="tabbar-item" href="#">
<span class="tabbar-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M3 10h18M8 2v4M16 2v4"/></svg></span>
<span class="tabbar-label">Agenda</span>
</a>
<a class="tabbar-item" href="#">
<span class="tabbar-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg></span>
<span class="tabbar-label">Historial</span>
</a>
<a class="tabbar-item" href="#">
<span class="tabbar-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 8v8M8 12h8"/></svg></span>
<span class="tabbar-label">Más</span>
</a>
</TabBar>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
<nav class="tabbar pill" aria-label="Secciones">
<a class="tabbar-item" href="#" aria-current="page">
<span class="tabbar-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 12 12 3l9 9M5 10v10h14V10"/></svg></span>
<span class="tabbar-label">Inicio</span>
</a>
<a class="tabbar-item" href="#">
<span class="tabbar-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg></span>
<span class="tabbar-label">Buscar</span>
</a>
<a class="tabbar-item" href="#">
<span class="tabbar-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/></svg><span class="tabbar-badge">5</span></span>
<span class="tabbar-label">Avisos</span>
</a>
<a class="tabbar-item" href="#">
<span class="tabbar-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="8" r="4"/><path d="M4 21v-1a8 8 0 0 1 16 0v1"/></svg></span>
<span class="tabbar-label">Perfil</span>
</a>
</nav>{% from "tab-bar.jinja" import tab_bar %}
{% call tab_bar(variant="pill") %}
<a class="tabbar-item" href="#" aria-current="page">
<span class="tabbar-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 12 12 3l9 9M5 10v10h14V10"/></svg></span>
<span class="tabbar-label">Inicio</span>
</a>
<a class="tabbar-item" href="#">
<span class="tabbar-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg></span>
<span class="tabbar-label">Buscar</span>
</a>
<a class="tabbar-item" href="#">
<span class="tabbar-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/></svg><span class="tabbar-badge">5</span></span>
<span class="tabbar-label">Avisos</span>
</a>
<a class="tabbar-item" href="#">
<span class="tabbar-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="8" r="4"/><path d="M4 21v-1a8 8 0 0 1 16 0v1"/></svg></span>
<span class="tabbar-label">Perfil</span>
</a>
{% endcall %}<TabBar variant="pill">
<a class="tabbar-item" href="#" aria-current="page">
<span class="tabbar-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 12 12 3l9 9M5 10v10h14V10"/></svg></span>
<span class="tabbar-label">Inicio</span>
</a>
<a class="tabbar-item" href="#">
<span class="tabbar-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg></span>
<span class="tabbar-label">Buscar</span>
</a>
<a class="tabbar-item" href="#">
<span class="tabbar-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/></svg><span class="tabbar-badge">5</span></span>
<span class="tabbar-label">Avisos</span>
</a>
<a class="tabbar-item" href="#">
<span class="tabbar-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="8" r="4"/><path d="M4 21v-1a8 8 0 0 1 16 0v1"/></svg></span>
<span class="tabbar-label">Perfil</span>
</a>
</TabBar>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 FAB central · POS
<nav class="tabbar" aria-label="Secciones">
<a class="tabbar-item" href="#" aria-current="page">
<span class="tabbar-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 12 12 3l9 9M5 10v10h14V10"/></svg></span>
<span class="tabbar-label">Inicio</span>
</a>
<a class="tabbar-item" href="#">
<span class="tabbar-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6h18M3 12h18M3 18h18"/></svg></span>
<span class="tabbar-label">Catálogo</span>
</a>
<button class="tabbar-fab" aria-label="Nueva venta">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M12 5v14M5 12h14"/></svg>
</button>
<a class="tabbar-item" href="#">
<span class="tabbar-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M2 3h6l3 12h11l3-8H6"/></svg><span class="tabbar-badge">2</span></span>
<span class="tabbar-label">Pedidos</span>
</a>
<a class="tabbar-item" href="#">
<span class="tabbar-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="8" r="4"/><path d="M4 21v-1a8 8 0 0 1 16 0v1"/></svg></span>
<span class="tabbar-label">Yo</span>
</a>
</nav>{% from "tab-bar.jinja" import tab_bar %}
{% call tab_bar() %}
<a class="tabbar-item" href="#" aria-current="page">
<span class="tabbar-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 12 12 3l9 9M5 10v10h14V10"/></svg></span>
<span class="tabbar-label">Inicio</span>
</a>
<a class="tabbar-item" href="#">
<span class="tabbar-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6h18M3 12h18M3 18h18"/></svg></span>
<span class="tabbar-label">Catálogo</span>
</a>
<button class="tabbar-fab" aria-label="Nueva venta">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M12 5v14M5 12h14"/></svg>
</button>
<a class="tabbar-item" href="#">
<span class="tabbar-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M2 3h6l3 12h11l3-8H6"/></svg><span class="tabbar-badge">2</span></span>
<span class="tabbar-label">Pedidos</span>
</a>
<a class="tabbar-item" href="#">
<span class="tabbar-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="8" r="4"/><path d="M4 21v-1a8 8 0 0 1 16 0v1"/></svg></span>
<span class="tabbar-label">Yo</span>
</a>
{% endcall %}<TabBar>
<a class="tabbar-item" href="#" aria-current="page">
<span class="tabbar-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 12 12 3l9 9M5 10v10h14V10"/></svg></span>
<span class="tabbar-label">Inicio</span>
</a>
<a class="tabbar-item" href="#">
<span class="tabbar-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6h18M3 12h18M3 18h18"/></svg></span>
<span class="tabbar-label">Catálogo</span>
</a>
<button class="tabbar-fab" aria-label="Nueva venta">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M12 5v14M5 12h14"/></svg>
</button>
<a class="tabbar-item" href="#">
<span class="tabbar-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M2 3h6l3 12h11l3-8H6"/></svg><span class="tabbar-badge">2</span></span>
<span class="tabbar-label">Pedidos</span>
</a>
<a class="tabbar-item" href="#">
<span class="tabbar-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="8" r="4"/><path d="M4 21v-1a8 8 0 0 1 16 0v1"/></svg></span>
<span class="tabbar-label">Yo</span>
</a>
</TabBar>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"|"indicator"|"pill"|"icons"|"fixed" | "default" | Estilo del tab bar. |
attrs | dict | {} | Atributos HTML extra. |
| (slot) | — | — | Items .ok-tabbar-item y/o .ok-tabbar-fab. |