### 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
tabIndex$ Public templatePortal templateRef
###### Inputs
hasNoContentPadding

### 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 ""