BST Tauri 开发笔记（5）- 自定义窗口标题栏

by matt Leave Comment

参考：

https://tauri.app/v1/guides/features/window-customization/

https://tauri.app/v1/api/config#windowconfig

创建css（测试可以写在index.html里）

      .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结构（index.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>

绑定事件（main.tsx）

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

    "allowlist": {
      ...
      "window": {
        "all": false,
        "close": true,
        "hide": true,
        "show": true,
        "maximize": true,
        "minimize": true,
        "unmaximize": true,
        "unminimize": true,
        "startDragging": true
      }
    },
    "windows": [
      {
        "fullscreen": false,
        "resizable": true,
        "title": "bible-study-tool-app",
        "width": 800,
        "height": 600,
        "decorations": false
      }
    ]

透明背景（如果使用圆角窗口）

tauri.conf.json 编辑 windows 下的 transparent 设为 true，macOS要把 tauri 下的 macOSPrivateApi 设置成 true

    "windows": [
      {
        ...
        "transparent": true
      }
    ],
    "macOSPrivateApi": true

并且把 html 元素设置为透明

<html lang="en" data-theme="light" style="background-color: rgba(0, 0, 0, 0)">

发表回复