SiContentActionBarComponent documentation¶

selector

si-content-action-bar

Input Properties¶

Name	Type	Default	Description
actionParam ¶	`any`		A param that will be passed to the `action` in the primary/secondary actions. This allows to re-use the same primary/secondary action arrays across rows in a table.
disabled ¶	`boolean`	`false`	Disables the whole content-action-bar.
preventIconsInDropdownMenus ¶	`boolean`	`false`	Option to remove all icons from dropdown menus of the content action bar. Some apps provide only few actions with icons, located in the set of primary actions. The icons are visible in the `collapsible` and `expanded` view type. On reduced space, primary actions are relocated in the same dropdown menu as the secondary actions. The dropdown menu can look unbalanced, if a large number of secondary actions without icons are presented with few actions with icons. This option balances the look and feel by removing all icons from actions in the dropdown menu.
primaryActions ¶	readonly (`MenuItem` \| `ContentActionBarMainItem`)[]		List of primary actions. Supports up to 4 actions and omits additional ones.
secondaryActions ¶	readonly (`MenuItem` \| `MenuItem`)[]		List of secondary actions.
toggleItemLabel ¶	`TranslatableString`	$localize`:@@SI_CONTENT_ACTION_BAR.TOGGLE:Toggle`	Toggle icon aria-label, required for a11y
viewType ¶	`ViewType`	`'expanded'`	Selection of view type as 'collapsible', 'expanded' or 'mobile'.

Types Documentation¶

ContentActionBarMainItem ((`MenuItemAction` \| `MenuItemCheckbox` \| `MenuItemLink` \| `MenuItemRouterLink` \| `MenuItemGroup`) & { iconOnly: `boolean` })¶ Type alias

MenuItem (`MenuItemGroup` \| `MenuItemAction` \| `MenuItemRouterLink` \| `MenuItemLink` \| `MenuItemRadioGroup` \| `MenuItemCheckbox` \| `MenuItemRadio` \| `MenuItemHeader` \| `MenuDivider`)¶ Type alias

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.

ViewType (`"collapsible"` \| `"expanded"` \| `"mobile"`)¶ Type alias

MenuItemAction

extends MenuItemBase¶

Interface

Properties
Action that called when the item is triggered. A function will be called, a string will be dispatched to the SiMenuActionService . action: (`string` \| (actionParam: `any`, source: `this`) => `void`)¶
Badge that is rendered after the label. badge?: (`string` \| `number`) from `badge`¶
Color of the badge (not iconBadge). badgeColor?: `string` from `badgeColor`¶
Whether the menu item id disabled. disabled?: `boolean` from `disabled`¶
Optional icon that will be rendered before the label. icon?: `string` from `icon`¶
Badge (always red) that is attached to the icon. If value===true, an empty red dot will be rendered. iconBadge?: (`string` \| `number` \| `boolean`) from `iconBadge`¶
ID that will be attached to the DOM node. id?: `string` from `id`¶
Label that is shown to the user. label: `TranslatableString` from `label`¶
type: `"action"`¶

MenuItemCheckbox

extends MenuItemBase¶

Interface

Properties
Action that called when the item is triggered. A function will be called, a string will be dispatched to the SiMenuActionService . action: (`string` \| (actionParam: `any`, source: `this`) => `void`)¶
Badge that is rendered after the label. badge?: (`string` \| `number`) from `badge`¶
Color of the badge (not iconBadge). badgeColor?: `string` from `badgeColor`¶
Whether the checkbox is checked. checked: `boolean`¶
Whether the menu item id disabled. disabled?: `boolean` from `disabled`¶
Optional icon that will be rendered before the label. icon?: `string` from `icon`¶
Badge (always red) that is attached to the icon. If value===true, an empty red dot will be rendered. iconBadge?: (`string` \| `number` \| `boolean`) from `iconBadge`¶
ID that will be attached to the DOM node. id?: `string` from `id`¶
Label that is shown to the user. label: `TranslatableString` from `label`¶
type: `"checkbox"`¶

MenuItemLink

