Tabs

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

DAFF_TABS_COMPONENTS

import { DAFF_TABS_COMPONENTS } from '@daffodil/design/tabs';

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

const DAFF_TABS_COMPONENTS: readonly [typeof DaffTabsComponent, typeof DaffTabLabelComponent, typeof DaffTabPanelComponent, typeof DaffTabComponent]

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.

DaffTabPanelComponent

DaffTabPanelComponent is used to display the content panel of a tab.

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

@Component()
class DaffTabPanelComponent {}

Selector: 'daff-tab-panel'

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.

DaffTabLabelComponent

DaffTabLabelComponent is used to display the label of a tab panel. Labels may optionally contain a daffPrefix or daffSuffix to add icons or badges.

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

@Component()
class DaffTabLabelComponent implements DaffPrefixable, DaffSuffixable {}

Selector: 'daff-tab-label'