Question

我使用photonkit.com构建应用程序，这种情况正在发生：

如您所见，标题栏很难看。网上没有很多例子（无），也没有在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>

Answer 1

根据[电子文档] [1]，您可以在app.js上使用此选项：

在Mac OS X 10.10 Yosemite和更新版本上，还有另一种指定无边框窗口的方法。您可能希望隐藏标题栏并将内容扩展到完整的窗口大小，但仍保留标准窗口操作的窗口控件（“交通灯”），而不是将框架设置为false以禁用标题栏和窗口控件。。您可以通过指定新的titleBarStyle选项来执行此操作：

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

这将是理想的解决方案。

Answer 2

事实证明他使用带有线性渐变的背景图像，因此在使用自定义设计之前，您必须覆盖（background-image: none）这些线条。

你也可以在光子中评论那些（在.toolbar下）行。（分钟）css

如何使用photonkit删除/使用标题栏？

2 个答案: