Menu and MenuItem modules can be used to
- create custom native menus.
- - There are two kinds of menus: the application (top) menu and context - (right-click) menu. -
- -- Open the - full API documentation(opens in new window) - in your browser. -
-
- The Menu and MenuItem modules allow you to
- customize your application menu. If you don't set any menu, Electron
- will generate a minimal menu for your app by default.
-
- If you click the 'View' option in the application menu and then the - 'App Menu Demo', you'll see an information box displayed. -
- -- When designing an app for multiple operating systems it's - important to be mindful of the ways application menu conventions - differ on each operating system. -
-
- For instance, on Windows, accelerators are set with an
- &. Naming conventions also vary, like between
- "Settings" or "Preferences". Below are resources for learning
- operating system specific standards.
-
- A context, or right-click, menu can be created with the
- Menu and MenuItem modules as well. You can
- right-click anywhere in this app or click the demo button to see an
- example context menu.
-
- In this demo we use the ipcRenderer module to show the
- context menu when explicitly calling it from the renderer process.
-
- See the full - context-menu event documentation - for all the available properties. -
-Menu and MenuItem modules can be used to
+ create custom native menus.
+ + There are two kinds of menus: the application (top) menu and context + (right-click) menu. +
+ ++ Open the + full API documentation(opens in new window) + in your browser. +
+
+ The Menu and MenuItem modules allow you to
+ customize your application menu. If you don't set any menu, Electron
+ will generate a minimal menu for your app by default.
+
+ If you click the 'View' option in the application menu and then the + 'App Menu Demo', you'll see an information box displayed. +
+ ++ When designing an app for multiple operating systems it's + important to be mindful of the ways application menu conventions + differ on each operating system. +
+
+ For instance, on Windows, accelerators are set with an
+ &. Naming conventions also vary, like between
+ "Settings" or "Preferences". Below are resources for learning
+ operating system specific standards.
+
+ A context, or right-click, menu can be created with the
+ Menu and MenuItem modules as well. You can
+ right-click anywhere in this app or click the demo button to see an
+ example context menu.
+
+ In this demo we use the ipcRenderer module to show the
+ context menu when explicitly calling it from the renderer process.
+
+ See the full + context-menu event documentation + for all the available properties. +
+globalShortcut and Menu modules can be used to define keyboard shortcuts.- In Electron, keyboard shortcuts are called accelerators. - They can be assigned to actions in your application's Menu, - or they can be assigned globally so they'll be triggered even when - your app doesn't have keyboard focus. -
- -- Open the full documentation for the - Menu, - Accelerator, - and - globalShortcut - APIs in your browser. -
- -- To try this demo, press CommandOrControl+Alt+K on your - keyboard. -
- -- Global shortcuts are detected even when the app doesn't have - keyboard focus, and they must be registered after the app's - `ready` event is emitted. -
- -- When registering global shortcuts, it's important to be aware of - existing defaults in the target operating system, so as not to - override any existing behaviors. For an overview of each - operating system's keyboard shortcuts, view these documents: -
- - -globalShortcut and Menu modules can be used to define keyboard shortcuts.+ In Electron, keyboard shortcuts are called accelerators. + They can be assigned to actions in your application's Menu, + or they can be assigned globally so they'll be triggered even when + your app doesn't have keyboard focus. +
+ ++ Open the full documentation for the + Menu, + Accelerator, + and + globalShortcut + APIs in your browser. +
+ ++ To try this demo, press CommandOrControl+Alt+K on your + keyboard. +
+ ++ Global shortcuts are detected even when the app doesn't have + keyboard focus, and they must be registered after the app's + `ready` event is emitted. +
+ ++ When registering global shortcuts, it's important to be aware of + existing defaults in the target operating system, so as not to + override any existing behaviors. For an overview of each + operating system's keyboard shortcuts, view these documents: +
+ + +dialog module in Electron allows you to use native
- system dialogs for opening files or directories, saving a file or
- displaying informational messages.
- - This is a main process module because this process is more efficient - with native utilities and it allows the call to happen without - interrupting the visible elements in your page's renderer process. -
- -- Open the - - full API documentation (opens in new window) - - in your browser. -
-
- In this demo, the ipc module is used to send a message
- from the renderer process instructing the main process to launch the
- error dialog.
-
- You can use an error dialog before the app's
- ready event, which is useful for showing errors upon
- startup.
-
-
-const {ipcRenderer} = require('electron')
-
-const errorBtn = document.getElementById('error-dialog')
-
-errorBtn.addEventListener('click', (event) => {
- ipcRenderer.send('open-error-dialog')
-})
-
-
-
-const {ipcMain, dialog} = require('electron')
-
-ipcMain.on('open-error-dialog', (event) => {
- dialog.showErrorBox('An Error Message', 'Demonstrating an error message.')
-})
-
-
- dialog module in Electron allows you to use native
+ system dialogs for opening files or directories, saving a file or
+ displaying informational messages.
+ + This is a main process module because this process is more efficient + with native utilities and it allows the call to happen without + interrupting the visible elements in your page's renderer process. +
+ ++ Open the + + full API documentation (opens in new window) + + in your browser. +
+
+ In this demo, the ipc module is used to send a message
+ from the renderer process instructing the main process to launch the
+ error dialog.
+
+ You can use an error dialog before the app's
+ ready event, which is useful for showing errors upon
+ startup.
+
+
+const {ipcRenderer} = require('electron')
+
+const errorBtn = document.getElementById('error-dialog')
+
+errorBtn.addEventListener('click', (event) => {
+ ipcRenderer.send('open-error-dialog')
+})
+
+
+
+const {ipcMain, dialog} = require('electron')
+
+ipcMain.on('open-error-dialog', (event) => {
+ dialog.showErrorBox('An Error Message', 'Demonstrating an error message.')
+})
+
+
+ dialog module in Electron allows you to use native
- system dialogs for opening files or directories, saving a file or
- displaying informational messages.
- - This is a main process module because this process is more efficient - with native utilities and it allows the call to happen without - interrupting the visible elements in your page's renderer process. -
- -- Open the - - full API documentation (opens in new window) - - in your browser. -
-
- In this demo, the ipc module is used to send a message
- from the renderer process instructing the main process to launch the
- information dialog. Options may be provided for responses which can
- then be relayed back to the renderer process.
-
- Note: The title property is not displayed in macOS.
-
- An information dialog can contain an icon, your choice of buttons, - title and message. -
-
-
-const {ipcRenderer} = require('electron')
-
-const informationBtn = document.getElementById('information-dialog')
-
-informationBtn.addEventListener('click', (event) => {
- ipcRenderer.send('open-information-dialog')
-})
-
-ipcRenderer.on('information-dialog-selection', (event, index) => {
- let message = 'You selected '
- if (index === 0) message += 'yes.'
- else message += 'no.'
- document.getElementById('info-selection').innerHTML = message
-})
-
-
-
-
-const {ipcMain, dialog} = require('electron')
-
-ipcMain.on('open-information-dialog', (event) => {
- const options = {
- type: 'info',
- title: 'Information',
- message: "This is an information dialog. Isn't it nice?",
- buttons: ['Yes', 'No']
- }
- dialog.showMessageBox(options, (index) => {
- event.sender.send('information-dialog-selection', index)
- })
-})
-
-
- dialog module in Electron allows you to use native
+ system dialogs for opening files or directories, saving a file or
+ displaying informational messages.
+ + This is a main process module because this process is more efficient + with native utilities and it allows the call to happen without + interrupting the visible elements in your page's renderer process. +
+ ++ Open the + + full API documentation (opens in new window) + + in your browser. +
+
+ In this demo, the ipc module is used to send a message
+ from the renderer process instructing the main process to launch the
+ information dialog. Options may be provided for responses which can
+ then be relayed back to the renderer process.
+
+ Note: The title property is not displayed in macOS.
+
+ An information dialog can contain an icon, your choice of buttons, + title and message. +
+
+
+const {ipcRenderer} = require('electron')
+
+const informationBtn = document.getElementById('information-dialog')
+
+informationBtn.addEventListener('click', (event) => {
+ ipcRenderer.send('open-information-dialog')
+})
+
+ipcRenderer.on('information-dialog-selection', (event, index) => {
+ let message = 'You selected '
+ if (index === 0) message += 'yes.'
+ else message += 'no.'
+ document.getElementById('info-selection').innerHTML = message
+})
+
+
+
+
+const {ipcMain, dialog} = require('electron')
+
+ipcMain.on('open-information-dialog', (event) => {
+ const options = {
+ type: 'info',
+ title: 'Information',
+ message: "This is an information dialog. Isn't it nice?",
+ buttons: ['Yes', 'No']
+ }
+ dialog.showMessageBox(options, (index) => {
+ event.sender.send('information-dialog-selection', index)
+ })
+})
+
+
+ dialog module in Electron allows you to use native
- system dialogs for opening files or directories, saving a file or
- displaying informational messages.
- - This is a main process module because this process is more efficient - with native utilities and it allows the call to happen without - interrupting the visible elements in your page's renderer process. -
- -- Open the - - full API documentation (opens in new window) - - in your browser. -
-
- In this demo, the ipc module is used to send a message
- from the renderer process instructing the main process to launch the
- open file (or directory) dialog. If a file is selected, the main
- process can send that information back to the renderer process.
-
-
-const {ipcRenderer} = require('electron')
-
-const selectDirBtn = document.getElementById('select-directory')
-
-selectDirBtn.addEventListener('click', (event) => {
- ipcRenderer.send('open-file-dialog')
-})
-
-ipcRenderer.on('selected-directory', (event, path) => {
- document.getElementById('selected-file').innerHTML = `You selected: ${path}`
-})
-
-
-
-
-const {ipcMain, dialog} = require('electron')
-
-ipcMain.on('open-file-dialog', (event) => {
- dialog.showOpenDialog({
- properties: ['openFile', 'openDirectory']
- }, (files) => {
- if (files) {
- event.sender.send('selected-directory', files)
- }
- })
-})
-
-
-
-
- On macOS you can choose between a "sheet" dialog or a default
- dialog. The sheet version descends from the top of the window. To
- use sheet version, pass the window as the first
- argument in the dialog method.
-
const ipc = require('electron').ipcMain
-const dialog = require('electron').dialog
-const BrowserWindow = require('electron').BrowserWindow
-
-
-ipc.on('open-file-dialog-sheet', function (event) {
- const window = BrowserWindow.fromWebContents(event.sender)
- const files = dialog.showOpenDialog(window, { properties: [ 'openFile' ]})
-})dialog module in Electron allows you to use native
+ system dialogs for opening files or directories, saving a file or
+ displaying informational messages.
+ + This is a main process module because this process is more efficient + with native utilities and it allows the call to happen without + interrupting the visible elements in your page's renderer process. +
+ ++ Open the + + full API documentation (opens in new window) + + in your browser. +
+
+ In this demo, the ipc module is used to send a message
+ from the renderer process instructing the main process to launch the
+ open file (or directory) dialog. If a file is selected, the main
+ process can send that information back to the renderer process.
+
+
+const {ipcRenderer} = require('electron')
+
+const selectDirBtn = document.getElementById('select-directory')
+
+selectDirBtn.addEventListener('click', (event) => {
+ ipcRenderer.send('open-file-dialog')
+})
+
+ipcRenderer.on('selected-directory', (event, path) => {
+ document.getElementById('selected-file').innerHTML = `You selected: ${path}`
+})
+
+
+
+
+const {ipcMain, dialog} = require('electron')
+
+ipcMain.on('open-file-dialog', (event) => {
+ dialog.showOpenDialog({
+ properties: ['openFile', 'openDirectory']
+ }, (files) => {
+ if (files) {
+ event.sender.send('selected-directory', files)
+ }
+ })
+})
+
+
+
+
+ On macOS you can choose between a "sheet" dialog or a default
+ dialog. The sheet version descends from the top of the window. To
+ use sheet version, pass the window as the first
+ argument in the dialog method.
+
const ipc = require('electron').ipcMain
+const dialog = require('electron').dialog
+const BrowserWindow = require('electron').BrowserWindow
+
+
+ipc.on('open-file-dialog-sheet', function (event) {
+ const window = BrowserWindow.fromWebContents(event.sender)
+ const files = dialog.showOpenDialog(window, { properties: [ 'openFile' ]})
+})dialog module in Electron allows you to use native
- system dialogs for opening files or directories, saving a file or
- displaying informational messages.
- - This is a main process module because this process is more efficient - with native utilities and it allows the call to happen without - interrupting the visible elements in your page's renderer process. -
- -- Open the - - full API documentation (opens in new window) - - in your browser. -
-
- In this demo, the ipc module is used to send a message
- from the renderer process instructing the main process to launch the
- save dialog. It returns the path selected by the user which can be
- relayed back to the renderer process.
-
-
-const {ipcRenderer} = require('electron')
-
-const saveBtn = document.getElementById('save-dialog')
-
-saveBtn.addEventListener('click', (event) => {
- ipcRenderer.send('save-dialog')
-})
-
-ipcRenderer.on('saved-file', (event, path) => {
- if (!path) path = 'No path'
- document.getElementById('file-saved').innerHTML = `Path selected: ${path}`
-})
-
-
-
-
-const {ipcMain, dialog} = require('electron')
-
-ipcMain.on('save-dialog', (event) => {
- const options = {
- title: 'Save an Image',
- filters: [
- { name: 'Images', extensions: ['jpg', 'png', 'gif'] }
- ]
- }
- dialog.showSaveDialog(options, (filename) => {
- event.sender.send('saved-file', filename)
- })
-})
-
-
- dialog module in Electron allows you to use native
+ system dialogs for opening files or directories, saving a file or
+ displaying informational messages.
+ + This is a main process module because this process is more efficient + with native utilities and it allows the call to happen without + interrupting the visible elements in your page's renderer process. +
+ ++ Open the + + full API documentation (opens in new window) + + in your browser. +
+
+ In this demo, the ipc module is used to send a message
+ from the renderer process instructing the main process to launch the
+ save dialog. It returns the path selected by the user which can be
+ relayed back to the renderer process.
+
+
+const {ipcRenderer} = require('electron')
+
+const saveBtn = document.getElementById('save-dialog')
+
+saveBtn.addEventListener('click', (event) => {
+ ipcRenderer.send('save-dialog')
+})
+
+ipcRenderer.on('saved-file', (event, path) => {
+ if (!path) path = 'No path'
+ document.getElementById('file-saved').innerHTML = `Path selected: ${path}`
+})
+
+
+
+
+const {ipcMain, dialog} = require('electron')
+
+ipcMain.on('save-dialog', (event) => {
+ const options = {
+ title: 'Save an Image',
+ filters: [
+ { name: 'Images', extensions: ['jpg', 'png', 'gif'] }
+ ]
+ }
+ dialog.showSaveDialog(options, (filename) => {
+ event.sender.send('saved-file', filename)
+ })
+})
+
+
+ - Open the - - full API documentation (opens in new window) - - in your browser. -
-- Click and drag the link above to copy the renderer process - javascript file on to your machine. -
- -
- In this demo, the webContents.startDrag() API is called
- in response to the ondragstart event.
-
-const {ipcRenderer} = require('electron')
-
-const dragFileLink = document.getElementById('drag-file-link')
-
-dragFileLink.addEventListener('dragstart', (event) => {
- event.preventDefault()
- ipcRenderer.send('ondragstart', __filename)
-})
-
-
-const {ipcMain} = require('electron')
-const path = require('path')
-
-ipcMain.on('ondragstart', (event, filepath) => {
- const iconName = 'codeIcon.png'
- event.sender.startDrag({
- file: filepath,
- icon: path.join(__dirname, iconName)
- })
-})
-
- + Open the + + full API documentation (opens in new window) + + in your browser. +
++ Click and drag the link above to copy the renderer process + javascript file on to your machine. +
+ +
+ In this demo, the webContents.startDrag() API is called
+ in response to the ondragstart event.
+
+const {ipcRenderer} = require('electron')
+
+const dragFileLink = document.getElementById('drag-file-link')
+
+dragFileLink.addEventListener('dragstart', (event) => {
+ event.preventDefault()
+ ipcRenderer.send('ondragstart', __filename)
+})
+
+
+const {ipcMain} = require('electron')
+const path = require('path')
+
+ipcMain.on('ondragstart', (event, filepath) => {
+ const iconName = 'codeIcon.png'
+ event.sender.startDrag({
+ file: filepath,
+ icon: path.join(__dirname, iconName)
+ })
+})
+
+ shell module in Electron allows you to access certain
- native elements like the file manager and default web browser.
- This module works in both the main and renderer process.
-- Open the - - full API documentation (opens in new window) - - in your browser. -
-
- This demonstrates using the shell module to open the
- system file manager at a particular location.
-
- Clicking the demo button will open your file manager at the root. -
-
- If you do not want your app to open website links
- within the app, you can use the shell module
- to open them externally. When clicked, the links will open outside
- of your app and in the user's default web browser.
-
- When the demo button is clicked, the electron website will open in - your browser. -
- - -
- You may want to open all http and
- https links outside of your app. To do this, query
- the document and loop through each link and add a listener. This
- app uses the code below which is located in
- assets/ex-links.js.
-
-
-const shell = require('electron').shell
-
-const links = document.querySelectorAll('a[href]')
-
-Array.prototype.forEach.call(links, (link) => {
- const url = link.getAttribute('href')
- if (url.indexOf('http') === 0) {
- link.addEventListener('click', (e) => {
- e.preventDefault()
- shell.openExternal(url)
- })
- }
-})
-
-
- shell module in Electron allows you to access certain
+ native elements like the file manager and default web browser.
+ This module works in both the main and renderer process.
++ Open the + + full API documentation (opens in new window) + + in your browser. +
+
+ This demonstrates using the shell module to open the
+ system file manager at a particular location.
+
+ Clicking the demo button will open your file manager at the root. +
+
+ If you do not want your app to open website links
+ within the app, you can use the shell module
+ to open them externally. When clicked, the links will open outside
+ of your app and in the user's default web browser.
+
+ When the demo button is clicked, the electron website will open in + your browser. +
+ + +
+ You may want to open all http and
+ https links outside of your app. To do this, query
+ the document and loop through each link and add a listener. This
+ app uses the code below which is located in
+ assets/ex-links.js.
+
+
+const shell = require('electron').shell
+
+const links = document.querySelectorAll('a[href]')
+
+Array.prototype.forEach.call(links, (link) => {
+ const url = link.getAttribute('href')
+ if (url.indexOf('http') === 0) {
+ link.addEventListener('click', (e) => {
+ e.preventDefault()
+ shell.openExternal(url)
+ })
+ }
+})
+
+
+ notification module in Electron allows you to add basic
- desktop notifications.
- - Electron conveniently allows developers to send notifications with the - HTML5 Notification API, - using the currently running operating system’s native notification - APIs to display it. -
- -- Note: Since this is an HTML5 API it is only available in the - renderer process. -
- -- Open the - - full API documentation(opens in new window) - - in your browser. -
-This demo demonstrates a basic notification. Text only.
-- This demo demonstrates a basic notification. Both text and a image -
-notification module in Electron allows you to add basic
+ desktop notifications.
+ + Electron conveniently allows developers to send notifications with the + HTML5 Notification API, + using the currently running operating system’s native notification + APIs to display it. +
+ ++ Note: Since this is an HTML5 API it is only available in the + renderer process. +
+ ++ Open the + + full API documentation(opens in new window) + + in your browser. +
+This demo demonstrates a basic notification. Text only.
++ This demo demonstrates a basic notification. Both text and a image +
+tray module allows you to create an icon in the
- operating system's notification area.
- This icon can also have a context menu attached.
- -- Open the - - full API documentation - - in your browser. -
-
- On Linux distributions that only have app indicator support, users
- will need to install libappindicator1 to make the
- tray icon work. See the
-
- full API documentation
-
- for more details about using Tray on Linux.
-
tray module allows you to create an icon in the
+ operating system's notification area.
+ This icon can also have a context menu attached.
+ ++ Open the + + full API documentation + + in your browser. +
+
+ On Linux distributions that only have app indicator support, users
+ will need to install libappindicator1 to make the
+ tray icon work. See the
+
+ full API documentation
+
+ for more details about using Tray on Linux.
+
BrowserWindow module in Electron allows you to create a
- new browser window or manage an existing one.
- - Each browser window is a separate process, known as the renderer - process. This process, like the main process that controls the life - cycle of the app, has full access to the Node.js APIs. -
- -- Open the - - full API documentation (opens in new window) - - in your browser. -
-
- A frameless window is a window that has no
-
- "chrome"
-
- , such as toolbars, title bars, status bars, borders, etc. You can
- make a browser window frameless by setting frame to
- false when creating the window.
-
- Windows can have a transparent background, too. By setting the
- transparent option to true, you can also
- make your frameless window transparent:
-
-var win = new BrowserWindow({
- transparent: true,
- frame: false
-})
-
- - For more details, see the - - Window Customization - - - documentation. -
-BrowserWindow module in Electron allows you to create a
+ new browser window or manage an existing one.
+ + Each browser window is a separate process, known as the renderer + process. This process, like the main process that controls the life + cycle of the app, has full access to the Node.js APIs. +
+ ++ Open the + + full API documentation (opens in new window) + + in your browser. +
+
+ A frameless window is a window that has no
+
+ "chrome"
+
+ , such as toolbars, title bars, status bars, borders, etc. You can
+ make a browser window frameless by setting frame to
+ false when creating the window.
+
+ Windows can have a transparent background, too. By setting the
+ transparent option to true, you can also
+ make your frameless window transparent:
+
+var win = new BrowserWindow({
+ transparent: true,
+ frame: false
+})
+
+ + For more details, see the + + Window Customization + + + documentation. +
+BrowserWindow module in Electron allows you to create a
- new browser window or manage an existing one.
- - Each browser window is a separate process, known as the renderer - process. This process, like the main process that controls the life - cycle of the app, has full access to the Node.js APIs. -
- -- Open the - - full API documentation (opens in new window) - - in your browser. -
-
- In this demo we create a new window and listen for
- move and resize events on it. Click the
- demo button, change the new window and see the dimensions and
- position update here, above.
-
- There are a lot of methods for controlling the state of the window - such as the size, location, and focus status as well as events to - listen to for window changes. Visit the - - documentation (opens in new window) - - for the full list. -
-BrowserWindow module in Electron allows you to create a
+ new browser window or manage an existing one.
+ + Each browser window is a separate process, known as the renderer + process. This process, like the main process that controls the life + cycle of the app, has full access to the Node.js APIs. +
+ ++ Open the + + full API documentation (opens in new window) + + in your browser. +
+
+ In this demo we create a new window and listen for
+ move and resize events on it. Click the
+ demo button, change the new window and see the dimensions and
+ position update here, above.
+
+ There are a lot of methods for controlling the state of the window + such as the size, location, and focus status as well as events to + listen to for window changes. Visit the + + documentation (opens in new window) + + for the full list. +
+BrowserWindow module in Electron allows you to create a
- new browser window or manage an existing one.
- - Each browser window is a separate process, known as the renderer - process. This process, like the main process that controls the life - cycle of the app, has full access to the Node.js APIs. -
- -- Open the - - full API documentation (opens in new window) - - in your browser. -
-
- In this demo, we create a new window and listen for
- blur event on it. Click the demo button to create a new
- modal window, and switch focus back to the parent window by clicking
- on it. You can click the Focus on Demo button to switch focus
- to the modal window again.
-
BrowserWindow module in Electron allows you to create a
+ new browser window or manage an existing one.
+ + Each browser window is a separate process, known as the renderer + process. This process, like the main process that controls the life + cycle of the app, has full access to the Node.js APIs. +
+ ++ Open the + + full API documentation (opens in new window) + + in your browser. +
+
+ In this demo, we create a new window and listen for
+ blur event on it. Click the demo button to create a new
+ modal window, and switch focus back to the parent window by clicking
+ on it. You can click the Focus on Demo button to switch focus
+ to the modal window again.
+