extends MenuItemBase¶

Interface

Properties
Badge that is rendered after the label. badge?: (`string` \| `number`) from `badge`¶
Color of the badge (not iconBadge). badgeColor?: `string` from `badgeColor`¶
Whether the menu item id disabled. disabled?: `boolean` from `disabled`¶
The href property of the anchor. href: `string`¶
Optional icon that will be rendered before the label. icon?: `string` from `icon`¶
Badge (always red) that is attached to the icon. If value===true, an empty red dot will be rendered. iconBadge?: (`string` \| `number` \| `boolean`) from `iconBadge`¶
ID that will be attached to the DOM node. id?: `string` from `id`¶
Label that is shown to the user. label: `TranslatableString` from `label`¶
The target property of the anchor. target?: `string`¶
type: `"link"`¶

MenuItemRouterLink

extends MenuItemBase¶

Interface

Represents a menu item that navigates using the Angular Router.

Requires a configured Angular Router.

Properties
Badge that is rendered after the label. badge?: (`string` \| `number`) from `badge`¶
Color of the badge (not iconBadge). badgeColor?: `string` from `badgeColor`¶
Whether the menu item id disabled. disabled?: `boolean` from `disabled`¶
Navigation extras that are passed to the `RouterLink` . extras?: `NavigationExtras`¶
Optional icon that will be rendered before the label. icon?: `string` from `icon`¶
Badge (always red) that is attached to the icon. If value===true, an empty red dot will be rendered. iconBadge?: (`string` \| `number` \| `boolean`) from `iconBadge`¶
ID that will be attached to the DOM node. id?: `string` from `id`¶
Label that is shown to the user. label: `TranslatableString` from `label`¶
Link for the angular router. Accepts the same values as `RouterLink` . routerLink: (`string` \| `any`[])¶
type: `"router-link"`¶

MenuItemGroup

extends MenuItemBase¶

Interface

Properties
Badge that is rendered after the label. badge?: (`string` \| `number`) from `badge`¶
Color of the badge (not iconBadge). badgeColor?: `string` from `badgeColor`¶
Submenu items for this menu item. children: `MenuItem`[]¶
Whether the menu item id disabled. disabled?: `boolean` from `disabled`¶
Optional icon that will be rendered before the label. icon?: `string` from `icon`¶
Badge (always red) that is attached to the icon. If value===true, an empty red dot will be rendered. iconBadge?: (`string` \| `number` \| `boolean`) from `iconBadge`¶
ID that will be attached to the DOM node. id?: `string` from `id`¶
Label that is shown to the user. label: `TranslatableString` from `label`¶
type: `"group"`¶

MenuItemRadioGroup

¶

Interface

Properties
Items that are part of the radio group. children: [ `MenuItemHeader`, ...(`MenuItemRadio` \| `MenuItemHeader` \| `MenuDivider`)[] ]¶
type: `"radio-group"`¶

MenuItemRadio

extends MenuItemBase¶

Interface

Properties
Action that called when the item is triggered. A function will be called, a string will be dispatched to the SiMenuActionService . action: (`string` \| (actionParam: `any`, source: `this`) => `void`)¶
Badge that is rendered after the label. badge?: (`string` \| `number`) from `badge`¶
Color of the badge (not iconBadge). badgeColor?: `string` from `badgeColor`¶
Whether the radio is checked. checked: `boolean`¶
Whether the menu item id disabled. disabled?: `boolean` from `disabled`¶
Optional icon that will be rendered before the label. icon?: `string` from `icon`¶
Badge (always red) that is attached to the icon. If value===true, an empty red dot will be rendered. iconBadge?: (`string` \| `number` \| `boolean`) from `iconBadge`¶
ID that will be attached to the DOM node. id?: `string` from `id`¶
Label that is shown to the user. label: `TranslatableString` from `label`¶
type: `"radio"`¶

MenuItemHeader

¶

Interface

Properties
The label of the header. label: `string`¶
type: `"header"`¶

MenuDivider

¶

Interface

