Electron 1.0でコンテキストメニュー
Electronでのコンテキストメニュー(右クリックで現れるメニューのやつ)の色々を忘れないようにメモ。
こちらを参考に実装。
electron/menu.md at master · electron/electron · GitHub
環境
module | version |
---|---|
node | v6.1.0 |
electron | 1.2.2 |
構成
app
├── index.html
├── main.js
└── package.json
index.htmlは最低限のもので。
index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>App</title>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
<link rel="shortcut icon" href="">
</head>
<body>
<div>
<h1>Sample App</h1>
</div>
<script>
//ここにスクリプトを追加
</script>
</body>
</html>
script
const remote = require('electron').remote;
const Menu = remote.Menu;
const MenuItem = remote.MenuItem;
var menu = new Menu();
menu.append(new MenuItem({ label: 'MenuItem1', click: function() { console.log('item 1 clicked'); } }));
menu.append(new MenuItem({ type: 'separator' }));
menu.append(new MenuItem({ label: 'MenuItem2', type: 'checkbox', checked: true }));
window.addEventListener('contextmenu', function (e) {
e.preventDefault();
menu.popup(remote.getCurrentWindow());
}, false);
コンテキストメニューの色々
- サブメニュー
submenu
menu.append(new MenuItem({
label: 'サブメニュー一覧',
submenu: [
{
label: 'サブメニュー1'
},
{
label: 'サブメニュー2'
}
]
}));
- チェックボックス
checkbox
menu.append(new MenuItem({
label: 'チェックボックス',
type: 'checkbox',
checked: true,// 初期値
click: function(e) {
console.log(e.checked);// チェックされたかどうか
}
}));
- ラジオ
radio
menu.append(new MenuItem({
label: 'OK',
type: 'radio',
click: function(e) {
console.log(e.checked)
}
}));
menu.append(new MenuItem({
label: 'NG',
type: 'radio',
click: function(e) {
console.log(e.checked)
}
}));
- ラジオ(サブメニュー)
radio(submenu)
menu.append(new MenuItem({
label: 'ラジオ(サブメニュー)',
submenu: [
{
label: 'ラジオ(サブメニュー)1',
type: 'radio',
click: function(e) {
console.log(e.checked)
}
},{
label: 'ラジオ(サブメニュー)2',
type: 'radio',
click: function(e) {
console.log(e.checked)
}
}
],
}));
- オプションの色々(抜けてたり、間違っているかもしれませんが。。。)
キー名 | 名前 | 例 | 補足 |
---|---|---|---|
label | ラベル | コピー | |
sublabel | サブラベル | copy | |
icon | アイコン | icon.png | サイズの指定は出来ない・・・? |
accelerator | ショートカットキーの割り当て | Ctrl+C | |
type | タイプ | checkbox | noraml, checkbox, separator, submenu, radio |
enabled | 有効/無効 | false | |
visible | 表示 | true | |
submenu | サブメニュー | [{label: 'submenu'}] | |
click | クリック | クリックされた際の挙動 |
よくある機能
コピーや貼り付けなどよくある機能はデフォルトで用意されている。
roleにcopyやpasteをセットする。
script
menu.append(new MenuItem({
label: 'コピー',
accelerator: 'CmdOrCtrl+C',
role: 'copy'
}));
menu.append(new MenuItem({
label: '貼り付け',
accelerator: 'CmdOrCtrl+V',
role: 'paste'
}));
とりあえずで書いたので後で整理しよう。。。
今回のソースはこちらに。