### File

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

### Description

Represents a single tab inside the ECL Tabs component. Manages its label, state (active, hidden), and interaction events like click or keydown.

### Extends

`ECLBaseDirective`

### Implements

`AfterViewInit`

### Metadata

host | `{ }`
selector | `div[eclTab]`
imports | `EUI_ECL_LINK`
templateUrl | `./ecl-tab.component.html`

### Index

###### Properties
contentTemplate finalId hrefTabindex label link Public tabLabel
###### Methods
getTabLabel Public getWidth onBlur onFocus onKeydown onTabClick getCssClasses
###### Inputs
anchorExtraClasses isActive isHidden id class e2eAttr tabindex
###### Outputs
keydownTab selectTab
###### HostBindings
class
###### Accessors
hostElement isUsingOldSelector cssClasses

### Constructor

`constructor()`

### Inputs

anchorExtraClasses
Type : `string`
Extra classes to be added to the anchor tag.

isActive
Type : `boolean`
Default value : `false`
Marks the tab as active.

isHidden
Type : `boolean`
Default value : `false`
Hides the tab when true by applying the `ecl-tabs__item--hidden` CSS class.

id
Type : `string`
Unique identifier for the tab.

class
Type : `string`

e2eAttr
Type : `any`

tabindex
Type : `number`

### Outputs

keydownTab
Type : `EventEmitter`
Emits when a keydown event occurs on the tab.

selectTab
Type : `EventEmitter`
Emits when the tab is selected via click.

### HostBindings

class
Type : `string`
Returns the CSS classes applied to the host element.

### Methods

getTabLabel
`getTabLabel()`
Returns the inner HTML content of the tab label. Returns : `string`

Public getWidth
`getWidth()`
Returns the width of the tab element in pixels. The measurement is cached after the first call. Returns : `number`

onBlur
`onBlur()`
Calls the blur method on the inner link directive. Returns : `void`

onFocus
`onFocus()`
Calls the focus method on the inner link directive. Returns : `void`

onKeydown
`onKeydown(event: Event)`
Handles a keydown event on the tab and emits the `keydownTab` event. Parameters :
Name | Type | Optional
event | `Event` | No
Returns : `void`

onTabClick
`onTabClick()`
Handles a click event on the tab and emits the `selectTab` event. Returns : `void`

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

### Properties

contentTemplate
Type : `TemplateRef<any>`
Decorators : `@ViewChild('content')`
Reference to the tab content template.

finalId
Type : `unknown`
Default value : `computed(() => this.id() ?? this.generatedId())`

hrefTabindex
Type : `unknown`
Default value : `-1`
The tab index value for the tab's link.

label
Type : `EclTabLabelComponent`
Decorators : `@ContentChild(EclTabLabelComponent)`
Reference to the projected tab label component.

link
Type : `EclLinkDirective`
Decorators : `@ViewChild(EclLinkDirective)`
Reference to the internal link directive used in the tab.

Public tabLabel
Type : `string`
Default value : `''`
Contains the inner HTML of the tab label.

### Accessors

hostElement
get `hostElement()`
Returns the host HTML element of the tab component. Returns : `HTMLElement`

isUsingOldSelector
get `isUsingOldSelector()`
Determines if the deprecated selector `<ecl-tab>` is used. Returns : `boolean`

cssClasses
get `cssClasses()`
Returns the CSS classes applied to the host element. Returns : `string`

# results matching ""

# No results matching ""