Tabs
The chip-row tab bar used on detail / view pages (quotes, transactions, partners) — the same chips as the mega-search facets, so tabs read identically across the portal. Renders from a KoalaTabsModel: one KoalaTab per chip — a label plus an optional icon and count. The active chip is a plum pill.
Canonical
The flush row drops its left indent so the active pill's left edge lines up with the content below, and
carries no bottom border. On real pages the helper is interactive by default — it wires the Alpine
chipFade scroll-fade and switches sections client-side via
switchTab. This demo passes interactive="false"
for a static render.
Each KoalaTab takes an optional Icon
(any IconName), rendered as a <koala-icon size="ExtraSmall">
ahead of the label. Mix icon and label-only tabs freely — see States below.
States
Props
| Attribute | Values | Notes |
|---|---|---|
| model | KoalaTabsModel |
Required. ContainerId (AJAX target), ActiveKey, and the Tabs list. |
| interactive | bool (default true) |
When true, emits the Alpine chipFade + switchTab wiring. Set false for a static render where that JS isn't loaded. |
| KoalaTab | per chip | Key, Label, Url, ContentTarget, optional Count and Icon. |
Tab pill
<span koala-tab-pill>
The auto-formatted count badge — <span koala-tab-pill>1500</span> renders
1.5k, 2000000 → 2m.
Used inside chip tabs above, and by the legacy underlined _TabNav rows
(settings / standalone pages, built from TabNavModel).