Help us understand the problem. What is going on with this article?

electron-tabsの紹介

More than 1 year has passed since last update.

electron-tabsの紹介

electron-tabsとは

npmパッケージで、electronでタブ機能を簡単に追加することができます。
https://www.npmjs.com/package/electron-tabs
タブ機能を1から実装するのは面倒ですが、このパッケージを使うことで簡単にタブ機能を実装できます。

実装方法

npm install electron-tabs
インストールはこれで済みます

index.html
<div class="etabs-tabgroup">
    <div class="etabs-tabs"></div>
    <div class="etabs-buttons"></div>
</div>
<div class="etabs-views"></div>

index.html(electronで指定したファイル)の好きなところに配置してください

tab.js
const TabGroup = require("electron-tabs");

let tabGroup = new TabGroup();
let tab = tabGroup.addTab({
    title: "Electron",
    src: "http://electron.atom.io",
    visible: true
});

これだけでタブを一つ追加できます
srcのurlを変えると表示するページを変更できます
addTabのオプションは下で解説してます

addTabのオプション解説

ここではよく使うオプションを数個解説します
全オプション一覧はリファレンスを読んでみてください
title タブのタイトル
src タブにロードされるURL webページやローカルファイル
iconURL タブのアイコン
webviewAttributes electronのwebviewの属性を指定できる webviewの属性を参照
active タブを最初からアクティブ状態にできる

実装例

test.htmlを表示してtest.jsをロードする場合

tab.js
const TabGroup = require("electron-tabs");

let tabGroup = new TabGroup();
let tab = tabGroup.addTab({
    title: "testPage",
    src: "test.html",
    visible: true,
    webviewAttributes:{
        preload : "test.js"
    },
});

OK_im_fine_now
pythonとtwitterapiでbotを作るのがすき
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away