DaffTabsComponent

class

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

Tabs provide a way to navigate between panels that display related content without leaving the page.

@Component()
class DaffTabsComponent implements AfterContentInit, OnInit {
  @Input() initiallySelected: string = null
  @Input() ariaLabel: string = ''
  @Input() linkMode: boolean = false
  @Input() url: string
  @Input() queryParam: string = 'tab'

  @Output() tabChange: EventEmitter<string> = new EventEmitter<string>()
}

Inputs

initiallySelected

string

Default	`null`
Description	The tab that is selected on initial load. If it's not used, the first tab in the tablist will be selected by default.

ariaLabel

string

Default	`''`
Description	`aria-label` to label the tablist.

linkMode

boolean

Default	`false`
Description	Replace the tab buttons as links.

url

string

Default	–
Description	The URL to navigate to when the component is in link mode. This component will set the specified query param.

queryParam

string

Default	`'tab'`
Description	The query parameter that the tabs component will use to set the tab value in link mode.

Outputs

tabChange

EventEmitter<string>

Default	–
Description	Event emitted when tab selection changes.

Examples

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

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