search icon
Close
Chapters
Desktop UI

Window

A window is built of multiple key components, you need for almost all of your desktop applications. The frame, header, header toolbar, content, footer.

If you use electron, you need to make sure the electron window is rendering without borders. You do this by setting to titleBarStyle to none. To work correctly, this library requires you to set certain window options correctly. Following is an example: 

win = new BrowserWindow({
    center: true,
    width: 750,
    height: 750,
    vibrancy: 'window',
    transparent: true, //necessary for vibrancy fix on macos
    backgroundColor: "#80FFFFFF", //necessary for vibrancy fix on macos
    webPreferences: {
    scrollBounce: true,
    allowRunningInsecureContent: false,
    preload: __dirname + '/../../node_modules/@deepkit/desktop-ui/preload.js',
    nativeWindowOpen: true,
    },
    titleBarStyle: 'hidden',
    icon: path.join(assetsPath, 'icons/64x64.png')
});

Simple

color-theme
PreviewHTML
Angular Desktop UI
gnome_minimize
gnome_maximize
gnome_close
This is the window content

Toolbar

color-theme
PreviewHTML
Angular Desktop UI
gnome_minimize
gnome_maximize
gnome_close
envelopsearchclear
This is the window content

Footer

color-theme
PreviewHTML
Angular Desktop UI
gnome_minimize
gnome_maximize
gnome_close
envelopsearchclear
This is the window content
This is the footer.

Sidebar

color-theme
Preview
Angular Desktop UI
gnome_minimize
gnome_maximize
gnome_close
toggle_sidebar
This is the window content
Form controlsButtonButton Group

API <dui-window>(source)

API <dui-window-content>(source)

API <dui-window-header>(source)

API <dui-window-toolbar>(source)

API <dui-window-sidebar>(source)

API <dui-window-footer>(source)

API WindowState(source)

API WindowRegistry(source)