packages/eui/packages/components/eui-tabs-v2/eui-tabs-v2.component.ts
eUI Tabs component helps to organize content into separate views where only one view can be visible at a time.
Each tab's label is shown in the tab header and the active tab is designated with a primary ink bar visual.
The active tab may be set using the activeTabIndex
input option or when the user selects one of the tab labels in the header.
When the list of tab labels exceeds the width of the header or its container, pagination controls appear to let the user scroll left and right across the tabs.
OnInit
OnChanges
OnDestroy
AfterViewInit
changeDetection | ChangeDetectionStrategy.OnPush |
selector | eui-tabs-v2 |
imports |
NgClass
AsyncPipe
PortalModule
EUI_ICON
EUI_BUTTON
EUI_ICON_BUTTON
|
templateUrl | ./eui-tabs-v2.component.html |
styleUrl | ./eui-tabs-v2.scss |
Properties |
|
Methods |
|
Inputs |
Outputs |
HostBindings |
Accessors |
activeTabIndex |
Type : number
|
Default value : 0
|
Index of the active tab |
ariaLabel |
Type : string
|
Default value : 'eUI Tabs'
|
Sets the |
e2eAttr |
Type : string
|
Default value : 'eui-tabs-v2'
|
isMainNavigation |
Type : boolean
|
Default value : false
|
tabActivate |
Type : EventEmitter
|
Event emitted when a tab is activated |
tabClick |
Type : EventEmitter
|
Event emitted when a tab is clicked |
tabClose |
Type : EventEmitter
|
Event emitted when a tab is closed |
class |
Type : string
|
Public activateTab | ||||||||||||||||||||
activateTab(index: number, isAnimated, options: object)
|
||||||||||||||||||||
Activate a tab having index passed in parameter if exists.
Parameters :
Returns :
void
|
Public closeTab | ||||||||
closeTab(index: number)
|
||||||||
Close a tab having index passed in parameter if exists.
Parameters :
Returns :
void
|
Public goToLeft |
goToLeft()
|
Scroll to the left handler
Returns :
void
|
Public goToRight |
goToRight()
|
Scroll to the rihgt handler
Returns :
void
|
_tabs |
Type : QueryList<EuiTabV2Component>
|
Decorators :
@ContentChildren(undefined, {descendants: false})
|
Public currentOffset |
Type : number
|
Default value : 0
|
euiTabListItems |
Type : QueryList<ElementRef>
|
Decorators :
@ViewChildren('euiTabListItems')
|
euiTabsHeaders |
Type : ElementRef
|
Decorators :
@ViewChild('euiTabsHeaders')
|
euiTabsHeadersContainer |
Type : ElementRef
|
Decorators :
@ViewChild('euiTabsHeadersContainer')
|
Public navigationLeftButtonDisabled |
Default value : true
|
Public navigationRightButtonDisabled |
Default value : false
|
Public scrolling |
Default value : false
|
Public tabs |
Type : EuiTabV2Component[]
|
Default value : []
|
elementClass |
getelementClass()
|
euiTabsHeadersContainerWidth |
geteuiTabsHeadersContainerWidth()
|
Width of the tabs headers container
Returns :
number
|
euiTabsHeadersWidth |
geteuiTabsHeadersWidth()
|
Width of the tabs headers
Returns :
number
|