SiTabsetComponent documentation¶

selector

si-tabset

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

No API to document for this.

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

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`<(`undefined` \| `boolean`)> = `false`¶
Background color of the badge. If no color is provided a red dot badge will be rendered. badgeColor: `InputSignal`<(`undefined` \| `string`)> 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`<(`undefined` \| `boolean` \| `TranslatableString`)> 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`<(`undefined` \| `string`)> from `SiTabBaseDirective.icon` = ...¶
icons: `Record`<`"elementCancel"`, `string`> from `SiTabBaseDirective.icons` = ...¶
router: `Router` = ...¶
routerLink: `RouterLink` = ...¶
routerLinkActive: `RouterLinkActive` = ...¶
tabButton: `ElementRef`<`HTMLElement`> from `SiTabBaseDirective.tabButton` = ...¶
tabContent: `Signal`<(`undefined` \| `TemplateRef`<`any`>)> 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¶

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`<(`undefined` \| `string`)> 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`<(`undefined` \| `boolean` \| `TranslatableString`)> 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`<(`undefined` \| `string`)> from `SiTabBaseDirective.icon` = ...¶
icons: `Record`<`"elementCancel"`, `string`> from `SiTabBaseDirective.icons` = ...¶
tabButton: `ElementRef`<`HTMLElement`> from `SiTabBaseDirective.tabButton` = ...¶
tabContent: `Signal`<(`undefined` \| `TemplateRef`<`any`>)> 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¶

selectTab

(retainFocus: boolean) => void¶

Parameters
retainFocus?: `boolean`¶

selectTabByUser: () => void¶

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