自定义Window
Tauri提供了许多定制应用程序窗口的外观和感觉的选项。您可以创建自定义标题栏、拥有透明窗口、强制大小限制等等。

配置

有三种方式改变窗口配置:

通过tauri.conf.json
通过JS API
通过Rust配置Window

创建自定义标题栏

这些窗口特性的一个常见用途是创建一个自定义标题栏。这个简短的教程将指导您完成这个过程。

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。把它放在标签的顶部:

<div data-tauri-drag-region class="titlebar">
  <div class="titlebar-button" id="titlebar-minimize">
    <img
      src="https://api.iconify.design/mdi:window-minimize.svg"
      alt="minimize"
    />
  </div>
  <div class="titlebar-button" id="titlebar-maximize">
    <img
      src="https://api.iconify.design/mdi:window-maximize.svg"
      alt="maximize"
    />
  </div>
  <div class="titlebar-button" id="titlebar-close">
    <img 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())