Skip to content

Electron titlebar

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.

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:

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.