tauri controls

Tauri Controls adalah perpustakaan yang menyediakan kontrol jendela yang tampak asli untuk aplikasi Tauri 2. Anda dapat meningkatkan pengalaman pengguna aplikasi Tauri 2 Anda dengan kontrol jendela yang meniru kontrol asli yang identik pada sistem saat ini.

tauri-controls menggunakan API JS/TS Tauri untuk menangani acara jendela dan hanya menyediakan elemen html yang tampak asli (dirancang sesuai dengan prototipe sistem resmi), bukan asli, itu tidak bergantung pada API asli sistem .

Desain berikut diambil sebagai referensi:

• Windows ui 3 @microsoft
• Apple Design Resources - MacOS @Apple

Cara menggunakan

Instal dependensi

 # 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

Untuk proyek SVELT , sertakan baris berikut di bagian content tailwind.config.js Anda:

 "./node_modules/@tauri-controls/svelte/**/*.{js,svelte,ts}"

Kemudian, pastikan untuk memasukkan plugin Tauri berikut di direktori src-tauri Anda:

cargo add tauri-plugin-window tauri-plugin-os

Jangan lupa untuk mendaftarkan plugin di fungsi utama Anda.

 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" ) ;
}

Jika Anda mendapatkan pesan "tidak diizinkan dengan ruang lingkup" di terminal setelah pembangunan produksi, cobalah ini.

Tambahkan ke kode Anda

Dan cukup tambahkan komponen WindowTitlebar atau WindowControls ke kode Anda, tergantung pada kebutuhan Anda:

Windowtitlebar

Komponen WindowTitlebar menangani titlebar jendela dan secara dinamis menyesuaikan tombol kontrol jendela dan urutan konten titlebar berdasarkan sistem operasi saat ini.

 import { WindowTitlebar } from "tauri-controls"

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

Ketika tidak ada platform yang ditentukan, sistem saat ini akan terdeteksi dan elemen pencocokan akan dikembalikan. Fitur ini adalah solusi yang bagus untuk rilis lintas platform.

WindowControls

Gunakan komponen WindowControls hanya untuk kontrol jendela.

 import { WindowControls } from "tauri-controls"

function MyTitlebar ( ) {
  return < WindowControls />
} 

Lebih banyak contoh:

• dalam bereaksi
• di Svelte
• dalam solid.js
• di vue.js

Opsi

WindowTitlebar :

• controlsOrder?: "right" | "left" | "platform" | "system" : Menentukan urutan kontrol jendela. Platform : Untuk mendapatkan posisi berbasis OS yang ditentukan dalam WindowControlSprops . Sistem : Untuk secara otomatis mendeteksi platform dan memposisikan kontrol yang sesuai (default).
• windowControlsProps?: WindowControlsProps : Alat peraga tambahan untuk diteruskan ke komponen WindowControls .

WindowControls :

• platform?: "windows" | "macos" | "gnome" : Menentukan kontrol jendela platform mana yang akan ditampilkan. Jika properti platform tidak ditentukan, pustaka akan secara otomatis mendeteksi sistem operasi, aplikasi sedang berjalan dan menampilkan elemen yang sesuai.
• justify?: boolean : Jika diatur ke true , WindowControls akan membenarkan/mengambil flexbox di mana ia berada.
• hide?: boolean : Jika diatur ke true , kontrol jendela akan disembunyikan.
• hideMethod?: "display" | "visibility" : Menentukan bagaimana kontrol jendela akan disembunyikan.

Anda juga dapat memberikan alat peraga tambahan untuk elemen, seperti data-tauri-drag-region , untuk peningkatan lebih lanjut.

Figma

Lihat implementasi desain di Figma untuk referensi visual. Kontrol Jendela Asli Desktop - Figma.

Sumber -sumber ini digunakan:

• Windows ui 3 @microsoft
• Apple Design Resources - MacOS @Apple
• Macos Monterey UI Kit untuk figma @joey
• Spotify Desktop App Clone @uidesignguide

Pengembangan dan kontribusi

bun dev

bun tauri:dev

Struktur Proyek:

 .
├── /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

Jika Anda tertarik untuk berkontribusi, lihat daftar TODO kami untuk tugas yang dapat Anda bantu. Kontribusi Anda dihargai!

Kontributor

Proyek ini dimungkinkan oleh kontribusi berbagai individu. Terima kasih untuk semua kontributor yang telah membantu membuat proyek ini lebih baik.

• Tauri-Controls, @Tauri-Controls/Svelte : @agmmnn
• @tauri-controls/solid : @ronanru
• @tauri-controls/vue : @allenli178

Bacaan lebih lanjut

• Permintaan Fitur: Tambah Pengaturan untuk Gaya TitleBar Dengan Dukungan Kontrol Jendela Asli - Tauri -Apps/Tauri#2663
• Overlay Kontrol Jendela Untuk Aplikasi Web Desktop Terpasang - WICG
• Overlay Kontrol Jendela - Elektron
• Window Controls Overlay API - MDN

Lisensi

Mit