窗口自定义

Tauri 提供了大量自定义应用程序窗口外观的选项。您可以创建自定义标题栏、透明窗口、执行大小限制等。

配置

更改窗口配置有三种方法：

创建自定义标题栏

创建自定义标题栏是这些窗口功能的一种常见用法。本简短教程将指导您完成这一过程。

CSS

您需要为标题栏添加一些 CSS，使其保持在屏幕顶部，并为按钮设计样式：


.titlebar {
  height: 30px;
  background: #329ea3;
  user-select: none;
  display: flex;
  justify-content: flex-end;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}
.titlebar-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
}
.titlebar-button:hover {
  background: #5bbec3;
}

HTML

现在，您需要为标题栏添加 HTML。将其放在 <body> 标签的顶部：



<div data-tauri-drag-region class="titlebar">
  <div class="titlebar-button" id="titlebar-minimize">
    <img decoding="async"
      src="https://api.iconify.design/mdi:window-minimize.svg"
      alt="minimize"
    />
  </div>
  <div class="titlebar-button" id="titlebar-maximize">
    <img decoding="async"
      src="https://api.iconify.design/mdi:window-maximize.svg"
      alt="maximize"
    />
  </div>
  <div class="titlebar-button" id="titlebar-close">
    <img decoding="async" src="https://api.iconify.design/mdi:close.svg" alt="close" />
  </div>
</div>

请注意，您可能需要将其他内容向下移动，这样标题栏就不会遮住这些内容。

JS

最后，您需要让按钮正常工作：


import { appWindow } from '@tauri-apps/api/window'
document
  .getElementById('titlebar-minimize')
  .addEventListener('click', () => appWindow.minimize())
document
  .getElementById('titlebar-maximize')
  .addEventListener('click', () => appWindow.toggleMaximize())
document
  .getElementById('titlebar-close')
  .addEventListener('click', () => appWindow.close())

tauri.conf.json

要调用 appWindow，别忘了在 tauri.conf.json 文件中添加窗口权限：


"tauri": {
  "allowList": {
    ...
    "window": {
        "all": false,
        "close": true,
        "hide": true,
        "show": true,
        "maximize": true,
        "minimize": true,
        "unmaximize": true,
        "unminimize": true,
        "startDragging": true
      }
  }
  ...
  
  "windows": [
    {
      "decorations": false,
      ...
    }
  ]
}

系统托盘

常见问题

配置
创建自定义标题栏