DaffTabComponent

DaffTabComponet is an element in the tab list that is used as a content container 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.

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

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

Selector: 'daff-tab'

Properties

Name Type Description

@Input() disabled

false

Name	Type	Description
@Input() disabled	false	Whether the tab is disabled.
@Input() id	'daff-tab-' + tabId	A unique id for the tab component. The `id` is automatically generated by linking the prefix 'daff-tab-' with an incrementing `tabId`. This value can be customized by passing a different `id` value via the component's `id` input.

Whether the tab is disabled.

@Input() id

'daff-tab-' + tabId

A unique id for the tab component.

The id is automatically generated by linking the prefix 'daff-tab-' with an incrementing tabId. This value can be customized by passing a different id value via the component's id input.

Examples

Basic structure of 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>