tauri controls
v0.4.0
Tauri Controls是一个为Tauri 2应用程序提供本地外观窗口控件的库。您可以使用模仿当前系统上相同的本机控件的窗口控件来增强Tauri 2应用程序的用户体验。
tauri-controls使用Tauri的JS/TS API来处理窗口事件，并且仅提供本地外观（根据官方系统设计原型设计）HTML元素，而不是本机，它不依赖于系统的本机API 。
以下设计作为参考：
# React:
bun add tauri-controls
# Svelte:
bun add @tauri-controls/svelte
# Solid.js:
bun add @tauri-controls/solid
# Vue.js:
bun add @tauri-controls/vue # Install peer dependencies:
bun add @tauri-apps/plugin-os @tauri-apps/api
bun add -D clsx tailwind-merge对于Svelte项目，在您的
tailwind.config.js的content部分中包括以下行："./node_modules/@tauri-controls/svelte/**/*.{js,svelte,ts}"
然后，确保在您的src-tauri目录中包含以下Tauri插件：
cargo add tauri-plugin-window tauri-plugin-os不要忘记在您的主要功能中注册插件。
fn main ( ) {
tauri :: Builder :: default ( )
. plugin ( tauri_plugin_os :: init ( ) )
. plugin ( tauri_plugin_window :: init ( ) )
. run ( tauri :: generate_context! ( ) )
. expect ( "error while running tauri application" ) ;
}如果在制作生产后，在终端中收到“不允许范围”的消息，请尝试一下。
并且只需根据您的需求将WindowTitlebar或WindowControls组件添加到代码中：
WindowTitlebar组件处理窗口标题栏，并根据当前操作系统动态调整窗口控制按钮和标题栏内容顺序。
import { WindowTitlebar } from "tauri-controls"
function MyTitlebar ( ) {
return (
< WindowTitlebar > { /* Place your titlebar content here */ } </ WindowTitlebar >
)
}当未指定平台时，将检测到当前系统，并将返回匹配元素。此功能是跨平台发布的绝佳解决方案。
仅将WindowControls组件用于窗口控件。
import { WindowControls } from "tauri-controls"
function MyTitlebar ( ) {
return < WindowControls />
} 
WindowTitlebar ：controlsOrder?: "right" | "left" | "platform" | "system" ：指定窗口控件的顺序。平台：获取WindowControlsprops中指定的基于OS的定位。系统：自动检测平台并相应地定位控件（默认值）。windowControlsProps?: WindowControlsProps ：将其传递给WindowControls组件的其他道具。WindowControls ：platform?: "windows" | "macos" | "gnome" ：指定要显示哪个平台的窗口控制。如果未指定平台属性，库将自动检测应用程序正在运行的操作系统并显示适当的元素。justify?: boolean ：如果设置为true ，则WindowControls将在其所在的Flexbox中辩护/抢购。hide?: boolean ：如果设置为true ，则窗口控件将被隐藏。hideMethod?: "display" | "visibility" ：确定窗口控件将如何隐藏。您还可以为诸如data-tauri-drag-region之类的元素提供其他道具，以进行进一步的增强。
查看FIGMA上的设计实现，以获取视觉参考。桌面本地窗口控件 - 无花果。
这些来源被利用：
bun dev
bun tauri:dev项目结构：
.
├── /apps
│ ├── /tauri-controls # Main application (React)
│ ├── /tauri-controls-solid # Solid.js implementation
│ └── /tauri-controls-svelte # Svelte implementation
├── /packages # Shared packages
├── package.json # Project configuration
├── pnpm-workspace.yaml # Workspace configuration
└── turbo.json # TurboRepo configuration如果您有兴趣做出贡献，请查看我们的待办事项清单，以获取可以提供帮助的任务。感谢您的贡献！
各个个人的贡献使该项目成为可能。感谢所有帮助使该项目变得更好的贡献者。
麻省理工学院
