TabsNext¶

Starting with Element v48, we are introducing si-tab-next as an experimental component that will eventually replace the current si-tab component. This new implementation brings significant improvements in responsive behavior, ensuring better adaptation across different screen sizes and devices. The component has been rebuilt with a strong focus on accessibility standards, including enhanced ARIA compliance and improved keyboard navigation.

Code¶

Usage¶

import { SiTabNextComponent, SiTabsetNextComponent } from '@siemens/element-ng/tabs-next';

@Component({
  imports: [
    SiTabNextComponent,
    SiTabsetNextComponent,
    ...
  ]
})

TabsNext¶

TabsNext - Routing¶

TabsNext - Icons¶

SiTabsetNextComponent API Documentation¶

selector

si-tabset-next

No API to document for this.

SiTabNextComponent API Documentation¶

selector

si-tab-next

Input Properties¶

Name	Type	Default	Description
active ¶	`boolean`	`false`	Whether the tab is active or not. If set to `true` , the tab will be selected and its content will be displayed.
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. If provided, heading text will be ignored and only icon will be displayed.

Output Properties¶

Name	Type	Description
activeChange ¶	`boolean`	Whether the tab is active or not. If set to `true` , the tab will be selected and its content will be displayed.
closeTriggered ¶	`void`	Event emitter to notify when a tab is closed.

Attributes and Methods¶

Name	Type	Default	Description
selectTab(...) ¶	(retainFocus: `boolean`) => `void`		Parameters retainFocus: `boolean`

SiTabNextLinkComponent API Documentation¶

selector

a[si-tab-next][routerLink]

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. If provided, heading text will be ignored and only icon will be displayed.

Output Properties¶

Name	Type	Description
closeTriggered ¶	`void`	Event emitter to notify when a tab is closed.

Attributes and Methods¶

Name	Type	Default	Description
(readonly) active ¶	`Signal`<(`undefined` \| `boolean`)>	`false`
ngOnDestroy() ¶	() => `void`		A callback method that performs custom clean-up, invoked immediately before a directive, pipe, or service instance is destroyed.
selectTab(...) ¶	(retainFocus: `boolean`) => `void`		Parameters retainFocus: `boolean`

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

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