窗口自定义
Tauri 提供了众多选项来自定义应用窗口的外观和感觉。您可以创建自定义标题栏、实现透明窗口、强制尺寸限制等功能。
配置
有三种方式来更改窗口配置
用法
创建自定义标题栏
这些窗口功能的一个常见用途是创建自定义标题栏。本简短教程将引导您完成这个过程。
tauri.conf.json
在您的 tauri.conf.json 中将 decorations
设置为 false
"tauri": { "windows": [ { "decorations": false } ]}
权限
在功能文件中添加窗口权限。
默认情况下,所有插件命令都被阻止并且无法访问。您必须在您的 capabilities
配置中定义一个权限列表。
更多信息请参阅 功能概述 和 使用插件权限的分步指南。
{ "$schema": "../gen/schemas/desktop-schema.json", "identifier": "main-capability", "description": "Capability for the main window", "windows": ["main"], "permissions": ["core:window:default", "core:window:allow-start-dragging"]}
权限 | 描述 |
---|---|
core:window:default | 插件的默认权限。除 window:allow-start-dragging 外。 |
core:window:allow-close | 启用不带任何预配置范围的关闭命令。 |
core:window:allow-minimize | 启用不带任何预配置范围的缩小命令。 |
core:window:allow-start-dragging | 启用不带任何预配置范围的开始拖拽命令。 |
core:window:allow-maximize | 启用不带任何预配置范围的切换到全屏命令。 |
core:window:allow-internal-maximize | 启用不带任何预配置范围的内部切换到全屏命令。 |
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; user-select: none; -webkit-user-select: none;}.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>
请注意,可能需要将其他内容向下移动,以免标题栏覆盖内容。
JavaScript
使用此代码片段以使按钮正常工作
import { getCurrentWindow } from '@tauri-apps/api/window';
// when using `"withGlobalTauri": true`, you may use// const { getCurrentWindow } = window.__TAURI__.window;
const appWindow = getCurrentWindow();
document .getElementById('titlebar-minimize') ?.addEventListener('click', () => appWindow.minimize());document .getElementById('titlebar-maximize') ?.addEventListener('click', () => appWindow.toggleMaximize());document .getElementById('titlebar-close') ?.addEventListener('click', () => appWindow.close());
请注意,如果您使用的是基于 Rust 的前端,可以将上面的代码复制到您的 index.html
文件中的 `