packages/ecl/components/ecl-tabs/ecl-tabs.component.ts
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.
OnInit
OnDestroy
| encapsulation | ViewEncapsulation.None |
| selector | div[eclTabs], ecl-tabs |
| imports |
TranslateModule
NgTemplateOutlet
EUI_ECL_BUTTON
EUI_ECL_ICON
EclTabComponent
EclTabLabelComponent
|
| templateUrl | ./ecl-tabs.component.html |
Properties |
Methods |
Inputs |
Outputs |
HostBindings |
HostListeners |
Accessors |
constructor(differs: IterableDiffers, cdkBreakpointObserver: BreakpointObserver, cd: ChangeDetectorRef, el: ElementRef, eclRtlService: EclRtlService, platformId: object)
|
|||||||||||||||||||||
|
Parameters :
|
| 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
|
| tabSelect |
Type : EventEmitter
|
|
Emits an event when a tab is selected. |
| class.ecl-tabs |
Type : boolean
|
Default value : !this.isUsingOldSelector
|
|
Adds |
| document:click |
Arguments : '$event.target'
|
document:click(target)
|
| 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 :
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 :
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 :
Returns :
void
|
| onTabKeydown | ||||||||||||
onTabKeydown(event: Event, tab: EclTabComponent)
|
||||||||||||
|
Handles all supported keyboard events for a tab.
Parameters :
Returns :
void
|
| onTabKeydownArrowLeft | ||||||||
onTabKeydownArrowLeft(index: number)
|
||||||||
|
Handles left arrow key navigation.
Parameters :
Returns :
void
|
| onTabKeydownArrowRight | ||||||||
onTabKeydownArrowRight(index: number)
|
||||||||
|
Handles right arrow key navigation.
Parameters :
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 :
Returns :
void
|
| getCssClasses | ||||||
getCssClasses(rootClass: string)
|
||||||
|
Parameters :
Returns :
string
|
| 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 |
| 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. |
| isUsingOldSelector |
getisUsingOldSelector()
|
|
Whether the deprecated selector is being used.
Returns :
boolean
|
| isMoreButtonActive |
getisMoreButtonActive()
|
|
Whether any visible tab is active.
Returns :
boolean
|