DaffTabsComponent

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

Usage

<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>

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.	@Output() tabChange	EventEmitter<string>	Event emitted when tab selection changes.	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.