Tabs directive toolkit that offers a seamless and accessible solution for creating tab interfaces.
Installation
Add and import the module into your imports section.
Module
Standalone directives
Anatomy
Directive's set structure.
Input props
TabsRoot Attribute Directive
The root directive that contains the tabs list and content. Handles the state and bindings.
| Input | Default | Type | Description |
|---|---|---|---|
| value | null | string | null | The selected value of the tabs. |
| orientation | horizontal | "vertical" | "horizontal" | The orientation of the tabs component. |
| automatic | true | boolean | When true, tab selection happens automatically on focus. |
| Output | Returns | Description |
|---|---|---|
| valueChange | string | null | Event handler emitted when the selected tab changes |
| Attribute | Value |
|---|---|
| data-orientation | "vertical" | "horizontal" |
TabsList Attribute Directive
A container for the tab triggers that handles keyboard navigation and accessibility.
| Input | Default | Type | Description |
|---|---|---|---|
| loop | true | boolean | When true, keyboard navigation will loop through the tabs. |
| Attribute | Value |
|---|---|
| data-orientation | "vertical" | "horizontal" |
| aria-orientation | "vertical" | "horizontal" |
TabsTrigger Attribute Directive
The clickable element that activates its associated content.
| Input | Default | Type | Description |
|---|---|---|---|
| value* | — | string | The value of the tab trigger. |
| disabled | false | boolean | Whether or not the tab trigger is disabled. |
| Attribute | Value |
|---|---|
| data-state | "active" | "inactive" |
| data-disabled | Shows when disabled |
| data-orientation | "vertical" | "horizontal" |
| aria-selected | true when tab is selected |
| aria-controls | ID of the controlled tab panel |
TabsContent Attribute Directive
The content panel that displays when its associated trigger is selected.
| Input | Default | Type | Description |
|---|---|---|---|
| value* | — | string | The value of the tab content, must match a tab trigger value. |
| Attribute | Value |
|---|---|
| data-state | "active" | "inactive" |
| data-orientation | "vertical" | "horizontal" |
| role | tabpanel |
| aria-labelledby | ID of the associated tab trigger |
State
TabsStateService allows to access the tabs properties.
Access directive API with exportAS
We can access the state of the tabs using a template variable. All the directives expose themself with the same name. We have access to the directive's attributes and also the state service.
Example
We could use it with any other directive. For example with #tabs="vacTabsRoot" and access the state.
State API - TabsStateService
Documentation for the tabs state service API.
Variables
| Name | Default | Type |
|---|---|---|
| value | null | Signal<string | null> |
| automatic | true | Signal<boolean> |
| orientation | horizontal | Signal<Orientation> |
| selectedTab | null | Computed<Tab | null> |
Methods
| Method | Return | Arguments |
|---|---|---|
| registerTab | void | (id: string, elementRef: ElementRef, disabled: boolean) |
| unregisterTab | void | (tabId: string) |
| getTab | Tab | undefined | (id: string) |
| getAllTabs | Tab[] | () |
| setTabDisabled | void | (tabId: string, disabled: boolean) |
| getNextTab | Tab | null | (currentTabId: string) |
| getPreviousTab | Tab | null | (currentTabId: string) |
Types and interfaces
Accessibility
This Tabs set of directives is designed in accordance with the WAI-ARIA Authoring Practices Guide. For more details on accessibility features and guidelines, please refer to the WAI-ARIA Tabs Practices. This ensures our component meets modern accessibility standards, providing an inclusive user experience.
Keyboard Navigation
| Key | Description |
|---|---|
| Home | Navigates to the first non-disabled tab. |
| End | Navigates to the last non-disabled tab. |
| ArrowUp | Navigates to the previous non-disabled tab when orientation is "vertical" |
| ArrowDown | Navigates to the next non-disabled tab when orientation is "vertical" |
| ArrowLeft | Navigates to the previous non-disabled tab when orientation is "horizontal" |
| ArrowRight | Navigates to the next non-disabled tab when orientation is "horizontal" |