tauri controls
v0.4.0
Tauri Controls هي مكتبة توفر عناصر التحكم في النوافذ ذات المظهر الأصلي لتطبيقات Tauri 2. يمكنك تعزيز تجربة المستخدم لتطبيقات Tauri 2 الخاصة بك مع عناصر تحكم النافذة التي تحاكي عناصر التحكم الأصلية المتطابقة على النظام الحالي.
يستخدم tauri-controls واجهات برمجة تطبيقات JS/TS من Tauri للتعامل مع أحداث النوافذ ويوفر فقط عناصر HTML ذات المظهر الأصلي (المصمم وفقًا لنماذج تصميم النظام الرسمية) ، وليس الأصلي ، ولا يعتمد على واجهات برمجة التطبيقات الأصلية للنظام .
تؤخذ التصميمات التالية كمرجع:
# 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 ، قم بتضمين السطر التالي في قسم
contentفيtailwind.config.js:"./node_modules/@tauri-controls/svelte/**/*.{js,svelte,ts}"
بعد ذلك ، تأكد من تضمين مكونات Tauri التالية في دليل 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 . النظام : لاكتشاف النظام الأساسي تلقائيًا ووضع عناصر التحكم وفقًا لذلك (افتراضي).windowControlsProps?: WindowControlsProps : الدعائم الإضافية للانتقال إلى مكون WindowControls .WindowControls :platform?: "windows" | "macos" | "gnome" : يحدد عناصر التحكم في نافذة النظام الأساسي لعرضها. إذا لم يتم تحديد خاصية النظام الأساسي ، فسوف تكتشف المكتبة تلقائيًا نظام التشغيل الذي يعمل عليه التطبيق وعرض العنصر المناسب.justify?: boolean : إذا تم ضبطه على true ، فإن WindowControls سوف يبرر/snap في 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 للمهام التي يمكنك المساعدة فيها. مساهماتك موضع تقدير!
أصبح هذا المشروع ممكنًا من خلال مساهمات مختلف الأفراد. شكرا لجميع المساهمين الذين ساعدوا في جعل هذا المشروع أفضل.
معهد ماساتشوستس للتكنولوجيا
