### File

`packages/components/eui-tabs-v2/eui-tabs-v2.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.

### Implements

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

### Metadata

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

### Index

###### Properties

- _tabs
- Public currentOffset
- euiTabListItems
- euiTabsHeaders
- euiTabsHeadersContainer
- Public navigationLeftButtonDisabled
- Public navigationRightButtonDisabled
- Public scrolling
- Public tabs

###### Methods

- Public activateTab
- Public closeTab
- Public goToLeft
- Public goToRight

###### Inputs

- activeTabIndex
- ariaLabel
- e2eAttr
- isMainNavigation

###### Outputs

- tabActivate
- tabClick
- tabClose

###### HostBindings

- class

###### Accessors

- elementClass
- euiTabsHeadersContainerWidth
- euiTabsHeadersWidth

### 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-v2'`

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, 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 |  | 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<EuiTabV2Component>`
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')`

Public navigationLeftButtonDisabled
Default value : `true`

Public navigationRightButtonDisabled
Default value : `false`

Public scrolling
Default value : `false`

Public tabs
Type : `EuiTabV2Component[]`
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`

# results matching ""

# No results matching ""