修改

Question

我正在使用Github Electron制作桌面应用程序，并想知道如何制作像标签一样的Chrome。

就像我们打开任何浏览器或者说chrome一样，我们可以在同一个窗口中添加创建新标签，同样我希望在我的桌面应用程序中完成。我深入研究电子文档和社区包，但一无所获。

Answer 1

找到this thing。文档非常简陋。但是当你查看index.html时，它很容易。只需加上

<div class="chrome-tabs">
    <div class="chrome-tabs-content"></div>
    <div class="chrome-tabs-bottom-bar"></div>
</div>

和javascript：

var el = document.querySelector('.chrome-tabs');
var chromeTabs = new ChromeTabs();
chromeTabs.init(el, { tabOverlapDistance: 14, minWidth: 45, maxWidth: 243 });

已经完成了。

修改

其他信息

要使用chrome-tabs，您需要包含draggabilly和chrome-tabs：

<script src="https://unpkg.com/draggabilly@2.1.1/dist/draggabilly.pkgd.min.js"></script>
<script src="js/chrome-tabs.js"></script>

您可能对其他事件监听器感兴趣：

el.addEventListener('activeTabChange', ({ detail }) => console.log('Active tab changed', detail.tabEl))
el.addEventListener('tabAdd', ({ detail }) => console.log('Tab added', detail.tabEl))
el.addEventListener('tabRemove', ({ detail }) => console.log('Tab removed', detail.tabEl))

编辑结束

添加标签：

chromeTabs.addTab({
      title: 'New Tab',
      favicon: 'demo/images/default-favicon.png'
    });

删除标签：

chromeTabs.removeTab(el.querySelector('.chrome-tab-current'));

但是你需要手动编写内容面板（可能是webview元素）及其css。

其他替代方法是使用electron-tabs。但是当我尝试使用它时，当我调用tabGroup.addTab()时，它在javascript中创建了两个选项卡。所以我不推荐它。

Answer 2

var shell = require('electron').shell;
event.preventDefault();
shell.openExternal('https://github.com');

如何在Electron上创建类似Chrome的标签

2 个答案:

修改

其他信息

编辑结束