packages/ecl/components/ecl-tabs/ecl-tab.component.ts
Represents a single tab inside the ECL Tabs component. Manages its label, state (active, hidden), and interaction events like click or keydown.
| host | { |
| selector | div[eclTab] |
| imports |
EUI_ECL_LINK
|
| templateUrl | ./ecl-tab.component.html |
Properties |
Methods |
Inputs |
Outputs |
HostBindings |
Accessors |
constructor()
|
| anchorExtraClasses |
Type : string
|
|
Extra classes to be added to the anchor tag. |
| isHidden |
Type : boolean
|
Default value : false
|
|
Hides the tab when true by applying the |
| id |
Type : string
|
|
Unique identifier for the tab. |
| isActive |
Default value : false, { transform: booleanAttribute }
|
|
Marks the tab as active. |
| class |
Type : string
|
| e2eAttr |
Type : any
|
| tabindex |
Type : number
|
| keydownTab |
Type : EventEmitter
|
|
Emits when a keydown event occurs on the tab. |
| selectTab |
Type : EventEmitter
|
|
Emits when the tab is selected via click. |
| class |
Type : string
|
|
Returns the CSS classes applied to the host element. |
| 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
Parameters :
Returns :
void
|
| onTabClick |
onTabClick()
|
|
Handles a click event on the tab and emits the
Returns :
void
|
| getCssClasses | ||||||
getCssClasses(rootClass: string)
|
||||||
|
Parameters :
Returns :
string
|
| _isActive |
Type : unknown
|
Default value : signal(false)
|
| 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 : computed(() => this._isActive() ? 0 : -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. |
| hostElement |
gethostElement()
|
|
Returns the host HTML element of the tab component.
Returns :
HTMLElement
|
| isUsingOldSelector |
getisUsingOldSelector()
|
|
Determines if the deprecated selector
Returns :
boolean
|
| cssClasses |
getcssClasses()
|
|
Returns the CSS classes applied to the host element.
Returns :
string
|