Electron Titlebar¶

Usage¶

When to use¶

The electron-titlebar is mandatory when the application is running in electron

When not to use¶

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:

• When the div with the class="si-layout-main-padding" is in use
• si-navbar-primary
• si-navbar-vertical
• si-side-panel
• si-landing-page

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.