Info

File

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

Description

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

Extends

ECLBaseDirective

Implements

OnInit OnDestroy

Metadata

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

Index

Constructor

constructor()

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: unknown)

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: unknown)

Decorators :

@HostListener('document:click', ['$event.target'])

Parameters :

Name	Type	Optional
target	`unknown`	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

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

Type : unknown

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

Type : unknown

Default value : false

Indicates whether the dropdown is expanded.

isMobileBreakpoint

Type : unknown

Default value : false

Indicates whether the mobile breakpoint is active.

isMoreButtonShow

Type : unknown

Default value : true

Indicates whether the "more" button is shown.

isScrollNextBtnShow

Type : unknown

Default value : false

Indicates whether the scroll next button is shown.

isScrollPrevBtnShow

Type : unknown

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

getisUsingOldSelector()

Whether the deprecated selector is being used.

Returns : boolean

isMoreButtonActive

getisMoreButtonActive()

Whether any visible tab is active.

Returns : boolean

File

Description

Extends

Implements

Metadata

Index

Properties

Methods

Inputs

Outputs

HostBindings

HostListeners

Accessors

Constructor

Inputs

Outputs

HostBindings

HostListeners

Methods

Properties

Accessors

results matching ""

No results matching ""