File

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

Description

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.

Implements

OnDestroy AfterViewInit OnChanges OnInit

Metadata

Index

Properties
Methods
Inputs
Outputs
HostBindings
Accessors

Inputs

activeTabIndex
Type : any
Default value : null

Index of the active tab

e2eAttr
Type : string
Default value : 'eui-tabs'

Sets the data-e2e attribute for the host element.

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

Outputs

tabClose
Type : EventEmitter

Event emitted when a tab is closed.

tabSelect
Type : EventEmitter

Event emitted when a tab is selected.

HostBindings

class
Type : string

Methods

Public changeTab
changeTab(index: number)

Click handler for tab item

Parameters :
Name Type Optional Description
index number No

Index of the tab clicked

Returns : void
Public close
close(index: number)

Close a tab pass in parameter.

Parameters :
Name Type Optional Description
index number No

Index of the tab to close

Returns : void
Public closeTab
closeTab(index: number, e: any)

Closes the tab specified by index parameter

Parameters :
Name Type Optional Description
index number No

Index of the tab to close

e any No

Event of the click

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 keyup event for a tab element at the specified index.

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 :
Name Type Optional Description
e KeyboardEvent No

The keyboard event triggered by the keyup action.

index number No

The index of the tab associated with the key event.

Returns : void

Properties

_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

Accessors

elementClass
getelementClass()

Computes and returns the CSS classes for the component based on its current state.

Returns : string

results matching ""

    No results matching ""