electron-tabsの紹介
electron-tabsの紹介
electron-tabsとは
npmパッケージで、electronでタブ機能を簡単に追加することができます。
https://www.npmjs.com/package/electron-tabs
タブ機能を1から実装するのは面倒ですが、このパッケージを使うことで簡単にタブ機能を実装できます。
実装方法
npm install electron-tabs
インストールはこれで済みます
<div class="etabs-tabgroup">
<div class="etabs-tabs"></div>
<div class="etabs-buttons"></div>
</div>
<div class="etabs-views"></div>
index.html(electronで指定したファイル)の好きなところに配置してください
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をロードする場合
const TabGroup = require("electron-tabs");
let tabGroup = new TabGroup();
let tab = tabGroup.addTab({
title: "testPage",
src: "test.html",
visible: true,
webviewAttributes:{
preload : "test.js"
},
});
Author And Source
この問題について(electron-tabsの紹介), 我々は、より多くの情報をここで見つけました https://qiita.com/OK_im_fine_now/items/3eb5d241dc0213092171著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .