Tabs

Dynamically show and hide content based on an active tab.

Import

Import the Tabs primitives from ng-primitives/tabs.

import { NgpTabset, NgpTabList, NgpTabButton, NgpTabPanel } from 'ng-primitives/tabs';

Usage

Assemble the tabs directives in your template.

<div ngpTabset>
  <div ngpTabList>
    <button ngpTabButton ngpTabButtonValue="tab1">Tab 1</button>
    <button ngpTabButton ngpTabButtonValue="tab2">Tab 2</button>
    <button ngpTabButton ngpTabButtonValue="tab3">Tab 3</button>
  </div>
  <div ngpTabPanel ngpTabPanelValue="tab1">Tab 1 content</div>
  <div ngpTabPanel ngpTabPanelValue="tab2">Tab 2 content</div>
  <div ngpTabPanel ngpTabPanelValue="tab3">Tab 3 content</div>
</div>

Reusable Component

Create reusable components that uses the tab directives.

Schematics

Generate a reusable tab components using the Angular CLI.

ng g ng-primitives:primitive tabs

Options

• path: The path at which to create the component file.
• prefix: The prefix to apply to the generated component selector.
• component-suffix: The suffix to apply to the generated component class name.
• file-suffix: The suffix to apply to the generated component file name. Defaults to component.
• example-styles: Whether to include example styles in the generated component file. Defaults to true.

API Reference

The following directives are available to import from the ng-primitives/tabs package:

NgpTabset

NgpTabList

NgpTabButton

NgpTabPanel

Global Configuration

You can configure the default options for all tabs in your application by using the provideTabsConfig function in a providers array.

import { provideTabsConfig } from 'ng-primitives/tabs';

bootstrapApplication(AppComponent, {
  providers: [
    provideTabsConfig({
      orientation: 'horizontal',
      activateOnFocus: false,
      wrap: false,
    }),
  ],
});

NgpTabsConfig

The following options are available to configure the default tab options:

Accessibility

Adheres to the Tabs WAI-ARIA design pattern.

Keyboard Interactions

• ArrowLeft: Move focus to the previous tab (horizontal orientation).
• ArrowRight: Move focus to the next tab (horizontal orientation).
• ArrowUp: Move focus to the previous tab (vertical orientation).
• ArrowDown: Move focus to the next tab (vertical orientation).
• Home: Move focus to the first tab.
• End: Move focus to the last tab.