Tabs

Overview

Tabs allow for users to navigate between related content without having to leave the page. They can be used within components like modals or cards.

Usage

Within a standalone component

To use a tabs in a standalone component, import DAFF_TABS_COMPONENTS directly into your custom component:

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

@Component({
  selector: 'custom-component',
  templateUrl: './custom-component.component.html',
  imports: [
    DAFF_TABS_COMPONENTS,
  ],
})
export class CustomComponent {}

Properties

Link Mode

Tabs in link mode replaces the tab buttons with anchors. This allows the selected tab to be connected to a URL. By default, the current URL and tab query param will be used. These can be overriden with the url and queryParam inputs respectively.

<daff-tabs [linkMode]="true">
</daff-tabs>

Accessbility

Tabs follow the ARIA Tabs design pattern. Tabs compose of tablist, tab, and tabpanel elements, each with its appropriate role and integrated keyboard interactions.

Label

A meaningful aria-label should be set on <daff-tabs> by using the aria-label property. This will set the aria-label on the tablist element.

<daff-tabs aria-label="Custom aria label">
</daff-tabs>

Keyboard Interactions