Last updated
Last updated
A borderless window is a special type of window mode that does not have a shell (including window borders, title bars, toolbars, etc.), containing only the web content. Using a borderless window mode allows you to fully customize the window interface, making your application look consistent across all operating systems. However, since borderless windows do not have a system-provided shell, care must be taken while using them to avoid affecting the user experience.
In the manifest.json
file, set the frame
property of the window
object to false
to enable borderless window mode.
You can use the -webkit-app-region
property in your application to control the draggable area of the application window.
By default, borderless windows are non-draggable. The application needs to specify -webkit-app-region: drag
in CSS to tell the plugin which areas are draggable (like standard title bars of the operating system). Use -webkit-app-region: no-drag
within the draggable area to exclude some parts. Please note that currently only rectangular shapes are supported.
To make the entire window draggable, you can add -webkit-app-region: drag
as the body
style:
Please note that if you make the entire window draggable, you must mark the buttons inside as not draggable, otherwise users will not be able to click on them:
If you only set the custom title bar to be draggable, you also need to make all the buttons within the title bar non-draggable.
Open a window without toolbars, borders, and other graphical shells.