@kit-ng-ui/tabs

Tab strip + panel renderer. Supports line / card / editable-card types, top / bottom / left / right positions, three sizes, and lazy or keep-alive panels.

Install

pnpm add @kit-ng-ui/tabs

@use '@kit-ng-ui/tabs/styles' as tabs;

Usage

Data-driven

items: KitTabItem[] = [
  { key: 'overview', label: 'Overview', content: 'Plain string panel.' },
  { key: 'details', label: 'Details', content: detailsTpl },
];

<kit-tabs [items]="items" [(active)]="active"></kit-tabs>

Declarative panes (full templates)

<kit-tabs [(active)]="active" type="card">
  <kit-tab-pane key="profile" label="Profile">
    <kit-form>…</kit-form>
  </kit-tab-pane>
  <kit-tab-pane key="security" label="Security" [closable]="true"> … </kit-tab-pane>
</kit-tabs>

Editable cards

<kit-tabs
  type="editable-card"
  [items]="items"
  [(active)]="active"
  (add)="onAdd()"
  (remove)="onRemove($event)"
></kit-tabs>

Custom label (badge in the header) + test hooks

A tab header is the plain label by default. Nest an <ng-template kitTabLabel> (import KitTabLabelDirective) to render arbitrary markup — an icon, a live <kit-badge> count — inside the header. label stays the accessible name and the fallback. testid stamps a data-testid on the tab button for E2E hooks.

<kit-tabs [(active)]="direction" (change)="onSelectDirection($any($event))">
  <kit-tab-pane key="incoming" label="Đã nhận" testid="fr-tab-incoming">
    <ng-template kitTabLabel>
      Đã nhận @if (incomingPendingCount() > 0) {
      <kit-badge [count]="incomingPendingCount()" />
      }
    </ng-template>
    <!-- panel body… -->
  </kit-tab-pane>
  <kit-tab-pane key="outgoing" label="Đã gửi" testid="fr-tab-outgoing">
    <!-- panel body… -->
  </kit-tab-pane>
</kit-tabs>

Keyboard is the WAI-ARIA Tabs pattern with roving tabindex (Arrow / Home / End). activation="automatic" (default) selects as focus moves; activation="manual" only moves focus and the user activates with Enter / Space / click. Move focus programmatically with the public focus() method (e.g. from a viewChild):

private readonly tabs = viewChild.required(KitTabsComponent);
// …
this.tabs().focus();       // focus the active tab
this.tabs().focus(1);      // focus the tab at index 1

API

<kit-tabs>

| Input | Type | Default | Description | | ------------ | ---------------------------------------- | ------------- | ------------------------------------------------------- | | items | ReadonlyArray<KitTabItem> | [] | Tab list (ignored if panes are projected). | | active | string \| null (two-way) | first tab | Active tab key. | | type | 'line' \| 'card' \| 'editable-card' | 'line' | Visual style. | | position | 'top' \| 'bottom' \| 'left' \| 'right' | 'top' | Bar position. | | size | 'sm' \| 'md' \| 'lg' | 'md' | Tab density. | | keepAlive | boolean | false | Render hidden panels instead of unmounting. | | centered | boolean | false | Center the tab bar. | | activation | 'automatic' \| 'manual' | 'automatic' | Selection follows focus, or requires Enter/Space/click. |

| Output | Payload | Description | | -------- | -------- | -------------------------------------- | | change | string | Fires when active tab changes. | | add | void | Fires on + click in editable-card. | | remove | string | Fires when a closable tab is closed. |

| Method | Description | | --------------- | ----------------------------------------------------------------- | | focus(index?) | Move focus to the active tab, or to the tab at index (clamped). |

<kit-tab-pane>

| Input | Type | Default | Description | | ---------- | ---------------- | ------- | ----------------------------------------------------------- | | key | string | — | Required. Unique tab key. | | label | string | — | Required. Tab strip label / accessible name / fallback. | | disabled | boolean | false | Disable selection. | | closable | boolean | false | Show the close × in editable mode. | | testid | string \| null | null | data-testid stamped on the tab button. |

Project an <ng-template kitTabLabel> inside a pane (or set KitTabItem.labelTemplate) to replace the header text with arbitrary markup. KitTabItem also accepts a testid.

[kitTabLabel]

Structural directive marking an <ng-template> as a tab's header content. Import KitTabLabelDirective alongside KitTabPaneComponent.