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
@section WorkspaceTabs {
<koala-tabs model="@tabs" />
}
@* content below renders in the main column, in its own card(s) *@
The chip row sits in its own bordered container (ws-chips-card — a
surface-container band with a hairline outline), in the portal's WorkspaceTabs
layout slot, and the active section renders below it in the main column as a separate card — the same split
ViewTransaction uses. 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.
On mobile (below sm) the interactive chip row collapses to a
full-width dropdown styled like the context switcher — the trigger shows the active tab (icon + label +
count) and the panel lists the rest, driving the same switchTab AJAX. Desktop
keeps the chip row. (Static, non-interactive renders stay a plain chip row at every width.)
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. Optional ProgressPercent / ProgressTooltip swap the count pill for the progress donut. |
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).