eui documentation
  1. Components
  2. EuiTabHeaderComponent

File

packages/components/eui-tabs/eui-tab-header/eui-tab-header.component.ts

Description

Custom header content component for individual tabs within eui-tabs. Allows projection of custom content into the tab header area using CDK Portal. Enables rich tab headers with icons, badges, or custom layouts beyond simple text labels. Must be used as a child of eui-tab component to provide custom header content.

Basic Usage

Example :
<eui-tab>
  <eui-tab-header>
    <eui-tab-header-label>Settings</eui-tab-header-label>
  </eui-tab-header>
  <eui-tab-body>Content</eui-tab-body>
</eui-tab>

With Icons and Badges

Example :
<eui-tab>
  <eui-tab-header>
    <eui-tab-header-left-content>
      <eui-icon-svg icon="eui-notification" size="s" />
    </eui-tab-header-left-content>
    <eui-tab-header-label>Notifications</eui-tab-header-label>
    <eui-tab-header-sub-label>Unread messages</eui-tab-header-sub-label>
    <eui-tab-header-right-content>
      <eui-badge euiDanger>5</eui-badge>
    </eui-tab-header-right-content>
  </eui-tab-header>
  <eui-tab-body>Content</eui-tab-body>
</eui-tab>

Complex Layout

Example :
<eui-tab>
  <eui-tab-header>
    <eui-tab-header-left-content>
      <eui-avatar [imageUrl]="user.avatar" euiSizeXs />
    </eui-tab-header-left-content>
    <div>
      <eui-tab-header-label>{{ user.name }}</eui-tab-header-label>
      <eui-tab-header-sub-label>{{ user.role }}</eui-tab-header-sub-label>
    </div>
  </eui-tab-header>
  <eui-tab-body>Content</eui-tab-body>
</eui-tab>

Accessibility

  • Header content contributes to tab's accessible name
  • Icons should have appropriate aria-labels
  • Badges should convey meaningful information
  • Maintain logical reading order for screen readers

Notes

  • Uses CDK Portal for efficient rendering
  • Supports structured content via sub-components
  • Left/right content areas for flexible layouts
  • Label and sub-label for hierarchical text
  • Replaces simple label attribute when used

Implements

AfterViewInit

Metadata

selector eui-tab-header
templateUrl ./eui-tab-header.component.html

Index

Properties

Properties

Public templatePortal
Type : TemplatePortal
templateRef
Type : TemplateRef<HTMLElement>
Decorators :
@ViewChild('templateRef')

results matching ""

    No results matching ""