This is a titlebar which is used in electron applications. The titlebar will be positioned above the primary navbar and provide forward/backward functionality as well as zoom and custom functions.
The titlebar should be aligned on top of all components. But when adding the si-electron-titlebar to your application, it will no be aligned above every component by default. Instead it will be hidden behind an overlapping component e.g. the si-navbar-primary.
In order for correct rendering and padding with the titlebar, you should add the in-electron CSS class to the body element. But this should only happen if the applications runs in electron. For this we also defined a helper function:
import{runsInElectron}from'@siemens/element-ng';
Apply the defined in-electron class as follows, in the top level component (usually app.component.ts):
Implement window control overlay with caption buttons¶
In order to get the close, minimize and maximize buttons from the operating system in your Electron application, please have a look at the Electron caption buttons guide.
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.
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¶
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)¶
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¶
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¶
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¶
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)¶
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¶
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)¶
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¶
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[])¶
¶