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

docs: add custom titlebar example (#44506)

Browse source 
* docs: add custom titlebar example

* docs: add links and other small edits

* docs: add panel window docs

* docs: remove panel example

* docs: specify expected emphasis style

* docs: responding to feedback

* docs: fix section names in links

* docs: rework baseWindow note

* docs: making window customization its own section

* responding to feedback

Co-authored-by: trop[bot] <37223003+trop[bot]@users.noreply.github.com>
Co-authored-by: Anny Yang <anny@electronjs.org>
This commit is contained in:
trop[bot] 2024-11-01 12:47:51 -05:00 • committed by GitHub
parent 39d29a1d2e
commit 5498eaa29d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
22 changed files with 533 additions and 267 deletions
Download patch file Download diff file Expand all files Collapse all files

49
docs/tutorial/custom-window-styles.md Normal file
View file

@ -0,0 +1,49 @@
# Custom Window Styles
## Frameless windows
![Frameless Window](../images/frameless-window.png)
A frameless window removes all [chrome][] applied by the OS, including window controls.
To create a frameless window, set the [`BaseWindowContructorOptions`][] `frame` param in the `BrowserWindow` constructor to `false`.
```fiddle docs/fiddles/features/window-customization/custom-window-styles/frameless-windows
```
## Transparent windows
![Transparent Window](../images/transparent-window.png)
![Transparent Window in macOS Mission Control](../images/transparent-window-mission-control.png)
To create a fully transparent window, set the [`BaseWindowContructorOptions`][] `transparent` param in the `BrowserWindow` constructor to `true`.
The following fiddle takes advantage of a tranparent window and CSS styling to create
the illusion of a circular window.
```fiddle docs/fiddles/features/window-customization/custom-window-styles/transparent-windows
```
### Limitations
* You cannot click through the transparent area. See
[#1335](https://github.com/electron/electron/issues/1335) for details.
* Transparent windows are not resizable. Setting `resizable` to `true` may make
a transparent window stop working on some platforms.
* The CSS [`blur()`][] filter only applies to the window's web contents, so there is
no way to apply blur effect to the content below the window (i.e. other applications
open on the user's system).
* The window will not be transparent when DevTools is opened.
* On _Windows_:
* Transparent windows will not work when DWM is disabled.
* Transparent windows can not be maximized using the Windows system menu or by double
clicking the title bar. The reasoning behind this can be seen on
PR [#28207](https://github.com/electron/electron/pull/28207).
* On _macOS_:
* The native window shadow will not be shown on a transparent window.
[`BaseWindowContructorOptions`]: ../api/structures/base-window-options.md
[`blur()`]: https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/blur()
[chrome]: https://developer.mozilla.org/en-US/docs/Glossary/Chrome