Component

Tabs

Tab system with URL-synced state. Animated indicator, badges and disabled tabs.

import { NeuTabsComponent, NeuTabPanelComponent } from '@neural-ui/core/tabs';

With badge and disabled tab

General settings content

import { NeuTabsComponent, NeuTabPanelComponent } from '@neural-ui/core/tabs';

@Component({
  imports: [NeuTabsComponent, NeuTabPanelComponent],
  template: `
    <neu-tabs [tabs]="tabs" tabParam="tab">
      <neu-tab-panel tabId="preview">
        <!-- Preview content -->
      </neu-tab-panel>
      <neu-tab-panel tabId="api">
        <!-- API content -->
      </neu-tab-panel>
    </neu-tabs>
  `
})
export class MyComponent {
  tabs: NeuTab[] = [
    { id: 'preview', label: 'Preview' },
    { id: 'api', label: 'API', badge: 'New' },
    { id: 'disabled', label: 'Disabled', disabled: true },
  ];
}