Tabs

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

Components

DaffTabsComponent

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 {
  initiallySelected: InputSignal<string> = null
  ariaLabel: InputSignal<string> = '', { alias: 'aria-label' }
  linkMode: InputSignal<boolean> = false
  url: InputSignal<string>
  queryParam: InputSignal<string> = 'tab'

  tabChange: OutputEmitterRef<string> = output<string>()
}

Inputs

initiallySelected

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

InputSignal<string>

Default	`'', { alias: 'aria-label' }`
Description	`aria-label` to label the tablist.

linkMode

InputSignal<boolean>

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

url

InputSignal<string>

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

queryParam

InputSignal<string>

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

Outputs

tabChange

OutputEmitterRef<string>

Default	–
Description	Event emitted when tab selection changes.

DaffTabPanelComponent

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

Tab panel is the content area displayed when a tab is active.

@Component()
class DaffTabPanelComponent {}

DaffTabComponent

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 implements DaffDisableable {
  id: InputSignal<string> = 'daff-tab-' + tabId
}

Inputs

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

DaffTabLabelComponent

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

Tab label is the clicakble label that activates its corresponding tab panel. Labels can contain text, icons, or both.

@Component()
class DaffTabLabelComponent {}