mirrors/electron
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions 1

Standardize frameless-window

Browse source
This commit is contained in:
Jessica Lord 2015-08-25 05:56:38 -07:00
parent 864c8df639
commit 76416d5e47
1 changed files with 16 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

37
docs/api/frameless-window.md
View file

@ -1,10 +1,10 @@
# Frameless window
# Frameless Window
A frameless window is a window that has no chrome.
A frameless window is a window that has no [chrome]()—the parts of the window that display close, open, minify buttons and such. These are options on the [`BrowserWindow`](browser-window.md) class.
## Create a frameless window
To create a frameless window, you only need to specify `frame` to `false` in
To create a frameless window, you need to set `frame` to `false` in
[BrowserWindow](browser-window.md)'s `options`:
@ -24,19 +24,18 @@ var win = new BrowserWindow({ transparent: true, frame: false });
### Limitations
* You can not click through the transparent area, we are going to introduce an
* You can not click through the transparent area. We are going to introduce an
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).
* Transparent window is not resizable, setting `resizable` to `true` may make
transparent window stop working on some platforms.
* Transparent windows are not resizable. Setting `resizable` to `true` may make
a transparent window stop working on some platforms.
* The `blur` filter only applies to the web page, so there is no way to apply
blur effect to the content below the window.
* On Windows transparent window will not work when DWM is disabled.
blur effect to the content below the window (i.e. other applications open on the user's system).
* On Windows operation shystems, transparent windows will not work when DWM is disabled.
* On Linux users have to put `--enable-transparent-visuals --disable-gpu` in
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
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.
* On Mac the native window shadow will not show for transparent window.
* On Mac the native window shadow will not be shown on a transparent window.
## Draggable region
@ -44,7 +43,7 @@ By default, the frameless window is non-draggable. Apps need to specify
`-webkit-app-region: drag` in CSS to tell Electron which regions are draggable
(like the OS's standard titlebar), and apps can also use
`-webkit-app-region: no-drag` to exclude the non-draggable area from the
draggable region. Note that only rectangular shape is currently supported.
draggable region. Note that only rectangular shapes are currently supported.
To make the whole window draggable, you can add `-webkit-app-region: drag` as
`body`'s style:
@ -64,15 +63,11 @@ button {
}
```
If you're only using a custom titlebar, you also need to make buttons in
titlebar non-draggable.
If you're setting just a custom titlebar as draggable, you also need to make all buttons in titlebar non-draggable.
## Text selection
One thing on frameless window is that the dragging behaviour may conflict with
selecting text, for example, when you drag the titlebar, you may accidentally
select the text on titlebar. To prevent this, you need to disable text
selection on dragging area like this:
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:
```css
.titlebar {
@ -83,7 +78,7 @@ selection on dragging area like this:
## Context menu
On some platforms, the draggable area would be treated as non-client frame, so
when you right click on it a system menu would be popuped. To make context menu
behave correctly on all platforms, you should never custom context menu on
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
draggable areas.