SiTabPortalComponent documentation¶

selector

si-tab-portal

A component that renders the active tab's content at a remote location in the DOM using an Angular CDK DomPortal .

This component automatically renders the content of the currently active si-tab , including the role="tabpanel" container with proper ARIA attributes linked to the active tab.

Example:

<si-tabset #tabset>
  <si-tab heading="Overview" [active]="true">
    overview content
  </si-tab>
  <si-tab heading="History">
    history content
  </si-tab>
</si-tabset>

<si-tab-portal [tabset]="tabset" />

Input Properties¶

Name	Type	Default	Description
tabset ¶	`SiTabsetComponent`		Reference to the SiTabsetComponent whose active tab content this component renders via a `DomPortal` . The tabset's tab panel container, including the `role="tabpanel"` element with proper ARIA attributes, is transported to this component's location.

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

SiTabsetComponent

¶

Class

▶

A component to group multiple tabs together. Can either be used with SiTabLinkComponent or SiTabComponent components.

Constructor
() => `{}`¶

Properties
activeTab: `Signal`<(`SiTabBaseDirective` \| `undefined`)> = ...¶
contentNode: `Signal`<`unknown`> = ...¶
When set, the overflowing content inside the tab will automatically scroll contentOverflowAuto: `InputSignalWithTransform`<`boolean`, `unknown`> = `false`¶
A `DomPortal` wrapping the tab panel container. Used by SiTabPortalComponent to render the active tab's content at a remote location in the DOM. contentPortal: `Signal`<`DomPortal`<`unknown`>> = ...¶
focusKeyManager: `FocusKeyManager`<`SiTabBaseDirective`> = ...¶
icons: `Record`<`"elementOptions"`, `string`> = ...¶
showMenuButton: `WritableSignal`<`boolean`> = ...¶
tabPanels: `Signal`<readonly `SiTabBaseDirective`[]> = ...¶

Methods

keydown

(event: KeyboardEvent) => void¶

Parameters
event: `KeyboardEvent`¶

removedTabByUser

(index: number, active: boolean) => void¶

Parameters
index: `number`¶
active?: `boolean`¶

resizeContainer

(width: number, scrollWidth: number) => void¶

Parameters
width: `number`¶
scrollWidth: `number`¶

tabIsLink

(tab: unknown) => tab is SiTabLinkComponent¶

Parameters
tab: `unknown`¶

SiTabLinkComponent

extends SiTabBaseDirective¶

Class

▶

Creates a tab that uses the Angular router.

Example:

<si-tabset>
  <a si-tab routerLink="/home" heading="Home"></a>

  <router-outlet />
</si-tabset>

Constructor
() => `{}` from `SiTabBaseDirective.constructor`¶

Properties
active: `Signal`<(`boolean` \| `undefined`)> = `false`¶
Background color of the badge. If no color is provided a red dot badge will be rendered. badgeColor: `InputSignal`<(`string` \| `undefined`)> from `SiTabBaseDirective.badgeColor` = ...¶
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 badgeContent: `InputSignal`<(`boolean` \| `TranslatableString` \| `undefined`)> from `SiTabBaseDirective.badgeContent` = ...¶
Close the current tab. closable: `InputSignalWithTransform`<`boolean`, `unknown`> from `SiTabBaseDirective.closable` = `false`¶
Event emitter to notify when a tab is closed. closeTriggered: `OutputEmitterRef`<`void`> from `SiTabBaseDirective.closeTriggered` = ...¶
Disables the tab. disabledTab: `InputSignalWithTransform`<`boolean`, `unknown`> from `SiTabBaseDirective.disabledTab` = `false`¶
Title of the tab item. heading: `InputSignal`<`TranslatableString`> from `SiTabBaseDirective.heading` = ...¶
Icon of the tab item. If provided, heading text will be ignored and only icon will be displayed. icon: `InputSignal`<(`string` \| `undefined`)> from `SiTabBaseDirective.icon` = ...¶
icons: `Record`<`"elementCancel"`, `string`> from `SiTabBaseDirective.icons` = ...¶
router: `Router` = ...¶
routerLink: `RouterLink` = ...¶
routerLinkActive: `RouterLinkActive` = ...¶
tabButton: `ElementRef`<`HTMLElement`> from `SiTabBaseDirective.tabButton` = ...¶
tabContent: `Signal`<(`TemplateRef`<`any`> \| `undefined`)> from `SiTabBaseDirective.tabContent` = ...¶
tabId: `string` from `SiTabBaseDirective.tabId` = ...¶
tabset: `SiTabsetComponent` from `SiTabBaseDirective.tabset` = ...¶

