electron 无边框 设置阴影 且最大化时没有边距
时间: 2023-10-04 13:04:10 浏览: 73
您好!关于您的问题,可以通过以下方式实现:
1. 无边框窗口
在创建 BrowserWindow 时,可以设置 frame 为 false,实现无边框窗口。
```js
const { BrowserWindow } = require('electron')
let win = new BrowserWindow({
width: 800,
height: 600,
frame: false
})
```
2. 设置阴影
可以使用 CSS 的 box-shadow 属性,实现窗口阴影效果。
```css
body {
-webkit-app-region: drag;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
```
3. 最大化时没有边距
可以在创建 BrowserWindow 时,设置 autoHideMenuBar 和 titleBarStyle 为 true,实现最大化时没有边距的效果。
```js
const { BrowserWindow } = require('electron')
let win = new BrowserWindow({
width: 800,
height: 600,
autoHideMenuBar: true,
titleBarStyle: 'hidden'
})
```
希望以上内容能够解决您的问题,如有疑问请随时追问。
相关问题
electron 无边框 加阴影效果
你可以使用`electron`的`BrowserWindow`对象的`frame`属性设置为`false`来去掉窗口边框,然后使用`CSS`为窗口添加阴影效果。具体的实现代码如下:
```javascript
const { BrowserWindow } = require('electron');
let win = new BrowserWindow({
width: 800,
height: 600,
frame: false, // 去掉窗口边框
webPreferences: {
nodeIntegration: true
}
});
win.webContents.on('did-finish-load', () => {
win.webContents.insertCSS(`
/* 添加阴影效果 */
body {
-webkit-app-region: drag;
-webkit-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5);
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5);
}
`);
});
win.loadFile('index.html');
```
这样,你的`electron`窗口就会没有边框并且有阴影效果了。
electron 无边框模式 加阴影效果
要在 Electron 中实现无边框模式和阴影效果,您可以使用 CSS 样式来自定义窗口外观。以下是一个示例:
```css
/* 隐藏窗口边框 */
#my-window {
-webkit-app-region: no-drag;
-webkit-user-select: none;
}
/* 添加阴影效果 */
#my-window {
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}
```
在上面的示例中,我们使用 `-webkit-app-region: no-drag;` 样式来隐藏窗口边框,使其看起来像是没有边框的窗口。我们还使用 `box-shadow` 样式来添加阴影效果。
请注意,使用 `-webkit-app-region: no-drag;` 样式会禁用窗口的拖动功能,因此您需要在窗口中添加自定义拖动逻辑。
此外,您还可以使用 Electron 的 `BrowserWindow` API 来控制窗口的外观和行为。例如,您可以使用 `setHasShadow` 方法来启用或禁用窗口阴影效果:
```js
const { BrowserWindow } = require('electron')
const myWindow = new BrowserWindow({
width: 800,
height: 600,
frame: false
})
myWindow.setHasShadow(true)
```
在上面的示例中,我们创建了一个没有边框的窗口,并使用 `setHasShadow` 方法启用了阴影效果。请注意,`setHasShadow` 方法需要在创建窗口后立即调用。