eui documentation
  1. Components
  2. EuiTabBodyComponent

File

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

Description

Content container component for individual tab panels within eui-tabs. Manages the display of tab content using CDK Portal for efficient rendering. Provides optional padding control for custom content layouts. Automatically handles content visibility based on active tab selection. Must be used as a child of eui-tab component to define the tab's content area.

Basic Usage

Example :
<eui-tab label="Content">
  <eui-tab-body>
    <h2>Tab Content</h2>
    <p>Your content here</p>
  </eui-tab-body>
</eui-tab>

Without Padding

Example :
<eui-tab label="Full Width">
  <eui-tab-body [hasNoContentPadding]="true">
    <div class="custom-layout">
      Full-width content without default padding
    </div>
  </eui-tab-body>
</eui-tab>

With Complex Content

Example :
<eui-tab label="Dashboard">
  <eui-tab-body>
    <eui-card>
      <eui-card-header>Statistics</eui-card-header>
      <eui-card-body>
        <!-- Dashboard widgets -->
      </eui-card-body>
    </eui-card>
  </eui-tab-body>
</eui-tab>

Accessibility

  • Content has role="tabpanel" automatically applied
  • Tabindex managed automatically for keyboard navigation
  • Hidden content not rendered in DOM for performance
  • Focus management for interactive elements within panel

Notes

  • Uses CDK Portal for efficient content rendering
  • Only active tab content is displayed
  • hasNoContentPadding useful for full-width layouts
  • Supports any HTML content or Angular components
  • Automatic focus management for nested interactive elements

Implements

AfterViewInit

Metadata

selector eui-tab-body
imports AsyncPipe
templateUrl ./eui-tab-body.component.html

Index

Properties
Inputs

Inputs

hasNoContentPadding
Type : boolean
Default value : false

Removes default padding from the tab content area. Useful for full-width content, custom layouts, or when content provides its own spacing.

Properties

tabIndex$
Type : unknown
Default value : new BehaviorSubject(0)
Public templatePortal
Type : TemplatePortal
templateRef
Type : TemplateRef<HTMLElement>
Decorators :
@ViewChild('templateRef')

results matching ""

    No results matching ""