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.
• componentSuffix: The suffix to apply to the generated component class name.
• fileSuffix: The suffix to apply to the generated component file name. Defaults to component.
• exampleStyles: 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

Data Attributes

The following data attributes are applied to the ngpTabset directive:

Attribute	Description	Value
data-orientation	The orientation of the tabs.	horizontal | vertical

NgpTabList

Data Attributes

The following data attributes are applied to the ngpTabList directive:

Attribute	Description	Value
data-orientation	The orientation of the tabs.	horizontal | vertical

NgpTabButton

Data Attributes

The following data attributes are applied to the ngpTabButton directive:

Attribute	Description	Value
data-orientation	The orientation of the tabs.	horizontal | vertical
data-active	Applied when the tab is active.	-
data-disabled	Applied when the tab is disabled.	-
data-hover	Applied when the tab is hovered.	-
data-focus-visible	Applied when the tab is focused.	-
data-press	Applied when the tab is pressed.	-

NgpTabPanel

Data Attributes

The following data attributes are applied to the ngpTabPanel directive:

Attribute	Description	Value
data-active	Applied when the tab is active.	-
data-orientation	The orientation of the tabs.	horizontal | vertical

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:

Define the default orientation of the tabs. Define whether the tab should activate on focus. Define whether the tabs should wrap around the tab list.

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.