quickbuild/templates/Electron App (Advanced)/sections/native-ui/tray.html

A mature, feature-complete application generator with an emphasis on speed

<template class="task-template">
  <section id="tray-section" class="section js-section u-category-native-ui">
    <header class="section-header">
      <div class="section-wrapper">
        <h1>
          <svg class="section-icon"><use xlink:href="assets/img/icons.svg#icon-native-ui"></use></svg>
          Tray
        </h1>
        <h3>The <code>tray</code> module allows you to create an icon in the operating system's notification area.</h3>
        <p>This icon can also have a context menu attached.</p>

        <p>Open the <a href="http://electron.atom.io/docs/api/tray">full API documentation<span class="u-visible-to-screen-reader">(opens in new window)</span></a> in your browser.</p>
      </div>
    </header>

    <div class="demo">
      <div class="demo-wrapper">
        <button id="tray-demo-toggle" class="js-container-target demo-toggle-button">Tray
          <div class="demo-meta u-avoid-clicks">Supports: Win, macOS, Linux | Process: Main</div>
        </button>
        <div class="demo-box">
          <div class="demo-controls">
            <button class="demo-button" id="put-in-tray">View Demo</button>
            <span class="demo-response" id="tray-countdown"></span>
          </div>
          <p>The demo button sends a message to the main process using the <code>ipc</code> module. In the main process the app is told to place an icon, with a context menu, in the tray.</p>

          <p>In this example the tray icon can be removed by clicking 'Remove' in the context menu or selecting the demo button again.</p>
          <h5>Main Process</h5>
          <pre><code data-path="main-process/native-ui/tray/tray.js"></code></pre>
          <h5>Renderer Process</h5>
          <pre><code data-path="renderer-process/native-ui/tray/tray.js"></code></pre>

          <div class="demo-protip">
            <h2>ProTip</h2>
            <strong>Tray support in Linux.</strong>
            <p>On Linux distributions that only have app indicator support, users will need to install <code>libappindicator1</code> to make the tray icon work. See the <a href="http://electron.atom.io/docs/api/tray">full API documentation<span class="u-visible-to-screen-reader">(opens in new window)</span></a> for more details about using Tray on Linux.</p>
          </div>
        </div>
      </div>
    </div>

    <script type="text/javascript">
      require('./renderer-process/native-ui/tray/tray')
    </script>

  </section>
</template>