如何自定义Electron应用程序的窗口 Headers 栏？

2 回答

• 15

  第一个跨平台选项是创建frameless window . 第二个是macOS，允许你隐藏 Headers 栏，但保留窗口控件，允许添加自定义按钮 . 例：

  const { BrowserWindow } = require('electron')
  
  // This will create a window without titlebar, allowing for customization
  let win = new BrowserWindow({ titleBarStyle: 'hidden' })
  win.show()
  

  然后，您可以使用css属性 -webkit-user-select 和 -webkit-app-region 指定拖动区域 .

  回复于 2024-05-01T10:48:14+08:00
• 16

  你在Electron中唯一的选择就是创建一个frameless（又名无边界）窗口，然后用CSS创建一个"fake" Headers 栏，包括你需要的任何UI元素 .

  Electron / webkit提供了CSS属性，允许您使任何元素可拖动，如 Headers 栏：

  .titlebar {
    -webkit-user-select: none;
    -webkit-app-region: drag;
  }
  

  回复于 2024-05-01T10:48:14+08:00