Properties
type: `"divider"`¶

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

MenuItemBase

¶

Interface

Properties
Badge that is rendered after the label. badge?: (`string` \| `number`)¶
Color of the badge (not iconBadge). badgeColor?: `string`¶
Whether the menu item id disabled. disabled?: `boolean`¶
Optional icon that will be rendered before the label. icon?: `string`¶
Badge (always red) that is attached to the icon. If value===true, an empty red dot will be rendered. iconBadge?: (`string` \| `number` \| `boolean`)¶
ID that will be attached to the DOM node. id?: `string`¶
Label that is shown to the user. label: `TranslatableString`¶

SiMenuActionService

¶

Class

Implement and provide this to an SiMenuFactoryComponent to receive trigger events.

Constructor
() => `{}`¶

Methods

actionTriggered

(item: (MenuItemAction | MenuItemCheckbox | MenuItemRadio), actionParam: any) => void¶

Will be called by SiMenuFactoryComponent if an action is defined with a string instead of a function.

Parameters
item: (`MenuItemAction` \| `MenuItemCheckbox` \| `MenuItemRadio`)¶
actionParam?: `any`¶

LinkAction

¶

Interface

Used in events emitted from SiLinkActionService

Properties
link: `Link`¶
param: `any`¶

Link

¶

Interface

Properties
A function that will be invoked when clicking on the menu item. When passed as a string, use together with SiLinkActionService to receive events. This is meant for repetitive things in lists/tables/etc. action?: (`string` \| (param: `any`) => `any`)¶
A boolean that lets the link know whether it is disabled or not. disabled?: `boolean`¶
Defines a href URI that the menu item will be linked to. Will be used to set the href attribute of the a element. Will only be used if link and function is not set. href?: `string`¶
A boolean that lets the link know whether it is active or not. It is useful when action() is executed instead of link route. isActive?: `boolean`¶
Defines the link of the menu item within the application using the angular router link concept. Accepts an array of `any` as per [routerLink API definition] https://angular.dev/api/router/RouterLink . link?: (`string` \| `any`[])¶
The navigation extras provide additional routing options when using the router link. navigationExtras?: `NavigationExtras`¶
The target attribute specifies where to open the linked document. If no target is specified, the link will open in the current tab. target?: `string`¶
The title of the menu item. Can be either the title to be displayed or the translation key. title?: `TranslatableString`¶
The optional tooltip of the link. Can be either the text to be displayed or the translation key. tooltip?: `TranslatableString`¶

SiMenuFactoryComponent

¶

Class

▶

Constructor
() => `{}`¶

Properties
actionParam: `InputSignal`<`unknown`> = ...¶
items: `InputSignal`<(`undefined` \| readonly (`MenuItem` \| `MenuItem`)[])> = ...¶
linkActionService: (`null` \| `SiLinkActionService`) = ...¶
menuActionService: (`null` \| `SiMenuActionService`) = ...¶

Methods

isLegacyItemStyle

(item: (MenuItem | MenuItem)) => item is MenuItem¶

Parameters
item: (`MenuItem` \| `MenuItem`)¶

isNewItemStyle

(item: (MenuItem | MenuItem)) => item is MenuItem¶

Parameters
item: (`MenuItem` \| `MenuItem`)¶

radioOrCheckboxTriggered

(item: MenuItem) => void¶

Parameters
item: `MenuItem`¶

runAction

(item: (MenuItemAction | MenuItemCheckbox | MenuItemRadio)) => void¶

Parameters
item: (`MenuItemAction` \| `MenuItemCheckbox` \| `MenuItemRadio`)¶

SiLinkActionService

¶

Class

▶

Constructor
() => `{}`¶

Properties
Observable which emits the link and param to run the action on. action$: `Observable`<`LinkAction`> = `this.actionSubject.asObservable()`¶
actionSubject: `Subject`<`LinkAction`> = ...¶

Methods

emit

(link: Link, param: any) => void¶

Emit a new link and param pair to run the action on.

Parameters
link: `Link`¶
param: `any`¶

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