DaffTabComponent

class

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

Tab is a single tab in the tablist that is used to group the label of a tab panel and the tab panel together.

A <daff-tab> should include the DaffTabLabelComponent and DaffTabPanelComponent components in order to properly structure the UI.

@Component()
class DaffTabComponent {
  @Input() disabled: boolean = false
  @Input() id: string = 'daff-tab-' + tabId
}

Inputs

disabled

boolean

Default	`false`
Description	Whether the tab is disabled.

string

Default	`'daff-tab-' + tabId`
Description	A unique id for the tab component. Defaults to an autogenerated value. When using this, it's your responsibility to ensure that the id for each tab is unique.

Examples

<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>
        <fa-icon [icon]="faInfoCircle" daffPrefix></fa-icon>
        Tab 1
    </daff-tab-label>
    <daff-tab-panel>
        Tab 1 Panel
    </daff-tab-panel>
</daff-tab>