AngularLynx

    Tabs

    Panels that share one space, switched by a row of tab buttons.

    ui-tabssrc/app/app.ts

    Installation

    npx @blotch/dolan add tabs
    import {
  UiTabs,
  UiTabsContent,
  UiTabsList,
  UiTabsTrigger,
} from '../components/ui/tabs';

    Usage

    src/app/app.ts
    import { Component, signal } from '@angular/core';
import { LYNX_ELEMENTS } from '@blotch/angular-lynx';
import {
  UiTabs,
  UiTabsContent,
  UiTabsList,
  UiTabsTrigger,
} from '../components/ui/tabs';

@Component({
  selector: 'app-root',
  imports: [LYNX_ELEMENTS, UiTabs, UiTabsList, UiTabsTrigger, UiTabsContent],
  template: `
    <ui-tabs [(value)]="tab">
      <ui-tabs-list>
        <ui-tabs-trigger value="account">Account</ui-tabs-trigger>
        <ui-tabs-trigger value="password">Password</ui-tabs-trigger>
      </ui-tabs-list>
      <ui-tabs-content value="account">
        <text class="text-sm text-foreground">Change your name and email.</text>
      </ui-tabs-content>
      <ui-tabs-content value="password">
        <text class="text-sm text-foreground">Change your password.</text>
      </ui-tabs-content>
    </ui-tabs>
  `,
})
export class App {
  protected readonly tab = signal('account');
}
    • A trigger and a panel belong together when their value matches.
    • Set a starting value. With the default '', no tab is active and every panel is hidden.
    • Triggers wrap their content in <text>, so pass plain text.
    • The tab bar hugs its triggers instead of filling the width.

    Without a signal

    <ui-tabs value="account" (changed)="onTab($event)">…</ui-tabs>

    A plain value sets the starting tab. changed emits the value of each tab the user taps.

    Panels keep their state

    Every panel stays rendered, and inactive ones are hidden rather than removed. So components inside a panel keep their state when the user switches away and back.

    When the active tab changes, the new panel slides in from the side of the tab that was tapped.

    API

    UiTabs

    InputTypeDefaultDescription
    valuestring''The active tab's value. Supports [(value)].
    classstring''Extra Tailwind classes for the container.
    OutputTypeDescription
    changedstringEmits the value of the tab the user tapped.
    valueChangestringEmits the new value, for [(value)].

    UiTabsTrigger

    InputTypeDefaultDescription
    valuestringRequiredThe panel this trigger shows.
    classstring''Extra Tailwind classes for the trigger.

    No outputs.

    UiTabsContent

    InputTypeDefaultDescription
    valuestringRequiredThe trigger that shows this panel.
    classstring''Extra Tailwind classes for the panel.

    No outputs.

    All other sub-components (UiTabsList) accept class.

    • Accordion: stacked sections instead of tabs
    • Toggle: a segmented control without panels