electron “-webkit-app-region：拖动”只对标题栏的一部分起作用

vkc1a9a2 于 2023-10-14 发布在 Electron

关注(0)|答案(1)|浏览(126)

我正在为我的electron应用程序构建一个自定义标题栏，并试图使用-webkit-app-region: drag使其可拖动。
我只能拖动标题栏的一部分。左边（绿色箭头）的所有内容都是可拖动的，右边（红色箭头）的所有内容都不是。有什么办法可以解决这个问题吗？

下面是我的标题栏的代码（我使用tailwindcss）：

<div className="flex justify-between items-center h-8 p-0 fixed top-0 left-0 w-screen max-w-screen bg-gray-100 :user-select-none :app-region-drag">
  <div className="flex items-center gap-2 h-full w-full pl-2">
    <img src={favicon} className="w-5 h-5" alt="app-logo" />
    <h1>App Name</h1>
  </div>
  <div className="flex items-center h-full">
    {maximized ? (
      <ContractButton onClick={handleMaximizeToggle} />
    ) : (
      <MaximizeButton onClick={handleMaximizeToggle} />
    )}
    <MinimizeButton onClick={app.minimize} />
    <CloseButton onClick={app.quit} />
  </div>
</div>

electron

来源：https://stackoverflow.com/questions/77208999/webkit-app-region-drag-is-only-works-on-a-portion-of-the-titlebar

1条答案

按热度按时间

ecbunoof1#

嗯，我不明白为什么它不能与tailwindcss一起工作，但是添加这个有我想要的功能。

App.css

/* Click titlebar to drag app window */
body section#titlebar {
  -webkit-app-region: drag;
  -webkit-user-select: none;
  user-select: none;
}

body section#titlebar button {
  -webkit-app-region: no-drag;
}

新建标题栏

<div id="titlebar" className="flex justify-between items-center h-8 p-0 fixed top-0 left-0 w-screen max-w-screen bg-gray-100">
  <div className="flex items-center gap-2 h-full w-full pl-2">
    <img src={favicon} className="w-5 h-5" alt="app-logo" />
    <h1>App Name</h1>
  </div>
  <div className="flex items-center h-full">
    {maximized ? (
      <ContractButton onClick={handleMaximizeToggle} />
    ) : (
      <MaximizeButton onClick={handleMaximizeToggle} />
    )}
    <MinimizeButton onClick={app.minimize} />
    <CloseButton onClick={app.quit} />
  </div>
</div>

赞(0）回复(0）举报 2023-10-14

我来回答

electron “-webkit-app-region：拖动”只对标题栏的一部分起作用

1条答案

相关问题

热门标签

最新问答