So erstellen wie chrome tab auf Elektron

Ich mache eine desktop-Anwendung mit Github Elektron, und wollen wissen, wie kann ich chrome wie tabs.

So, wie wenn wir öffnen Sie eine beliebige browser oder lassen Sie sagen, chrome, wir können hinzufügen, erstellen Sie neue Registerkarte auf dem gleichen Fenster, ebenfalls möchte ich dies in meinem desktop-app. Ich Grabe auf Elektronen-doc ' s und community Pakete, aber nichts zu finden.

InformationsquelleAutor Ravindra Barthwal | 2016-07-08
  1. 6

    Gefunden dieses Ding. Die Dokumentation ist erstaunlich scarse. Aber, wenn man sich in die index.html es ist ganz einfach.
    Setzen Sie einfach

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

    Und die javascript:

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

    Fertig.

    BEARBEITEN

    Zusätzliche Informationen

    Verwenden chrome-tabs, die Sie brauchen, um draggabilly und chrome-Registerkarten:

    <script src="https://unpkg.com/[email protected]/dist/draggabilly.pkgd.min.js"></script>
<script src="js/chrome-tabs.js"></script>

    Und Sie könnten daran interessiert sein, zusätzliche event-listener:

    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))

    ENDE BEARBEITEN

    Hinzufügen Registerkarte:

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

    Entfernen Registerkarte:

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

    Aber Sie müssen code die content-panel (wahrscheinlich webview-element) und dessen css manuell.

    Andere alternative ist die Verwendung Elektron-tabs. Aber als ich versuchte, es zu verwenden, erstellt es zwei Registerkarten, die in der javascript-wenn ich rufe tabGroup.addTab(). Also ich kann es nicht empfehlen.

    InformationsquelleAutor Fandi Susanto
  2. 0
    var shell = require('electron').shell;
event.preventDefault();
shell.openExternal('https://github.com');
    • Barthwal Webking, ich habe dieses, ich habe auch die Verkleidung selbe problem, das konnte nicht machen es
    • so können Sie aktualisieren Sie Ihren code zu öffnen neue Registerkarte im browser-Fenster ?
    InformationsquelleAutor batMan007
Schreibe einen Kommentar