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
<koala-tabs model="@tabs" />
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 via
switchTab + Alpine-AJAX (fetching each tab's Url
into its container). The demo above reproduces that switch with local Alpine state, since the static design
site has no backend to fetch from.
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>
This is not a tab — it's just the small count badge that sits beside a label
(the 12 / 1.5k bubbles in the
chip tabs above, and in filter rows). Shown here next to plain labels so the badge itself is the focus.
<span koala-tab-pill>@count</span>
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).