@synapse-ui/tabs

Angular tabs component with line and pill variants, keyboard-navigable tab bar, and disabled tab support.

Installation

npm install @synapse-ui/tabs

Usage

import { Tabs, TabItem } from '@synapse-ui/tabs';

@Component({
  imports: [Tabs],
  template: `
    <synapse-tabs [tabs]="tabs" [activeTab]="active" (tabChange)="active = $event" />

    <div [ngSwitch]="active">
      <div *ngSwitchCase="'overview'">Overview content</div>
      <div *ngSwitchCase="'settings'">Settings content</div>
    </div>
  `,
})
export class MyComponent {
  active = 'overview';
  tabs: TabItem[] = [
    { id: 'overview', label: 'Overview' },
    { id: 'settings', label: 'Settings' },
    { id: 'billing', label: 'Billing', disabled: true },
  ];
}

Inputs

| Input | Type | Default | Description | | ----------- | --------------------- | ----------- | ----------------------------------------- | | tabs | TabItem[] | [] | Tab definitions | | activeTab | string \| undefined | undefined | ID of the active tab (first tab if unset) | | variant | 'line' \| 'pill' | 'line' | Visual style of the tab bar |

Outputs

| Output | Payload | Description | | ----------- | -------- | --------------------------------------- | | tabChange | string | Emitted with the ID of the selected tab |

Running unit tests

Run nx test tabs to execute the unit tests.