Saltar al contenido principal

Tray

Clase: Tray

Añadir los iconos y menús contextuales al área de notificación del sistema.

Process: Main

Tray es un EventEmitter.

const { app, Menu, Tray } = require('electron')

let tray = null
app.whenReady().then(() => {
tray = new Tray('/path/to/my/icon')
const contextMenu = Menu.buildFromTemplate([
{ label: 'Item1', type: 'radio' },
{ label: 'Item2', type: 'radio' },
{ label: 'Item3', type: 'radio', checked: true },
{ label: 'Item4', type: 'radio' }
])
tray.setToolTip('This is my application.')
tray.setContextMenu(contextMenu)
})

Platform Considerations

Linux

  • Tray icon uses StatusNotifierItem by default, when it is not available in user's desktop environment the GtkStatusIcon will be used instead.
  • The click event is emitted when the tray icon receives activation from user, however the StatusNotifierItem spec does not specify which action would cause an activation, for some environments it is left mouse click, but for some it might be double left mouse click.
  • In order for changes made to individual MenuItems to take effect, you have to call setContextMenu again. Por ejemplo:
const { app, Menu, Tray } = require('electron')

let appIcon = null
app.whenReady().then(() => {
appIcon = new Tray('/path/to/my/icon')
const contextMenu = Menu.buildFromTemplate([
{ label: 'Item1', type: 'radio' },
{ label: 'Item2', type: 'radio' }
])

// Make a change to the context menu
contextMenu.items[1].checked = false

// Call this again for Linux because we modified the context menu
appIcon.setContextMenu(contextMenu)
})

MacOS

  • Icons passed to the Tray constructor should be Template Images.
  • To make sure your icon isn't grainy on retina monitors, be sure your @2x image is 144dpi.
  • If you are bundling your application (e.g., with webpack for development), be sure that the file names are not being mangled or hashed. The filename needs to end in Template, and the @2x image needs to have the same filename as the standard image, or MacOS will not magically invert your image's colors or use the high density image.
  • 16x16 (72dpi) and 32x32@2x (144dpi) work well for most icons.

Windows

  • It is recommended to use ICO icons to get best visual effects.

new Tray(image, [guid])

  • image (NativeImage | string)
  • guid string (opcional) Windows - Asigna un GUID al icono de la bandeja. If the executable is signed and the signature contains an organization in the subject line then the GUID is permanently associated with that signature. OS level settings like the position of the tray icon in the system tray will persist even if the path to the executable changes. If the executable is not code-signed then the GUID is permanently associated with the path to the executable. Changing the path to the executable will break the creation of the tray icon and a new GUID must be used. However, it is highly recommended to use the GUID parameter only in conjunction with code-signed executable. If an App defines multiple tray icons then each icon must use a separate GUID.

Crea un nuevo icono de bandeja asociado con la image.

Eventos de Instancia

El módulo Tray emite los siguientes eventos:

Evento: "click"

Devuelve:

Emitido cuando se hace clic en el icono de bandeja.

Note that on Linux this event is emitted when the tray icon receives an activation, which might not necessarily be left mouse click.

Evento: "right-click"macOS Windows

Devuelve:

Emitido cuando se hace clic derecho en el icono de bandeja.

Evento: "double-click"macOS Windows

Devuelve:

Emitido cuando se hace doble clic en el icono de bandeja.

Event: 'middle-click' Windows

Devuelve:

Emitted when the tray icon is middle clicked.

Evento: 'balloon-show' Windows

Emitido cuando se muestra el globo de bandeja.

Evento: 'balloon-click' Windows

Emitido cuando se hace clic en el globo de bandeja.

Evento: 'balloon-closed' Windows

Emitido cuando se cierra el globo de bandeja debido al tiempo de expiración o cuando el usuario lo cierra manualmente.

Evento: 'drop' macOS

Emitido cuando cualquier elemento arrastrado es dejado en el icono de bandeja.

Evento: 'drop-files' macOS

Devuelve:

  • event
  • files string[] - Las rutas de los archivos dejados en la bandeja.

Emitido cuando los archivos arrastrados son dejados en el icono de la bandeja.

Evento: 'drop-text' macOS

Devuelve:

  • event
  • text cadena - la cadena del texto dejado.

Emitido cuando el texto arrastrado es arrojado en el icono de bandeja.

