2015-08-25 12:56:38 +00:00
# Frameless Window
2013-09-09 07:18:53 +00:00
2015-10-16 22:56:45 +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
2015-11-12 13:20:09 +00:00
const BrowserWindow = require('electron').BrowserWindow;
2013-09-09 06:52:46 +00:00
var win = new BrowserWindow({ width: 800, height: 600, frame: false });
```
2015-10-16 20:03:47 +00:00
### Alternatives on OS X
2015-09-14 12:15:41 +00:00
On Mac OS X 10.10 Yosemite and newer, there's an alternative way to specify
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.
You can do so by specifying the new `title-bar-style` option:
```javascript
2015-11-12 13:20:09 +00:00
var win = new BrowserWindow({ 'title-bar-style': 'hidden' });
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
var win = new BrowserWindow({ transparent: true, frame: false });
```
### Limitations
2015-08-25 12:56:38 +00:00
* You can not click through the transparent area. We are going to introduce an
2015-01-12 23:27:33 +00:00
API to set window shape to solve this, but currently blocked at an
[upstream bug ](https://code.google.com/p/chromium/issues/detail?id=387234 ).
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).
2015-08-29 09:04:30 +00:00
* On Windows operation 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
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.
