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

### Implements

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

### Metadata

encapsulation | `ViewEncapsulation.None`
selector | `eui-tabs`
imports | `PortalModule` `ObserversModule` `EuiTooltipDirective` `EUI_ICON` `EUI_BUTTON` `EUI_ICON_BUTTON`
styleUrls | `./styles/_index.scss`
templateUrl | `./eui-tabs.component.html`

### Index

###### Properties

- _tabs
- Public currentOffset
- euiTabLabelItems
- euiTabsItems
- euiTabsItemsWrapper
- euiTabsRightContentTagDirective
- Public navigationLeftButtonDisabled
- Public navigationRightButtonDisabled
- Public scrolling

###### Methods

- Public changeTab
- Public close
- Public closeTab
- Public goToLeft
- Public goToRight
- Public onContentChanges
- Public onKeyUp

###### Inputs

- activeTabIndex
- e2eAttr
- isHandleChangeTab
- isMainNavigation
- isSubTabs
- isVerticalTabs
- pathMatch
- tabs

###### Outputs

- tabClose
- tabSelect

###### HostBindings

- class

###### Accessors

- elementClass

### Inputs

activeTabIndex
Type : `any`
Default value : `null`
Index of the active tab

e2eAttr
Type : `string`
Default value : `'eui-tabs'`
Sets the `data-e2e` attribute for the host element.

isHandleChangeTab
Type : `boolean`
Default value : `false`

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

isSubTabs
Type : `boolean`
Default value : `false`

isVerticalTabs
Type : `boolean`
Default value : `false`

pathMatch
Type : `"prefix" | "full"`
Default value : `'prefix'`
The way the router will consider the url when used on tabs. 'prefix' | 'full'.

tabs
Type : `EuiTabComponent[]`
Default value : `[]`
Tabs in data approach

### Outputs

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

tabSelect
Type : `EventEmitter`
Event emitted when a tab is selected.

### HostBindings

class
Type : `string`

### Methods

Public changeTab
`changeTab(index: number)`

Click handler for tab item

Parameters :

Name | Type | Optional | Description
index | `number` | No | Index of the tab clicked

Returns : `void`

Public close
`close(index: number)`

Close a tab pass in parameter.

Parameters :

Name | Type | Optional | Description
index | `number` | No | Index of the tab to close

Returns : `void`

Public closeTab
`closeTab(index: number, e: any)`

Closes the tab specified by `index` parameter

Parameters :

Name | Type | Optional | Description
index | `number` | No | Index of the tab to close
e | `any` | No | Event of the click

Returns : `void`

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

Public goToRight
`goToRight()`
Scroll to right handler Returns : `void`

Public onContentChanges
`onContentChanges()`
Listens to the content to be changed to recalculate the scrolling position and status. Returns : `void`

Public onKeyUp
`onKeyUp(e: KeyboardEvent, index: number)`

Handles the `keyup` event for a tab element at the specified index.

When the user presses the "Enter" or "Space" key, this method checks if the tab at the given index is enabled (not disabled). If so, it activates that tab and deactivates all others.

Parameters :

Name | Type | Optional | Description
e | `KeyboardEvent` | No | The keyboard event triggered by the keyup action.
index | `number` | No | The index of the tab associated with the key event.

Returns : `void`

### Properties

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

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

euiTabLabelItems
Type : `QueryList<ViewContainerRef>`
Decorators : `@ViewChildren('euiTabLabelItem', {read: ViewContainerRef})`

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

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

euiTabsRightContentTagDirective
Type : `EuiTabsRightContentTagDirective`
Decorators : `@ContentChild(undefined)`

Public navigationLeftButtonDisabled
Default value : `true`

Public navigationRightButtonDisabled
Default value : `false`

Public scrolling
Default value : `false`

### Accessors

elementClass
get `elementClass()`
Computes and returns the CSS classes for the component based on its current state. Returns : `string`

# results matching ""

# No results matching ""