tauri controls下載tauri controls源代碼下載

tauri controls

其他源碼

v0.4.0

下載

Tauri Controls是一個為Tauri 2應用程序提供本地外觀窗口控件的庫。您可以使用模仿當前系統上相同的本機控件的窗口控件來增強Tauri 2應用程序的用戶體驗。

tauri-controls使用Tauri的JS/TS API來處理窗口事件，並且僅提供本地外觀（根據官方系統設計原型設計）HTML元素，而不是本機，它不依賴於系統的本機API 。

以下設計作為參考：

Windows UI 3 @microsoft
蘋果設計資源-Macos @Apple

如何使用

安裝依賴項

 # 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

WindowTitlebar組件處理窗口標題欄，並根據當前操作系統動態調整窗口控制按鈕和標題欄內容順序。

 import { WindowTitlebar } from "tauri-controls"

function MyTitlebar ( ) {
  return (
    < WindowTitlebar > { /* Place your titlebar content here */ } </ WindowTitlebar >
  )
}

當未指定平台時，將檢測到當前系統，並將返回匹配元素。此功能是跨平台發布的絕佳解決方案。

WindowControls

僅將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上的設計實現，以獲取視覺參考。桌面本地窗口控件 - 無花果。

這些來源被利用：

Windows UI 3 @microsoft
蘋果設計資源-Macos @Apple
Macos Monterey UI套件，用於無花果@Joey
Spotify桌面應用程序克隆@UidesignGuide

發展和貢獻

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