DaffTabsComponent

Tabs provide a way to navigate between panels that display related content.

Selector: 'daff-tabs'

Properties

Name	Type	Description
selectedTab	string	The currently selected tab. This property is dynamically updated when a user selects a tab.
@Input() initiallySelected	string	The tab that is initially selected on initial load. If it's not used, the first tab in the tablist will be selected by default.
@Input() ariaLabel	''	aria-label for the tab.
@Input() linkMode	false	Replace the tab buttons with links.
@Input() url	string	The URL to navigate to when the component is in link mode. This component will set the specified query param.
@Input() queryParam	'tab'	The query parameter that the tabs component will use to set the tab value in link mode.	@Output() tabChange	EventEmitter<string>	Event emitted when tab selection changes.	currentPath	string
select		Selects a tab and sets focus on the selected tab.
previous		Selects the previous tab and wraps around to the last tab if the first tab is currently selected.
next		Selects the next tab and wraps around to the first tab if the last tab is currently selected.
selectFirst		Selects the first tab.
selectLast		Selects the last tab.

Examples

Basic use of the tabs component

<daff-tabs aria-label="List of tabs">
    <daff-tab>
        <daff-tab-label>
            <fa-icon [icon]="faInfoCircle" daffPrefix></fa-icon>
            Tab 1
        </daff-tab-label>
        <daff-tab-panel>
            Tab 1 Panel
        </daff-tab-panel>
    </daff-tab>
    <daff-tab>
        <daff-tab-label>
            Tab 2
            <fa-icon [icon]="faInfoCircle" daffSuffix></fa-icon>
        </daff-tab-label>
        <daff-tab-panel>
            Tab 2 Panel
        </daff-tab-panel>
    </daff-tab>
</daff-tabs>