gpt4 book ai didi

css - 如何删除/使用 photonkit 的标题栏?

转载 作者:太空宇宙 更新时间:2023-11-04 10:45:58 26 4
gpt4 key购买 nike

我正在使用 photonkit.com 构建应用程序,并且发生了这种情况:

Double head bar issue screenshot

如您所见,标题栏很丑。网络上的示例不多(没有),也没有在 Github 页面上找到问题。

解决方案可能是:

  • 停用应用程序标题栏(那么我们如何处理退出-最小化-最大化按钮?)
  • 或者将顶部栏的颜色更改为其他颜色,这样它看起来就不会重复。

我在问开发人员是否已经有了解决方案。

这是 HTML:

<!DOCTYPE html>
<html>

<head>
<title>Photon</title>

<!-- Stylesheets -->
<link rel="stylesheet" href="css/photon.min.css">

<!-- Javascript -->
<script src="js/menu.js" charset="utf-8"></script>
</head>

<body>
<div class="window">

<header class="toolbar toolbar-header">
<div class="toolbar-actions">
<div class="btn-group">
<button class="btn btn-default">
<span class="icon icon-home"></span>
</button>
<button class="btn btn-default">
<span class="icon icon-folder"></span>
</button>
<button class="btn btn-default active">
<span class="icon icon-cloud"></span>
</button>
<button class="btn btn-default">
<span class="icon icon-popup"></span>
</button>
<button class="btn btn-default">
<span class="icon icon-shuffle"></span>
</button>
</div>

<button class="btn btn-default">
<span class="icon icon-home icon-text"></span>
Filters
</button>

<button class="btn btn-default btn-dropdown pull-right">
<span class="icon icon-megaphone"></span>
</button>
</div>
</header>

<!-- Your app's content goes inside .window-content -->
<div class="window-content">
<div class="pane-group">
<div class="pane pane-sm sidebar">
<nav class="nav-group">
<h5 class="nav-group-title">Favorites</h5>
<span class="nav-group-item">
<span class="icon icon-home"></span> connors
</span>
<span class="nav-group-item active">
<span class="icon icon-light-up"></span> Photon
</span>
<span class="nav-group-item">
<span class="icon icon-download"></span> Downloads
</span>
<span class="nav-group-item">
<span class="icon icon-folder"></span> Documents
</span>
<span class="nav-group-item">
<span class="icon icon-window"></span> Applications
</span>
<span class="nav-group-item">
<span class="icon icon-signal"></span> AirDrop
</span>
<span class="nav-group-item">
<span class="icon icon-monitor"></span> Desktop
</span>
</nav>
</div>

<div class="pane">
<table class="table-striped">
<thead>
<tr>
<th>Name</th>
<th>Kind</th>
<th>Date Modified</th>
<th>Author</th>
</tr>
</thead>
<tbody>
<tr>
<td>bars.scss</td>
<td>Document</td>
<td>Oct 13, 2015</td>
<td>connors</td>
</tr>
<tr>
<td>base.scss</td>
<td>Document</td>
<td>Oct 13, 2015</td>
<td>connors</td>
</tr>
<tr>
<td>button-groups.scss</td>
<td>Document</td>
<td>Oct 13, 2015</td>
<td>connors</td>
</tr>
<tr>
<td>buttons.scss</td>
<td>Document</td>
<td>Oct 13, 2015</td>
<td>connors</td>
</tr>
<tr>
<td>docs.scss</td>
<td>Document</td>
<td>Oct 13, 2015</td>
<td>connors</td>
</tr>
<tr>
<td>forms.scss</td>
<td>Document</td>
<td>Oct 13, 2015</td>
<td>connors</td>
</tr>
<tr>
<td>grid.scss</td>
<td>Document</td>
<td>Oct 13, 2015</td>
<td>connors</td>
</tr>
<tr>
<td>icons.scss</td>
<td>Document</td>
<td>Oct 13, 2015</td>
<td>connors</td>
</tr>
<tr>
<td>images.scss</td>
<td>Document</td>
<td>Oct 13, 2015</td>
<td>connors</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>

</div>
</body>

</html>

最佳答案

根据 [electron docs][1],您可以在 app.js 上使用此选项:

On Mac OS X 10.10 Yosemite and newer, there's an alternative way to specify a chromeless window. Instead of setting frame to false which disables both the titlebar and window controls, you may want to have the title bar hidden and your content extend to the full window size, yet still preserve the window controls ("traffic lights") for standard window actions. You can do so by specifying the new titleBarStyle option:

var win = new BrowserWindow({ 'titleBarStyle': 'hidden' });

这将是理想的解决方案。

关于css - 如何删除/使用 photonkit 的标题栏?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35399378/

26 4 0