tauri controls

Tauri Controls เป็นห้องสมุดที่ให้ การควบคุมหน้าต่าง แบบพื้นเมืองสำหรับแอปพลิเคชัน Tauri 2 คุณสามารถปรับปรุงประสบการณ์การใช้งานของแอปพลิเคชัน Tauri 2 ของคุณด้วยการควบคุมหน้าต่างที่เลียนแบบการควบคุมดั้งเดิมที่เหมือนกันในระบบปัจจุบัน

tauri-controls ใช้ JS/TS API ของ Tauri ในการจัดการเหตุการณ์หน้าต่างและให้บริการพื้นเมือง (ออกแบบตามต้นแบบการออกแบบระบบอย่างเป็นทางการ) องค์ประกอบ HTML ไม่ใช่พื้นเมือง มันไม่ได้พึ่งพา API ดั้งเดิมของระบบ

การออกแบบต่อไปนี้ถูกนำมาใช้เป็นข้อมูลอ้างอิง:

• windows ui 3 @microsoft
• แหล่งข้อมูลการออกแบบของ Apple - 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 ให้รวมบรรทัดต่อไปนี้ในส่วน 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

ส่วนประกอบ 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 />
} 

ตัวอย่างเพิ่มเติม:

• ในปฏิกิริยา
• ใน svelte
• เป็นของแข็ง js
• ใน vue.js

ตัวเลือก

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

แหล่งข้อมูลเหล่านี้ถูกนำมาใช้:

• windows ui 3 @microsoft
• แหล่งข้อมูลการออกแบบของ Apple - macOS @apple
• ชุด MacOS Monterey UI สำหรับ figma @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

หากคุณสนใจที่จะมีส่วนร่วมให้ตรวจสอบรายการสิ่งที่ต้องทำของเราสำหรับงานที่คุณสามารถช่วยได้ การมีส่วนร่วมของคุณได้รับการชื่นชม!

ผู้มีส่วนร่วม

โครงการนี้เกิดขึ้นได้จากการมีส่วนร่วมของบุคคลต่าง ๆ ขอบคุณผู้สนับสนุนทุกคนที่ช่วยให้โครงการนี้ดีขึ้น

• tauri-controls, @tauri-controls/svelte : @Agmmnn
• @tauri-controls/solid : @ronanru
• @tauri-controls/vue : @allenli178

การอ่านเพิ่มเติม

• คำขอคุณลักษณะ: เพิ่มการตั้งค่าสำหรับสไตล์แถบชื่อด้วยการสนับสนุนการควบคุมหน้าต่างพื้นเมือง - Tauri -Apps/Tauri#2663
• การควบคุมหน้าต่างซ้อนทับสำหรับแอพเดสก์ท็อปเว็บที่ติดตั้ง - WICG
• การควบคุมหน้าต่างซ้อนทับ - อิเล็กตรอน
• หน้าต่างควบคุม API ซ้อนทับ - MDN

ใบอนุญาต

มิกซ์