Evento: 'drag-enter' macOS

Emitido cuando una operación de arrastre entra al icono de bandeja.

Evento: 'drag-leave' macOS

Emitido cuando una operación de arrastre sale del icono de bandeja.

Evento: 'drag-end' macOS

Emitido cuando termina una operación de arrastre en la bandeja o termina en otra ubicación.

Evento: 'mouse-up' macOS

Devuelve:

Emitted when the mouse is released from clicking the tray icon.

Note: This will not be emitted if you have set a context menu for your Tray using tray.setContextMenu, as a result of macOS-level constraints.

Evento: 'mouse-down' macOS

Devuelve:

Emitted when the mouse clicks the tray icon.

Event: 'mouse-enter' macOS Windows

Devuelve:

Emitido cuando el ratón entra en el icono de la bandeja.

Event: 'mouse-leave' macOS Windows

Devuelve:

Emitido cuando el ratón sale del icono de la bandeja.

Evento: 'mouse-move' macOS Windows

Devuelve:

Se emite cuando el ratón se mueve sobre el icono de la bandeja del sistema.

Métodos de Instancia

La clase Tray tiene los siguientes métodos:

tray.destroy()

Destruye inmediatamente el icono de la bandeja.

tray.setImage(image)

Configura la image asociada con este icono de bandeja.

tray.setPressedImage(image) macOS

En macOS, configura la image asociada con este icono de bandeja cuando se presiona.

tray.setToolTip(toolTip)

  • toolTip string

Configura la activación de texto para este icono de bandeja.

tray.setTitle(title[, options]) macOS

  • title string
  • options Object (opcional)
    • fontType string (optional) - The font family variant to display, can be monospaced or monospacedDigit. monospaced is available in macOS 10.15+ When left blank, the title uses the default system font.

Establece el título mostrado al lado de la bandeja de icono en la barra de estado (Soporta colores ANSI).

tray.getTitle() macOS

Devuelve string - el título mostrado junto al icono de la bandeja en la barra de estado

tray.setIgnoreDoubleClickEvents(ignore) macOS

  • ignore boolean

Sets the option to ignore double click events. Ignoring these events allows you to detect every individual click of the tray icon.

Este valor se establece en falso por defecto.

tray.getIgnoreDoubleClickEvents() macOS

Devuelve boolean - Si los eventos de doble click serán ignorados.

tray.displayBalloon(options) Windows

  • options Object
    • icon (NativeImage | string) (optional) - Icon to use when iconType is custom.
    • iconType string (optional) - Can be none, info, warning, error or custom. Por defecto es custom.
    • title string
    • content string
    • largeIcon boolean (opcional) - La versión grande del icono debe ser usada. Por defecto es true. Mapea a NIIF_LARGE_ICON.
    • noSound boolean (opcional) - No reproducir el sonido asociado. Por defecto es false. Mapea a NIIF_NOSOUND.
    • respectQuietTime boolean (opcional) - No mostrar el globo de notificación si el usuario actual esta en "tiempo de silencio". Por defecto es false. Mapea a NIIF_RESPECT_QUIET_TIME.

Muestra un globo de la bandeja.

tray.removeBalloon() Windows

Elimina un globo de la bandeja.

tray.focus() Windows

Devuelve el foco al área de notificación de la barra de tarea. Los iconos del área de notificación deben usar este mensaje cuando hayan completado su operación UI. Por ejemplo, si el icono muestra un menú de acceso directo, pero el usuario presiona ESC para cancelarlo, use tray.focus() para devolver el focus a la área de notificación.

tray.popUpContextMenu([menu, position]) macOS Windows

  • menu Menu (opcional)
  • position Point (optional) - La posición del elemento emergente.

Pops up the context menu of the tray icon. When menu is passed, the menu will be shown instead of the tray icon's context menu.

La position solo está disponible en Windows, y por defecto es (0, 0).

tray.closeContextMenu() macOS Windows

Closes an open context menu, as set by tray.setContextMenu().

tray.setContextMenu(menu)

  • menu Menu | null

Configura el menú de contexto para este icono.

tray.getBounds() macOS Windows

Devuelve Rectangle

Los bounds de este icono de la bandeja como Object.

tray.isDestroyed()

Devuelve boolean - Si el icono de la bandeja es destruido o no.