2015-08-25 12:56:38 +00:00
|
|
|
# Frameless Window
|
2013-09-09 07:18:53 +00:00
|
|
|
|
2016-04-21 22:35:29 +00:00
|
|
|
> Open a window without toolbars, borders, or other graphical "chrome".
|
|
|
|
|
|
2016-04-22 13:53:26 +00:00
|
|
|
A frameless window is a window that has no
|
|
|
|
|
[chrome](https://developer.mozilla.org/en-US/docs/Glossary/Chrome), the parts of
|
|
|
|
|
the window, like toolbars, that are not a part of the web page. These are
|
|
|
|
|
options on the [`BrowserWindow`](browser-window.md) class.
|
2013-09-09 06:52:46 +00:00
|
|
|
|
|
|
|
|
## Create a frameless window
|
|
|
|
|
|
2015-08-25 12:56:38 +00:00
|
|
|
To create a frameless window, you need to set `frame` to `false` in
|
2013-09-09 12:17:47 +00:00
|
|
|
[BrowserWindow](browser-window.md)'s `options`:
|
2013-09-09 06:52:46 +00:00
|
|
|
|
|
|
|
|
|
|
|
|
|
```javascript
|
2016-06-07 11:32:52 +00:00
|
|
|
const {BrowserWindow} = require('electron')
|
|
|
|
|
let win = new BrowserWindow({width: 800, height: 600, frame: false})
|
2016-07-26 01:39:25 +00:00
|
|
|
win.show()
|
2013-09-09 06:52:46 +00:00
|
|
|
```
|
|
|
|
|
|
2016-06-18 13:26:26 +00:00
|
|
|
### Alternatives on macOS
|
2015-09-14 12:15:41 +00:00
|
|
|
|
2016-08-26 04:06:56 +00:00
|
|
|
On macOS 10.9 Mavericks and newer, there's an alternative way to specify
|
2015-09-14 12:15:41 +00:00
|
|
|
a chromeless window. Instead of setting `frame` to `false` which disables
|
|
|
|
|
both the titlebar and window controls, you may want to have the title bar
|
|
|
|
|
hidden and your content extend to the full window size, yet still preserve
|
|
|
|
|
the window controls ("traffic lights") for standard window actions.
|
2016-01-18 09:35:14 +00:00
|
|
|
You can do so by specifying the new `titleBarStyle` option:
|
2015-09-14 12:15:41 +00:00
|
|
|
|
|
|
|
|
```javascript
|
2016-07-26 01:39:25 +00:00
|
|
|
const {BrowserWindow} = require('electron')
|
2016-06-07 11:32:52 +00:00
|
|
|
let win = new BrowserWindow({titleBarStyle: 'hidden'})
|
2016-07-26 01:39:25 +00:00
|
|
|
win.show()
|
2015-09-14 12:15:41 +00:00
|
|
|
```
|
|
|
|
|
|
2015-01-12 23:27:33 +00:00
|
|
|
## Transparent window
|
|
|
|
|
|
|
|
|
|
By setting the `transparent` option to `true`, you can also make the frameless
|
|
|
|
|
window transparent:
|
|
|
|
|
|
|
|
|
|
```javascript
|
2016-07-26 01:39:25 +00:00
|
|
|
const {BrowserWindow} = require('electron')
|
2016-06-07 11:32:52 +00:00
|
|
|
let win = new BrowserWindow({transparent: true, frame: false})
|
2016-07-26 01:39:25 +00:00
|
|
|
win.show()
|
2015-01-12 23:27:33 +00:00
|
|
|
```
|
|
|
|
|
|
|
|
|
|
### Limitations
|
|
|
|
|
|
2015-08-25 12:56:38 +00:00
|
|
|
* You can not click through the transparent area. We are going to introduce an
|
2016-04-22 13:53:26 +00:00
|
|
|
API to set window shape to solve this, see
|
|
|
|
|
[our issue](https://github.com/electron/electron/issues/1335) for details.
|
2015-08-25 12:56:38 +00:00
|
|
|
* Transparent windows are not resizable. Setting `resizable` to `true` may make
|
|
|
|
|
a transparent window stop working on some platforms.
|
2015-01-12 23:27:33 +00:00
|
|
|
* The `blur` filter only applies to the web page, so there is no way to apply
|
2015-08-26 23:41:25 +00:00
|
|
|
blur effect to the content below the window (i.e. other applications open on
|
|
|
|
|
the user's system).
|
2016-06-16 01:31:10 +00:00
|
|
|
* On Windows operating systems, transparent windows will not work when DWM is
|
2015-08-26 23:41:25 +00:00
|
|
|
disabled.
|
2015-01-12 23:27:33 +00:00
|
|
|
* On Linux users have to put `--enable-transparent-visuals --disable-gpu` in
|
2015-08-26 23:41:25 +00:00
|
|
|
the command line to disable GPU and allow ARGB to make transparent window,
|
|
|
|
|
this is caused by an upstream bug that [alpha channel doesn't work on some
|
|
|
|
|
NVidia drivers](https://code.google.com/p/chromium/issues/detail?id=369209) on
|
|
|
|
|
Linux.
|
2015-08-25 12:56:38 +00:00
|
|
|
* On Mac the native window shadow will not be shown on a transparent window.
|
2015-01-12 23:27:33 +00:00
|
|
|
|
2016-06-07 11:32:52 +00:00
|
|
|
## Click-through window
|
|
|
|
|
|
|
|
|
|
To create a click-through window, i.e. making the window ignore all mouse
|
|
|
|
|
events, you can call the [win.setIgnoreMouseEvents(ignore)][ignore-mouse-events]
|
|
|
|
|
API:
|
|
|
|
|
|
|
|
|
|
```javascript
|
2016-07-26 01:39:25 +00:00
|
|
|
const {BrowserWindow} = require('electron')
|
|
|
|
|
let win = new BrowserWindow()
|
2016-06-07 11:32:52 +00:00
|
|
|
win.setIgnoreMouseEvents(true)
|
|
|
|
|
```
|
|
|
|
|
|
2013-09-09 06:52:46 +00:00
|
|
|
## Draggable region
|
|
|
|
|
|
|
|
|
|
By default, the frameless window is non-draggable. Apps need to specify
|
2015-04-16 03:31:12 +00:00
|
|
|
`-webkit-app-region: drag` in CSS to tell Electron which regions are draggable
|
2013-09-09 06:52:46 +00:00
|
|
|
(like the OS's standard titlebar), and apps can also use
|
|
|
|
|
`-webkit-app-region: no-drag` to exclude the non-draggable area from the
|
2015-08-25 12:56:38 +00:00
|
|
|
draggable region. Note that only rectangular shapes are currently supported.
|
2013-09-09 06:52:46 +00:00
|
|
|
|
|
|
|
|
To make the whole window draggable, you can add `-webkit-app-region: drag` as
|
|
|
|
|
`body`'s style:
|
|
|
|
|
|
|
|
|
|
```html
|
|
|
|
|
<body style="-webkit-app-region: drag">
|
|
|
|
|
</body>
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
And note that if you have made the whole window draggable, you must also mark
|
|
|
|
|
buttons as non-draggable, otherwise it would be impossible for users to click on
|
|
|
|
|
them:
|
|
|
|
|
|
|
|
|
|
```css
|
|
|
|
|
button {
|
|
|
|
|
-webkit-app-region: no-drag;
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
2015-08-26 23:41:25 +00:00
|
|
|
If you're setting just a custom titlebar as draggable, you also need to make all
|
|
|
|
|
buttons in titlebar non-draggable.
|
2013-09-09 06:52:46 +00:00
|
|
|
|
|
|
|
|
## Text selection
|
|
|
|
|
|
2015-08-26 23:41:25 +00:00
|
|
|
In a frameless window the dragging behaviour may conflict with selecting text.
|
|
|
|
|
For example, when you drag the titlebar you may accidentally select the text on
|
|
|
|
|
the titlebar. To prevent this, you need to disable text selection within a
|
|
|
|
|
draggable area like this:
|
2013-09-09 06:52:46 +00:00
|
|
|
|
|
|
|
|
```css
|
|
|
|
|
.titlebar {
|
|
|
|
|
-webkit-user-select: none;
|
|
|
|
|
-webkit-app-region: drag;
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
2013-09-09 07:27:19 +00:00
|
|
|
## Context menu
|
2013-09-09 06:52:46 +00:00
|
|
|
|
2015-08-25 12:56:38 +00:00
|
|
|
On some platforms, the draggable area will be treated as a non-client frame, so
|
|
|
|
|
when you right click on it a system menu will pop up. To make the context menu
|
|
|
|
|
behave correctly on all platforms you should never use a custom context menu on
|
2013-09-09 06:52:46 +00:00
|
|
|
draggable areas.
|
2016-06-07 11:32:52 +00:00
|
|
|
|
|
|
|
|
[ignore-mouse-events]: browser-window.md#winsetignoremouseeventsignore
|
