SiTabComponent documentation¶

selector

si-tab

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>

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.

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.

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

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.