packages/eui/packages/components/eui-tabs/eui-tabs.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.
OnDestroy
AfterViewInit
OnChanges
OnInit
encapsulation | ViewEncapsulation.None |
selector | eui-tabs |
imports |
PortalModule
EuiTooltipDirective
EUI_ICON
EUI_BUTTON
EUI_ICON_BUTTON
|
styleUrls | ./styles/_index.scss |
templateUrl | ./eui-tabs.component.html |
Properties |
Methods |
Inputs |
Outputs |
HostBindings |
Accessors |
activeTabIndex |
Type : any
|
Default value : null
|
Index of the active tab |
e2eAttr |
Type : string
|
Default value : 'eui-tabs'
|
Sets the |
isHandleChangeTab |
Type : boolean
|
Default value : false
|
isMainNavigation |
Type : boolean
|
Default value : false
|
isSubTabs |
Type : boolean
|
Default value : false
|
isVerticalTabs |
Type : boolean
|
Default value : false
|
pathMatch |
Type : "prefix" | "full"
|
Default value : 'prefix'
|
The way the router will consider the url when used on tabs. 'prefix' | 'full'. |
tabs |
Type : EuiTabComponent[]
|
Default value : []
|
Tabs in data approach |
tabClose |
Type : EventEmitter
|
Event emitted when a tab is closed. |
tabSelect |
Type : EventEmitter
|
Event emitted when a tab is selected. |
class |
Type : string
|
Public changeTab | ||||||||
changeTab(index: number)
|
||||||||
Click handler for tab item
Parameters :
Returns :
void
|
Public close | ||||||||
close(index: number)
|
||||||||
Close a tab pass in parameter.
Parameters :
Returns :
void
|
Public closeTab | ||||||||||||
closeTab(index: number, e: any)
|
||||||||||||
Closes the tab specified by
Parameters :
Returns :
void
|
Public goToLeft |
goToLeft()
|
Scroll to left handler
Returns :
void
|
Public goToRight |
goToRight()
|
Scroll to right handler
Returns :
void
|
Public onContentChanges |
onContentChanges()
|
Listens to the content to be changed to recalculate the scrolling position and status.
Returns :
void
|
Public onKeyUp | ||||||||||||
onKeyUp(e: KeyboardEvent, index: number)
|
||||||||||||
Handles the When the user presses the "Enter" or "Space" key, this method checks if the tab at the given index is enabled (not disabled). If so, it activates that tab and deactivates all others.
Parameters :
Returns :
void
|
_tabs |
Type : QueryList<EuiTabComponent>
|
Decorators :
@ContentChildren(undefined, {descendants: false})
|
Public currentOffset |
Type : number
|
Default value : 0
|
euiTabLabelItems |
Type : QueryList<ViewContainerRef>
|
Decorators :
@ViewChildren('euiTabLabelItem', {read: ViewContainerRef})
|
euiTabsItems |
Type : ElementRef
|
Decorators :
@ViewChild('euiTabsItems')
|
euiTabsItemsWrapper |
Type : ElementRef
|
Decorators :
@ViewChild('euiTabsItemsWrapper')
|
euiTabsRightContentTagDirective |
Type : EuiTabsRightContentTagDirective
|
Decorators :
@ContentChild(undefined)
|
Public navigationLeftButtonDisabled |
Default value : true
|
Public navigationRightButtonDisabled |
Default value : false
|
Public scrolling |
Default value : false
|
elementClass |
getelementClass()
|
Computes and returns the CSS classes for the component based on its current state.
Returns :
string
|