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

doc: Document frameless window.

Browse source
This commit is contained in:
Cheng Zhao 2013-09-09 14:52:46 +08:00
parent cc62978ac3
commit 8caf5fac06
2 changed files with 68 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
docs/browser-window.md
View file

@ -15,6 +15,10 @@ win.loadUrl('https://github.com');
win.show(); win.show();
``` ```
You can also create a window without chrome by using
[Frameless Window](frameless-window.md) API.
**Note:** Be careful not to use `window` as the variable name. **Note:** Be careful not to use `window` as the variable name.
## Class: BrowserWindow ## Class: BrowserWindow
@ -38,6 +42,8 @@ win.show();
* `kiosk` Boolean - The kiosk mode * `kiosk` Boolean - The kiosk mode
* `title` String - Default window title * `title` String - Default window title
* `show` Boolean - Whether window should be shown when created * `show` Boolean - Whether window should be shown when created
* `frame` Boolean - Specify `false` to create a
[Frameless Window](frameless-window.md)
Creates a new `BrowserWindow` with native properties set by the `options`. Creates a new `BrowserWindow` with native properties set by the `options`.
Usually you only need to set the `width` and `height`, other properties will Usually you only need to set the `width` and `height`, other properties will

62
docs/frameless-window.md Normal file
View file

@ -0,0 +1,62 @@
A frameless window is a window that has no chrome.
## Create a frameless window
To create a frameless window, you only need to specify `frame` to `false` in
[BrowserWindow](browser-window.md)'s `options`:
```javascript
var BrowserWindow = require('browser-window');
var win = new BrowserWindow({ width: 800, height: 600, frame: false });
```
## Draggable region
By default, the frameless window is non-draggable. Apps need to specify
`-webkit-app-region: drag` in CSS to tell atom-shell 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.
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;
}
```
If you're only using a custom titlebar, you also need to make 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:
```css
.titlebar {
-webkit-user-select: none;
-webkit-app-region: drag;
}
```
##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
draggable areas.