SiTabComponent documentation¶

selector

si-tab

Input Properties¶

Name	Type	Default	Description
badgeColor ¶	`string`		Background color of the badge. If no color is provided a red dot badge will be rendered.
badgeContent ¶	(`boolean` \| `TranslatableString`)		Additional badge content. A value of - `true` will render a red dot - any string without a `badgeColor` will render a red dot with text - any string with a `badgeColor` will render a normal badge
closable ¶	`boolean`	`false`	Close the current tab.
disabled ¶	`boolean`	`false`	Disables the tab.
heading ¶	`TranslatableString`		Title of the tab item.
icon ¶	`string`		Icon of the tab item.
iconAltText ¶	`TranslatableString`		Alternative name or translation key for icon. Used for A11y.

Output Properties¶

Name	Type	Description
(readonly) closeTriggered ¶	`EventEmitter`<`SiTabComponent`>	Event emitter to notify when a tab is closed.

Types Documentation¶

TranslatableString (`string` & `Translatable`)¶ Type alias Represents a translatable string. This can either be a translation key, e.g. `ACTIONS.EDIT` that will be automatically translated when displayed on the UI or a pre-translated string, e.g. `Edit` . Equivalent to a normal string in usage and functionality.

Translatable ¶ import imported from @siemens/element-translate-ng

SiTabDeselectionEvent

¶

Interface

Properties
To be called to prevent switching the tab cancel: () => `void`¶
The index of target tab tabIndex: `number`¶
The target tab target: `SiTabComponent`¶

SiTabsetComponent

implements AfterViewInit, OnDestroy¶

Class

▶

Constructor
() => `{}`¶

Properties
changeDetectorRef: `ChangeDetectorRef` = ...¶
Event emitter to notify when a tab became inactive. deselect: `EventEmitter`<`SiTabDeselectionEvent`> = ...¶
endArrowDisabled: `boolean` = `false`¶
focusedTabIndex?: `number`¶
icons: `Record`<(`"elementCancel"` \| `"elementLeft3"` \| `"elementRight3"`), `string`> = ...¶
initialized: `boolean` = `false`¶
initTabIndex: `number` = `0`¶
innerTabContainer: `Signal`<`ElementRef`<`HTMLDivElement`>> = ...¶
Component variable to indicate if scrolling is necessary or the container is big enough to display all tabs. scrollable: `boolean` = `false`¶
If selectDefaultTab is passed as 'false', this implies no default tab selection i.e. on initial load of tabset component no tab gets selected. selectDefaultTab: `boolean` = `true`¶
Event emitter to notify about selected tab index changes. You can either use bi-directional binding with [(selectedTabIndex)] or separate both with [selectedTabIndex]=... and (selectedTabIndexChange)=... selectedTabIndexChange: `EventEmitter`<`number`> = ...¶
subscription?: `Subscription`¶
Define an optional max-width in px for the tab buttons. The minimum value is `100` . tabButtonMaxWidth?: `number`¶
tabContainer: `Signal`<`ElementRef`<`any`>> = ...¶
Contains the current tab components. tabPanels: `QueryList`<`SiTabComponent`>¶
tabs: `Signal`<readonly `ElementRef`<`HTMLButtonElement`>[]> = ...¶
xPos: `number` = `0`¶

Accessors
Returns the currently selected tab index. get selectedTabIndex: `number`¶
Sets a selected tab index. This will activate the tab of the provided index, activates the tab and fires a notification about the change. If index is passed as -1 i.e. `selectedTabIndex = -1` , this implies to clear all tab selection. set selectedTabIndex: (tabIndex: `number`)¶

Methods

blur: () => void¶

closeTab

(event: MouseEvent, tab: SiTabComponent) => void¶

Parameters
event: `MouseEvent`¶
tab: `SiTabComponent`¶

focus

(index: number) => void¶

Parameters
index: `number`¶

focusNext: () => void¶

focusPrevious: () => void¶

isTabFocusable

(index: number) => boolean¶

Parameters
index: `number`¶

mouseScroll

(event: WheelEvent) => void¶

Parameters
event: `WheelEvent`¶

A callback method that is invoked immediately after Angular has completed initialization of a component's view. It is invoked only once when the view is instantiated.
ngAfterViewInit: () => void from AfterViewInit.ngAfterViewInit¶

A callback method that performs custom clean-up, invoked immediately before a directive, pipe, or service instance is destroyed.
ngOnDestroy: () => void from OnDestroy.ngOnDestroy¶

notifyChildrenChanged: () => void¶

resize: () => void¶

scroll

(inc: number) => void¶

Parameters
inc: `number`¶

Scrolls the tab headers to the end (right in LTR).
scrollEnd: () => void¶

Scrolls the tab headers to the start (left in LTR).
scrollStart: () => void¶

selectTab

(selectedTab: SiTabComponent) => void¶

Finds the index of the provided tab and sets the index as new selected tab index

Parameters
The tab to be selected. This must already be part of the container. selectedTab: `SiTabComponent`¶

Except where otherwise noted, content on this site is licensed under MIT License.