tarui 如何隐藏顶部标题栏了?

编辑tauri.conf.json, 设置decorations: false隐藏自己的边框了栏

{
  "windows": [
    {
        "decorations": false,
       ...
    }
  ]
}

定义自己的顶栏

<!-- 注:通过设置“data-tauri-drag-region”注册拖动区域-->
<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())
posted @ 2023-04-19 11:44  xxcf  阅读(1309)  评论(0)    收藏  举报