github
DocsBlog
Chapters
fontcolor_theme
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

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

Toolbar

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

Footer

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

Sidebar

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

API <dui-window>(source)

searchclear
Name
Description 
@Input() closable?: boolean
@Input() dialog?: boolean
@Input() maximizable?: boolean
@Input() minimizable?: boolean
@Input() normalize-style?: boolean
browserWindow: BrowserWindow
content: Signal<WindowContentComponent>
header: Signal<WindowHeaderComponent>
id: number
viewContainerRef: ViewContainerRef
windowState: WindowState
getClosestNonDialogWindow(): (undefined | WindowComponent)

API <dui-window-content>(source)

searchclear
Name
Description 
@Input() class?: string
@Input() sidebarMaxWidth?: number
@Input() sidebarMinWidth?: number
@Input() sidebarVisible?: boolean
@Input() sidebarWidth?: number
@Input() transparent?: boolean
@Output() sidebarWidthChange?: number
content: Signal<ElementRef<any>>
sidebar: Signal<ElementRef<any>>
sidebarContainer: Signal<ElementRef<any>>
toolbar: WritableSignal<WinSidebar>
withAnimation: WritableSignal<boolean>
isSidebarVisible(): boolean
registerSidebar(sidebar: WinSidebar): void
unregisterSidebar(sidebar: WinSidebar): void

API <dui-window-header>(source)

searchclear
Name
Description 
@Input() size?: 'small' | 'default'
windowState: WindowState
close(): void
getBottomPosition(): number
maximize(): void
minimize(): void

API <dui-window-toolbar>(source)

searchclear
Name
Description 
@Input() for?: string
template: TemplateRef<any>

API <dui-window-sidebar>(source)

searchclear
Name
Description 
template: TemplateRef<any>

API <dui-window-footer>(source)

API WindowState(source)

searchclear
Name
Description 
buttonGroupAlignedToSidebar: WritableSignal<AlignedButtonGroup>
disableInputs: WritableSignal<boolean>
focus: WritableSignal<boolean>
toolbars: WritableSignal<>
addToolbarContainer(forName: string, template: TemplateRef<any>): void
removeToolbarContainer(forName: string, template: TemplateRef<any>): void

API WindowRegistry(source)

searchclear
Name
Description 
activeWindow: Win
id: number
registry: Map<Win, {menu: WindowMenuState, state: WindowState, viewContainerRef: ViewContainerRef}>
windowHistory: Win[]
blur(win: Win): void
focus(win: Win): void
getAllElectronWindows(): BrowserWindow[]
getCurrentViewContainerRef(): ViewContainerRef
getOuterActiveWindow(): (undefined | Win)
register(win: Win, state: WindowState, menu: WindowMenuState, viewContainerRef: ViewContainerRef): void
unregister(win: Win): void