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

Question

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

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

Answer 1

发现了这个东西.文档非常简陋.但是当你研究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.

其他替代方案是使用电子标签.但是当我尝试使用它时,它在我调用时在javascript中创建了两个选项卡tabGroup.addTab().所以我不推荐它.

Answer 2

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