### File

`packages/components/eui-tabs/eui-tabs.component.ts`

### Description

eUI Tabs component helps to organize content into separate views where only one view can be visible at a time. Each tab's label is shown in the tab header and the active tab is designated with a primary ink bar visual. The active tab may be set using the `activeTabIndex` input option or when the user selects one of the tab labels in the header. When the list of tab labels exceeds the width of the header or its container, pagination controls appear to let the user scroll left and right across the tabs.

### Basic Usage

Example :

    <eui-tabs [activeTabIndex]="0" (activeTabChange)="onTabChange($event)">
      <eui-tab label="Overview">
        <eui-tab-body>
          <p>Overview content here</p>
        </eui-tab-body>
      </eui-tab>
      <eui-tab label="Details">
        <eui-tab-body>
          <p>Details content here</p>
        </eui-tab-body>
      </eui-tab>
    </eui-tabs>

### With Custom Headers

Example :

    <eui-tabs>
      <eui-tab>
        <eui-tab-header>
          <eui-tab-header-left-content>
            <eui-icon svgName="home" />
          </eui-tab-header-left-content>
          <eui-tab-header-label>Home</eui-tab-header-label>
        </eui-tab-header>
        <eui-tab-body>Content</eui-tab-body>
      </eui-tab>
    </eui-tabs>

### Accessibility

- Use role="tablist" on container (automatically applied)
- Each tab has role="tab" and associated panel has role="tabpanel"
- Keyboard navigation: Arrow keys to switch tabs, Tab to move focus
- Provide meaningful aria-label for the tabs component

### Notes

- Only one tab content is visible at a time
- Pagination controls appear automatically when tabs overflow
- Use isMainNavigation="true" for primary navigation styling
- Use isFlat="true" for flat visual style without elevation

### Implements

`OnInit` `OnChanges` `OnDestroy` `AfterViewInit`

### Metadata

changeDetection | `ChangeDetectionStrategy.OnPush`
selector | `eui-tabs`
imports | `NgClass` `AsyncPipe` `PortalModule` `EUI_ICON` `EUI_BUTTON` `EUI_ICON_BUTTON`
templateUrl | `./eui-tabs.component.html`
styleUrl | `./eui-tabs.scss`

### Index

###### Properties
_tabs Public currentOffset euiTabListItems euiTabsHeaders euiTabsHeadersContainer euiTabsRightContent Public navigationLeftButtonDisabled Public navigationRightButtonDisabled Public scrolling Public tabs
###### Methods
Public activateTab Public closeTab Public goToLeft Public goToRight
###### Inputs
activeTabIndex ariaLabel e2eAttr isFlat isMainNavigation
###### Outputs
tabActivate tabClick tabClose
###### HostBindings
class
###### Accessors
elementClass euiTabsHeadersContainerWidth euiTabsHeadersWidth euiTabsRightContentWidth

### Inputs

activeTabIndex
Type : `number`
Default value : `0`
Index of the active tab

ariaLabel
Type : `string`
Default value : `'eUI Tabs'`
Sets the `aria-label` attribute for the host element.

e2eAttr
Type : `string`
Default value : `'eui-tabs'`

isFlat
Type : `boolean`
Default value : `false`

isMainNavigation
Type : `boolean`
Default value : `false`

### Outputs

tabActivate
Type : `EventEmitter`
Event emitted when a tab is activated

tabClick
Type : `EventEmitter`
Event emitted when a tab is clicked

tabClose
Type : `EventEmitter`
Event emitted when a tab is closed

### HostBindings

class
Type : `string`

### Methods

Public activateTab
`activateTab(index: number, isAnimated: unknown, options: object)`
Activate a tab having index passed in parameter if exists. Parameters :
Name | Type | Optional | Default value | Description
index | `number` | No |  | Index of the tab to close
isAnimated | `unknown` | No | `true` | Whether the tab activation should be animated
options | `object` | No | `{ emitEvent: true }` | Object with emitEvent property to emit the event or not
Returns : `void`

Public closeTab
`closeTab(index: number)`
Close a tab having index passed in parameter if exists. Parameters :
Name | Type | Optional | Description
index | `number` | No | Index of the tab to close
Returns : `void`

Public goToLeft
`goToLeft()`
Scroll to the left handler Returns : `void`

Public goToRight
`goToRight()`
Scroll to the rihgt handler Returns : `void`

### Properties

_tabs
Type : `QueryList<EuiTabComponent>`
Decorators : `@ContentChildren(undefined, {descendants: false})`

Public currentOffset
Type : `number`
Default value : `0`

euiTabListItems
Type : `QueryList<ElementRef>`
Decorators : `@ViewChildren('euiTabListItems')`

euiTabsHeaders
Type : `ElementRef`
Decorators : `@ViewChild('euiTabsHeaders')`

euiTabsHeadersContainer
Type : `ElementRef`
Decorators : `@ViewChild('euiTabsHeadersContainer')`

euiTabsRightContent
Type : `ElementRef`
Decorators : `@ViewChild('euiTabsRightContent')`

Public navigationLeftButtonDisabled
Type : `unknown`
Default value : `true`

Public navigationRightButtonDisabled
Type : `unknown`
Default value : `false`

Public scrolling
Type : `unknown`
Default value : `false`

Public tabs
Type : `EuiTabComponent[]`
Default value : `[]`

### Accessors

elementClass
get `elementClass()`

euiTabsHeadersContainerWidth
get `euiTabsHeadersContainerWidth()`
Width of the tabs headers container Returns : `number`

euiTabsHeadersWidth
get `euiTabsHeadersWidth()`
Width of the tabs headers Returns : `number`

euiTabsRightContentWidth
get `euiTabsRightContentWidth()`
Width of the tabs right content Returns : `number`

# results matching ""

# No results matching ""