basic tray example

core/tauri/src/tray/plugin.rs

@@ -13,7 +13,7 @@ use crate::{
   plugin::{Builder, TauriPlugin},
   resources::ResourceId,
   tray::TrayIconBuilder,
-  AppHandle, IconDto, Manager, Runtime,
+  AppHandle, IconDto, Runtime,
 };
 
 use super::TrayIcon;
@@ -35,19 +35,17 @@ struct TrayIconOptions {
 fn new<R: Runtime>(
   app: AppHandle<R>,
   options: TrayIconOptions,
-  handler: Option<Channel>,
+  handler: Channel,
 ) -> crate::Result<(ResourceId, String)> {
   let mut builder = if let Some(id) = options.id {
     TrayIconBuilder::<R>::with_id(id)
   } else {
     TrayIconBuilder::<R>::new()
   };
 
-  if let Some(handler) = handler {
-    builder = builder.on_tray_event(|tray, e| {
-      let _ = handler.send(e);
-    });
-  }
+  builder = builder.on_tray_icon_event(move |_tray, e| {
+    let _ = handler.send(e);
+  });
 
   let mut resources_table = app.manager.resources_table();
 

examples/api/src/App.svelte

@@ -8,7 +8,7 @@
   import Window from './views/Window.svelte'
   import WebRTC from './views/WebRTC.svelte'
   import App from './views/App.svelte'
-
+  import Tray from './views/Tray.svelte'
 
   document.addEventListener('keydown', (event) => {
     if (event.ctrlKey && event.key === 'b') {
@@ -40,6 +40,11 @@
       component: Window,
       icon: 'i-codicon-window'
     },
+    {
+      label: 'Tray',
+      component: Tray,
+      icon: 'i-ph-broadcast'
+    },
     {
       label: 'WebRTC',
       component: WebRTC,

examples/api/src/views/Tray.svelte

@@ -0,0 +1,65 @@
+<script>
+  import { TrayIcon } from '@tauri-apps/api/tray'
+
+  export let onMessage
+
+  let icon = null
+  let tooltip = null
+  let title = null
+  let iconAsTemplate = false
+  let menuOnLeftClick = true
+
+  function create() {
+    TrayIcon.new({
+      icon,
+      tooltip,
+      title,
+      iconAsTemplate,
+      menuOnLeftClick,
+      action: (event) => onMessage(event)
+    }).catch(onMessage)
+  }
+</script>
+
+<div class="flex flex-col children:grow gap-2">
+  <div class="flex gap-1">
+    <input
+      class="input grow"
+      type="text"
+      placeholder="Title"
+      bind:value={title}
+    />
+
+    <input
+      class="input grow"
+      type="text"
+      placeholder="Tooltip"
+      bind:value={tooltip}
+    />
+
+    <label>
+      Menu on left click
+      <input type="checkbox" bind:checked={menuOnLeftClick} />
+    </label>
+  </div>
+
+  <div class="flex gap-1">
+    <input
+      class="input grow"
+      type="text"
+      placeholder="Icon path"
+      bind:value={icon}
+    />
+
+    <label>
+      Icon as template
+      <input type="checkbox" bind:checked={iconAsTemplate} />
+    </label>
+  </div>
+
+  <div class="flex">
+    <button class="btn" on:click={create} title="Creates the tray icon"
+      >Create</button
+    >
+  </div>
+</div>

examples/api/src/views/Window.svelte

@@ -10,7 +10,6 @@
     ProgressBarStatus,
     Window
   } from '@tauri-apps/api/window'
-  import { invoke } from '@tauri-apps/api/primitives'
 
   const appWindow = getCurrent()
 

tooling/api/src/tray.ts

@@ -63,7 +63,7 @@ export interface TrayIconOptions {
   /** The tray icon tooltip */
   tooltip?: string
   /**
-   * The tooltip text
+   * The tray title
    *
    * #### Platform-specific
    *
@@ -87,7 +87,7 @@ export interface TrayIconOptions {
    */
   iconAsTemplate?: boolean
   /** Whether to show the tray menu on left click or not, default is `true`. **macOS only**. */
-  menuOnLeftClieck?: boolean
+  menuOnLeftClick?: boolean
   /** A handler for an event on the tray icon. */
   action?: (event: TrayIconEvent) => void
 }