DaffTabsComponent

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

import { DaffTabsComponent } from '@daffodil/design/tabs'

@Component()
class DaffTabsComponent implements AfterContentInit, OnInit {
  @Input() initiallySelected: string
  @Input() linkMode: false
  @Input() url: string
  @Input() queryParam: 'tab'
  @Output() tabChange: EventEmitter<string>
}

Selector: 'daff-tabs'

Properties

Name	Type	Description
@Input() initiallySelected	string	The tab that is selected on initial load. If it's not used, the first tab in the tablist will be selected by default.
@Input() linkMode	false	Replace the tab buttons as 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.

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>