tauri controls
v0.4.0
Tauri Controlsは、タウリ2アプリケーション用のネイティブに見えるウィンドウコントロールを提供するライブラリです。現在のシステム上の同一のネイティブコントロールを模倣するウィンドウコントロールを使用して、Tauri 2アプリケーションのユーザーエクスペリエンスを強化できます。
tauri-controls 、タウリの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-mergeSvelteプロジェクトの場合、
tailwind.config.jsのcontentセクションに次の行を含めます。"./node_modules/@tauri-controls/svelte/**/*.{js,svelte,ts}"
次に、 src-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が配置されているFlexBoxで正当化/スナップします。hide?: boolean ： trueに設定すると、ウィンドウコントロールが非表示になります。hideMethod?: "display" | "visibility" ：ウィンドウコントロールがどのように非表示になるかを決定します。また、さらなる機能強化のために、 data-tauri-drag-regionなどの要素に追加の小道具を提供することもできます。
視覚的な参照については、Figmaの設計実装をご覧ください。デスクトップネイティブウィンドウコントロール-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貢献に興味がある場合は、お手伝いできるタスクについては、TODOリストをご覧ください。あなたの貢献は大歓迎です！
このプロジェクトは、さまざまな個人の貢献によって可能になりました。このプロジェクトをより良くするのを手伝ってくれたすべての貢献者に感謝します。
mit
