|
Size: 2857
Comment:
|
← Revision 10 as of 2025-12-19 20:30:38 ⇥
Size: 590
Comment: Cleanup
|
| Deletions are marked like this. | Additions are marked like this. |
| Line 2: | Line 2: |
'''`electron(1)`''' is a framework for Node application. |
|
| Line 9: | Line 11: |
| == electron-store == | == Installation == |
| Line 11: | Line 13: |
| A simple data persistence solution for Electron apps, using minimal dependencies. It writes to `config.json` in `app.getPath('userData')`. If the renderer needs access to the store, try: |
Using `npm(1)`: |
| Line 16: | Line 16: |
| const win = new BrowserWindow({ enableRemoteModule: true }) | npm install --save-dev electron |
| Line 23: | Line 23: |
| == Menu Bar == | == Tool Chain == |
| Line 25: | Line 25: |
| The menu bar is composed of menus and sub-menus. Design a 'template' (see below) and have it built into a menu, then apply the menu to the application. {{{ const template = [ { label: 'File', submenu: [ { label: 'Exit', click() { app.quit() } } ] }, { label: 'Help', submenu: [ { label: 'Learn More', click: async () => { await shell.openExternal('https://example.org'); } } ] } ]; const menu = Menu.buildFromTemplate(template); Menu.setApplicationMenu(menu); }}} The above example features two ways to define the corresponding action for a menu item, and it also demonstrates how an async function can be used. |
* [[Node/ElectronBuilder|electron-builder]] |
| Line 60: | Line 28: |
| == APIs == | |
| Line 61: | Line 30: |
| === Platform-Specific Menus === Using conditional logic and array unpacking, platform-specific menus can be maintained in the same codebase. {{{ const isMac = process.platform === 'darwin'; const template = [ ...(isMac ? [{ label: app.name, submenu: [ { role: 'about' }, { role: 'quit' } ] }] : []), { label: 'File', submenu: [ isMac ? { role: 'close' } : { role: 'quit' } ] } ]; }}} ---- == Keyboard Shortcuts == === Built-in Method === Follow the above example for menu items, but add an `accelerator` option to the corresponding menu item. {{{ const template = [ { label: 'File', submenu: [ { label: 'Save', accelerator: 'CmdOrCtrl+S', click: saveFile() } ] } ] }}} === electron-localshortcut === A simpler method is to use the `electron-localshortcut` package. {{{ const shortcut = require("electron-shortcut"); shortcut.register(win, "CmdOrCtrl+S", () => { saveFile(); }); }}} === Platform-Specific Shortcuts === Apople computers famously have a different keyboard. Unfortunately, those end users will expect the Command key to work like the Control key for everyone else. The helper modifier `CmdOrCtrl` exists to simplify this need as shown in the above examples. Nonetheless, it is possible to re-invent the wheel. {{{ const isMac = process.platform === 'darwin'; const template = [ { label: 'File', submenu: [ { role: 'Save File', accelerator: isMac ? 'Cmd+S' : 'Ctrl+S', click: saveFile() } ] } ] }}} |
* [[Node/Electron/App|app]] * [[Node/Electron/BrowserWindow|BrowserWindow]] * [[Node/Electron/Dialog|dialog]] * [[Node/Electron/IpcMain|ipcMain]] * [[Node/Electron/IpcRenderer|ipcRenderer]] * [[Node/Electron/Menu|Menu]] * [[Node/Electron/Shell|shell]] |
Electron
electron(1) is a framework for Node application.
Contents
Installation
Using npm(1):
npm install --save-dev electron
Tool Chain