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.
<docs-anatomy [node]="componentStructure" />
Input props
TabsRoot Attribute Directive
The root directive that contains the tabs list and content. Handles the state and bindings.
<docs-table [columns]="columnsInput" [rows]="rootInputRows" />
| 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.
<docs-table [columns]="columnsInput" [rows]="triggerInputRows" />
| 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.
<docs-table [columns]="columnsInput" [rows]="contentInputRows" />
| 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.
<docs-code [code]="templateVariableExample" language="html" />
State API - TabsStateService
Documentation for the tabs state service API.
Variables
<docs-table [columns]="stateVarsColumns" [rows]="stateRows" />
Methods
<docs-table [columns]="stateMethodsColumns" [rows]="stateMethodRows" />
Types and interfaces
<docs-code [code]="typesAndInterfaces" language="ts" />
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
<docs-table [columns]="keyboardColumns" [rows]="keyboardRows" />