docs: add custom titlebar example (#44506)
* 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:
parent
39d29a1d2e
commit
5498eaa29d
22 changed files with 533 additions and 267 deletions
49
docs/tutorial/custom-window-styles.md
Normal file
49
docs/tutorial/custom-window-styles.md
Normal file
|
@ -0,0 +1,49 @@
|
|||
# Custom Window Styles
|
||||
|
||||
## Frameless windows
|
||||
|
||||

|
||||
|
||||
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
|
||||
|
||||

|
||||

|
||||
|
||||
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
|
Loading…
Add table
Add a link
Reference in a new issue