feat: support more color formats for backgroundColor
(#31868)
This commit is contained in:
parent
4b8b492b62
commit
db79734bfb
13 changed files with 144 additions and 55 deletions
|
@ -70,5 +70,31 @@ The `bounds` of this BrowserView instance as `Object`.
|
|||
|
||||
#### `view.setBackgroundColor(color)` _Experimental_
|
||||
|
||||
* `color` string - Color in `#aarrggbb` or `#argb` form. The alpha channel is
|
||||
optional.
|
||||
* `color` string - Color in Hex, RGB, ARGB, HSL, HSLA or named CSS color format. The alpha channel is
|
||||
optional for the hex type.
|
||||
|
||||
Examples of valid `color` values:
|
||||
|
||||
* Hex
|
||||
* #fff (RGB)
|
||||
* #ffff (ARGB)
|
||||
* #ffffff (RRGGBB)
|
||||
* #ffffffff (AARRGGBB)
|
||||
* RGB
|
||||
* rgb\(([\d]+),\s*([\d]+),\s*([\d]+)\)
|
||||
* e.g. rgb(255, 255, 255)
|
||||
* RGBA
|
||||
* rgba\(([\d]+),\s*([\d]+),\s*([\d]+),\s*([\d.]+)\)
|
||||
* e.g. rgba(255, 255, 255, 1.0)
|
||||
* HSL
|
||||
* hsl\((-?[\d.]+),\s*([\d.]+)%,\s*([\d.]+)%\)
|
||||
* e.g. hsl(200, 20%, 50%)
|
||||
* HSLA
|
||||
* hsla\((-?[\d.]+),\s*([\d.]+)%,\s*([\d.]+)%,\s*([\d.]+)\)
|
||||
* e.g. hsla(200, 20%, 50%, 0.5)
|
||||
* Color name
|
||||
* Options are listed in [SkParseColor.cpp](https://source.chromium.org/chromium/chromium/src/+/main:third_party/skia/src/utils/SkParseColor.cpp;l=11-152;drc=eea4bf52cb0d55e2a39c828b017c80a5ee054148)
|
||||
* Similar to CSS Color Module Level 3 keywords, but case-sensitive.
|
||||
* e.g. `blueviolet` or `red`
|
||||
|
||||
**Note:** Hex format with alpha takes `AARRGGBB` or `ARGB`, _not_ `RRGGBBA` or `RGA`.
|
||||
|
|
|
@ -66,6 +66,18 @@ win.loadURL('https://github.com')
|
|||
Note that even for apps that use `ready-to-show` event, it is still recommended
|
||||
to set `backgroundColor` to make the app feel more native.
|
||||
|
||||
Some examples of valid `backgroundColor` values include:
|
||||
|
||||
```js
|
||||
const win = new BrowserWindow()
|
||||
win.setBackgroundColor('hsl(230, 100%, 50%)')
|
||||
win.setBackgroundColor('rgb(255, 145, 145)')
|
||||
win.setBackgroundColor('#ff00a3')
|
||||
win.setBackgroundColor('blueviolet')
|
||||
```
|
||||
|
||||
For more information about these color types see valid options in [win.setBackgroundColor](browser-window.md#winsetbackgroundcolorbackgroundcolor).
|
||||
|
||||
## Parent and child windows
|
||||
|
||||
By using `parent` option, you can create child windows:
|
||||
|
@ -199,9 +211,7 @@ It creates a new `BrowserWindow` with native properties as set by the `options`.
|
|||
* `enableLargerThanScreen` boolean (optional) - Enable the window to be resized larger
|
||||
than screen. Only relevant for macOS, as other OSes allow
|
||||
larger-than-screen windows by default. Default is `false`.
|
||||
* `backgroundColor` string (optional) - Window's background color as a hexadecimal value,
|
||||
like `#66CD00` or `#FFF` or `#80FFFFFF` (alpha in #AARRGGBB format is supported if
|
||||
`transparent` is set to `true`). Default is `#FFF` (white).
|
||||
* `backgroundColor` string (optional) - The window's background color in Hex, RGB, RGBA, HSL, HSLA or named CSS color format. Alpha in #AARRGGBB format is supported if `transparent` is set to `true`. Default is `#FFF` (white). See [win.setBackgroundColor](browser-window.md#winsetbackgroundcolorbackgroundcolor) for more information.
|
||||
* `hasShadow` boolean (optional) - Whether window should have a shadow. Default is `true`.
|
||||
* `opacity` number (optional) - Set the initial opacity of the window, between 0.0 (fully
|
||||
transparent) and 1.0 (fully opaque). This is only implemented on Windows and macOS.
|
||||
|
@ -992,12 +1002,33 @@ APIs like `win.setSize`.
|
|||
|
||||
#### `win.setBackgroundColor(backgroundColor)`
|
||||
|
||||
* `backgroundColor` string - Window's background color as a hexadecimal value,
|
||||
like `#66CD00` or `#FFF` or `#80FFFFFF` (alpha is supported if `transparent`
|
||||
is `true`). Default is `#FFF` (white).
|
||||
* `backgroundColor` string - Color in Hex, RGB, RGBA, HSL, HSLA or named CSS color format. The alpha channel is optional for the hex type.
|
||||
|
||||
Sets the background color of the window. See [Setting
|
||||
`backgroundColor`](#setting-the-backgroundcolor-property).
|
||||
Examples of valid `backgroundColor` values:
|
||||
|
||||
* Hex
|
||||
* #fff (shorthand RGB)
|
||||
* #ffff (shorthand ARGB)
|
||||
* #ffffff (RGB)
|
||||
* #ffffffff (ARGB)
|
||||
* RGB
|
||||
* rgb\(([\d]+),\s*([\d]+),\s*([\d]+)\)
|
||||
* e.g. rgb(255, 255, 255)
|
||||
* RGBA
|
||||
* rgba\(([\d]+),\s*([\d]+),\s*([\d]+),\s*([\d.]+)\)
|
||||
* e.g. rgba(255, 255, 255, 1.0)
|
||||
* HSL
|
||||
* hsl\((-?[\d.]+),\s*([\d.]+)%,\s*([\d.]+)%\)
|
||||
* e.g. hsl(200, 20%, 50%)
|
||||
* HSLA
|
||||
* hsla\((-?[\d.]+),\s*([\d.]+)%,\s*([\d.]+)%,\s*([\d.]+)\)
|
||||
* e.g. hsla(200, 20%, 50%, 0.5)
|
||||
* Color name
|
||||
* Options are listed in [SkParseColor.cpp](https://source.chromium.org/chromium/chromium/src/+/main:third_party/skia/src/utils/SkParseColor.cpp;l=11-152;drc=eea4bf52cb0d55e2a39c828b017c80a5ee054148)
|
||||
* Similar to CSS Color Module Level 3 keywords, but case-sensitive.
|
||||
* e.g. `blueviolet` or `red`
|
||||
|
||||
Sets the background color of the window. See [Setting `backgroundColor`](#setting-the-backgroundcolor-property).
|
||||
|
||||
#### `win.previewFile(path[, displayName])` _macOS_
|
||||
|
||||
|
@ -1041,8 +1072,11 @@ Returns [`Rectangle`](structures/rectangle.md) - The `bounds` of the window as `
|
|||
|
||||
#### `win.getBackgroundColor()`
|
||||
|
||||
Returns `string` - Gets the background color of the window. See [Setting
|
||||
`backgroundColor`](#setting-the-backgroundcolor-property).
|
||||
Returns `string` - Gets the background color of the window in Hex (`#RRGGBB`) format.
|
||||
|
||||
See [Setting `backgroundColor`](#setting-the-backgroundcolor-property).
|
||||
|
||||
**Note:** The alpha value is _not_ returned alongside the red, green, and blue values.
|
||||
|
||||
#### `win.setContentBounds(bounds[, animate])`
|
||||
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue