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>

API Reference

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

NgpTabset

Apply the ngpTabset directive to an element to manage the tabs.

• Selector: [ngpTabset]
• Exported As: ngpTabset
• Host Directives: NgpRovingFocusGroup

Define the selected tab. Define the orientation of the tabs. Define whether the tab should activate on focus.

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

Apply the ngpTabList directive to an element that represents the list of tab buttons.

• Selector: [ngpTabList]
• Exported As: 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

Apply the ngpTabButton directive to an element within a tab list to represent a tab button. This directive should be applied to a button element.

• Selector: [ngpTabButton]
• Exported As: ngpTabButton
• Host Directives: NgpRovingFocusItem, NgpHover, NgpFocusVisible, NgpPress

Define the value of the tab. Define whether the tab button is disabled.

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

Apply the ngpTabPanel directive to an element that represents the content of a tab.

• Selector: [ngpTabPanel]
• Exported As: ngpTabPanel

Define the value of the tab.

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 tabss in your application by using the provideNgpTabsConfig function in a providers array.

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

bootstrapApplication(AppComponent, {
  providers: [
    provideNgpTabsConfig({
      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.