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-active	The state of the tab.	true | false
data-disabled	The disabled state.	true | false
data-orientation	The orientation of the tabs.	horizontal | vertical
data-hover	The hover state.	true | false
data-focus-visible	The focus state.	true | false
data-press	The press state.	true | false

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	The state of the tab.	true | false
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.