Usage
When to use
The electron-titlebar is mandatory when the application is running in electron The electron-titlebar should not be used in not electron applications
Code
Usage
import { SiElectrontitlebarComponent } from '@siemens/element-ng/electron-titlebar';
@Component({
imports: [SiElectrontitlebarComponent, ...]
})
Correct rendering
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):
import { runsInElectron } from '@siemens/element-ng';
constructor() {
if (runsInElectron()) {
document.documentElement.classList.add('in-electron');
}
}
Following components are affected when using the si-electron-titlebar:
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.
SiElectrontitlebarComponent API Documentation
selector
si-electron-titlebar
Input Properties
Output Properties
Types Documentation
| 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 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 | |
¶