### File

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

### Description

ECL Tabs component for displaying tabbed content and managing tab selection and navigation.

Note: The old selector `ecl-tabs` is deprecated and will be removed in v20. Use `div[eclTabs]` instead.

### Extends

`ECLBaseDirective`

### Implements

`OnInit` `OnDestroy`

### Metadata

encapsulation | `ViewEncapsulation.None`
selector | `div[eclTabs], ecl-tabs`
imports | `TranslateModule` `NgTemplateOutlet` `EUI_ECL_BUTTON` `EUI_ECL_ICON` `EclTabComponent` `EclTabLabelComponent`
templateUrl | `./ecl-tabs.component.html`

### Index

###### Properties
btnNext btnPrev dropdownList dropdownTabs hasClass index isDropdownExpanded isMobileBreakpoint isMoreButtonShow isScrollNextBtnShow isScrollPrevBtnShow listTabs moreButton styleTransform tabs tabsList
###### Methods
getHiddenTabsCount getTabLabel getTabsWidth getTabsWidthStyle getTransitionDuration onClick onDropdownToggle onScrollNext onScrollPrev onTabBlur onTabKeydown onTabKeydownArrowLeft onTabKeydownArrowRight onTabKeydownEnd onTabKeydownHome onTabSelect getCssClasses
###### Inputs
bodyClass class e2eAttr tabindex
###### Outputs
tabSelect
###### HostBindings
class.ecl-tabs
###### HostListeners
document:click
###### Accessors
isUsingOldSelector isMoreButtonActive

### Constructor

`constructor(differs: IterableDiffers, cdkBreakpointObserver: BreakpointObserver, cd: ChangeDetectorRef, el: ElementRef, eclRtlService: EclRtlService, platformId: object)`
Parameters :
Name | Type | Optional
differs | `IterableDiffers` | No
cdkBreakpointObserver | `BreakpointObserver` | No
cd | `ChangeDetectorRef` | No
el | `ElementRef` | No
eclRtlService | `EclRtlService` | No
platformId | `object` | No

### Inputs

bodyClass
Type : `string`
Default value : `'ecl-u-mt-s'`
Class applied to the tab body container.

class
Type : `string`

e2eAttr
Type : `any`

tabindex
Type : `number`

### Outputs

tabSelect
Type : `EventEmitter`
Emits an event when a tab is selected.

### HostBindings

class.ecl-tabs
Type : `boolean`
Default value : `!this.isUsingOldSelector`
Adds `ecl-tabs` class to the host if not using the deprecated selector.

### HostListeners

document:click
Arguments : `'$event.target'`
`document:click(target)`

### Methods

getHiddenTabsCount
`getHiddenTabsCount()`
Returns the number of tabs hidden in dropdown. Returns : `number`

getTabLabel
`getTabLabel(index: number)`
Returns the label of the tab at the specified index. Parameters :
Name | Type | Optional
index | `number` | No
Returns : `string`

getTabsWidth
`getTabsWidth()`
Calculates total width of all tabs. Returns : `number`

getTabsWidthStyle
`getTabsWidthStyle()`
Returns the style value for tab list width. Returns : `string`

getTransitionDuration
`getTransitionDuration()`
Returns the duration of the transition animation. Returns : `string`

onClick
`onClick(target)`
Decorators : `@HostListener('document:click', ['$event.target'])`
Parameters :
Name | Optional
target | No
Returns : `void`

onDropdownToggle
`onDropdownToggle()`
Toggles the dropdown visibility. Returns : `void`

onScrollNext
`onScrollNext()`
Scrolls the tab list to the right. Returns : `void`

onScrollPrev
`onScrollPrev()`
Scrolls the tab list to the left. Returns : `void`

onTabBlur
- this method is deprecated and will be removed in v21. Not used anymore. Handles blur event when navigating tabs via keyboard.
`onTabBlur(evt: KeyboardEvent)`
Handles blur event when navigating tabs via keyboard. Parameters :
Name | Type | Optional
evt | `KeyboardEvent` | No
Returns : `void`

onTabKeydown
`onTabKeydown(event: Event, tab: EclTabComponent)`
Handles all supported keyboard events for a tab. Parameters :
Name | Type | Optional | Description
event | `Event` | No | KeyboardEvent triggered.
tab | `EclTabComponent` | No | Target tab.
Returns : `void`

onTabKeydownArrowLeft
`onTabKeydownArrowLeft(index: number)`
Handles left arrow key navigation. Parameters :
Name | Type | Optional | Description
index | `number` | No | Current tab index.
Returns : `void`

onTabKeydownArrowRight
`onTabKeydownArrowRight(index: number)`
Handles right arrow key navigation. Parameters :
Name | Type | Optional | Description
index | `number` | No | Current tab index.
Returns : `void`

onTabKeydownEnd
`onTabKeydownEnd()`
Focuses the last tab in the list. Returns : `void`

onTabKeydownHome
`onTabKeydownHome()`
Focuses the first tab in the list. Returns : `void`

onTabSelect
`onTabSelect(tab: EclTabComponent)`
Handles tab selection. Parameters :
Name | Type | Optional | Description
tab | `EclTabComponent` | No | Tab to activate.
Returns : `void`

getCssClasses
`getCssClasses(rootClass: string)`
Parameters :
Name | Type | Optional
rootClass | `string` | No
Returns : `string`

### Properties

btnNext
Type : `EclButtonComponent`
Decorators : `@ViewChild('btnNext')`
Reference to the scroll next button.

btnPrev
Type : `EclButtonComponent`
Decorators : `@ViewChild('btnPrev')`
Reference to the scroll previous button.

dropdownList
Type : `ElementRef`
Decorators : `@ViewChild('dropdownList')`
Reference to the dropdown list containing overflowed tabs.

dropdownTabs
Type : `Array<EclTabComponent>`
Default value : `[]`
Tabs displayed in the dropdown.

hasClass
Default value : `!this.isUsingOldSelector`
Decorators : `@HostBinding('class.ecl-tabs')`
Adds `ecl-tabs` class to the host if not using the deprecated selector.

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

isDropdownExpanded
Default value : `false`
Indicates whether the dropdown is expanded.

isMobileBreakpoint
Default value : `false`
Indicates whether the mobile breakpoint is active.

isMoreButtonShow
Default value : `true`
Indicates whether the "more" button is shown.

isScrollNextBtnShow
Default value : `false`
Indicates whether the scroll next button is shown.

isScrollPrevBtnShow
Default value : `false`
Indicates whether the scroll previous button is shown.

listTabs
Type : `Array<EclTabComponent>`
Default value : `[]`
Tabs displayed in the visible list.

moreButton
Type : `EclButtonComponent`
Decorators : `@ViewChild('moreButton')`
Reference to the "more" button.

styleTransform
Type : `string`
Default value : `'translate3d(0px, 0px, 0px)'`
CSS transform applied to the scrollable tab list.

tabs
Type : `QueryList<EclTabComponent>`
Decorators : `@ContentChildren(undefined)`
All projected tabs inside the component.

tabsList
Type : `ElementRef`
Decorators : `@ViewChild('tabsList')`
Reference to the visible tab list container.

### Accessors

isUsingOldSelector
get `isUsingOldSelector()`
Whether the deprecated selector is being used. Returns : `boolean`

isMoreButtonActive
get `isMoreButtonActive()`
Whether any visible tab is active. Returns : `boolean`

# results matching ""

# No results matching ""