Accessors
get disabled: `boolean` from `SiTabBaseDirective.disabled`¶

Methods

closeTab

(event: Event) => void from SiTabBaseDirective.closeTab¶

Parameters
event: `Event`¶

deSelectTab: () => void from SiTabBaseDirective.deSelectTab¶

focus: () => void from SiTabBaseDirective.focus¶

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

scrollTabIntoView: () => void from SiTabBaseDirective.scrollTabIntoView¶

selectTab

(retainFocus: boolean) => void¶

Parameters
retainFocus?: `boolean`¶

SiTabComponent

extends SiTabBaseDirective implements OnDestroy¶

Class

▶

Creates a normal tab that can contain any content.

Example:

<si-tabset>
  <si-tab heading="Tab 1">
    <p>Content of Tab 1</p>
  </si-tab>
</si-tabset>

Constructor
() => `{}` from `SiTabBaseDirective.constructor`¶

Properties
Whether the tab is active or not. If set to `true` , the tab will be selected and its content will be displayed. active: `ModelSignal`<`boolean`> = `false`¶
Background color of the badge. If no color is provided a red dot badge will be rendered. badgeColor: `InputSignal`<(`string` \| `undefined`)> from `SiTabBaseDirective.badgeColor` = ...¶
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 badgeContent: `InputSignal`<(`boolean` \| `TranslatableString` \| `undefined`)> from `SiTabBaseDirective.badgeContent` = ...¶
Guard to check if the tab can be activated. If not provided, the tab can always be activated. canActivate: `InputSignal`<(() => `boolean` \| `undefined`)> = ...¶
Guard to check if the tab can be deactivated. If not provided, the tab can always be deactivated. canDeactivate: `InputSignal`<(() => `boolean` \| `undefined`)> = ...¶
Close the current tab. closable: `InputSignalWithTransform`<`boolean`, `unknown`> from `SiTabBaseDirective.closable` = `false`¶
Event emitter to notify when a tab is closed. closeTriggered: `OutputEmitterRef`<`void`> from `SiTabBaseDirective.closeTriggered` = ...¶
Disables the tab. disabledTab: `InputSignalWithTransform`<`boolean`, `unknown`> from `SiTabBaseDirective.disabledTab` = `false`¶
Title of the tab item. heading: `InputSignal`<`TranslatableString`> from `SiTabBaseDirective.heading` = ...¶
Icon of the tab item. If provided, heading text will be ignored and only icon will be displayed. icon: `InputSignal`<(`string` \| `undefined`)> from `SiTabBaseDirective.icon` = ...¶
icons: `Record`<`"elementCancel"`, `string`> from `SiTabBaseDirective.icons` = ...¶
tabButton: `ElementRef`<`HTMLElement`> from `SiTabBaseDirective.tabButton` = ...¶
tabContent: `Signal`<(`TemplateRef`<`any`> \| `undefined`)> from `SiTabBaseDirective.tabContent` = ...¶
tabId: `string` from `SiTabBaseDirective.tabId` = ...¶
tabset: `SiTabsetComponent` from `SiTabBaseDirective.tabset` = ...¶

Accessors
get disabled: `boolean` from `SiTabBaseDirective.disabled`¶

Methods

closeTab

(event: Event) => void from SiTabBaseDirective.closeTab¶

Parameters
event: `Event`¶

deSelectTab: () => void¶

focus: () => void from SiTabBaseDirective.focus¶

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

scrollTabIntoView: () => void from SiTabBaseDirective.scrollTabIntoView¶

selectTab

(retainFocus: boolean) => void¶

Parameters
retainFocus?: `boolean`¶

selectTabByUser: () => void¶

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