tauri controls

Tauri Controls ist eine Bibliothek, die nativ aussehende Fenstersteuerung für Tauri 2-Anwendungen bietet. Sie können die Benutzererfahrung Ihrer Tauri 2 -Anwendungen mit Fenstersteuerungen verbessern, die die identischen nativen Steuerelemente am aktuellen System nachahmen.

tauri-controls verwendet die JS/TS-APIs von Tauri, um Fensterveranstaltungen zu verarbeiten, und bietet nur nativ aussehende HTML-Elemente (entworfen nach offiziellen Systemdesign-Prototypen). Sie stützt sich nicht auf die nativen APIs des Systems .

Die folgenden Entwürfe werden als Referenz angenommen:

• Windows UI 3 @microsoft
• Apple Design Resources - macOS @Apple

Wie man benutzt

Abhängigkeiten installieren

 # 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

Fügen Sie für Folgenprojekte die folgende Zeile in den content Ihres tailwind.config.js auf:

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

Stellen Sie dann sicher, dass Sie die folgenden Tauri-Plugins in Ihr src-tauri -Verzeichnis aufnehmen:

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

Vergessen Sie nicht, Plugins in Ihrer Hauptfunktion zu registrieren.

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

Wenn Sie nach einem Produktionsaufbau die Nachricht "nicht vom Zielfernrohr" im Terminal erhalten, versuchen Sie dies.

Fügen Sie Ihrem Code hinzu

Fügen Sie einfach die Komponente WindowTitlebar oder WindowControls in Ihrem Code hinzu, abhängig von Ihren Anforderungen:

Fenstertitlebar

Die WindowTitlebar -Komponente verarbeitet die Fenster -Titelleiste und passt dynamisch die Fenstersteuerung und die Titelbank -Inhaltsreihenfolge an, basierend auf dem aktuellen Betriebssystem.

 import { WindowTitlebar } from "tauri-controls"

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

Wenn keine Plattform angegeben ist, wird das aktuelle System erkannt und das Matching -Element wird zurückgegeben. Diese Funktion ist eine großartige Lösung für plattformübergreifende Veröffentlichungen.

Fensterkontrolle

Verwenden Sie die WindowControls -Komponente nur für Fenstersteuerungen.

 import { WindowControls } from "tauri-controls"

function MyTitlebar ( ) {
  return < WindowControls />
} 

Weitere Beispiele:

• in React
• in Sufle
• in Solid.js
• in Vue.js

Optionen

WindowTitlebar :

• controlsOrder?: "right" | "left" | "platform" | "system" : Gibt die Reihenfolge der Fenstersteuerungen an. Plattform : Um die in WindowsControlSprops angegebene OS-basierte Positionierung zu erhalten. System : Um die Plattform automatisch zu erkennen und die Steuerelemente entsprechend zu positionieren (Standard).
• windowControlsProps?: WindowControlsProps WindowControls

WindowControls :

• platform?: "windows" | "macos" | "gnome" : Gibt an, welche Fenster der Plattform angezeigt werden soll. Wenn die Plattformeigenschaft nicht angegeben ist, erkennt die Bibliothek das Betriebssystem automatisch, auf dem die App ausgeführt wird, und zeigt das entsprechende Element an.
• justify?: boolean : Wenn auf true gesetzt wird, werden WindowControls in der Flexbox, in der es sich befindet, rechtfertigen/einschnappen.
• hide?: boolean : Wenn auf true gesetzt, werden die Fenstersteuerungen versteckt.
• hideMethod?: "display" | "visibility" : Bestimmt, wie die Fenstersteuerungen verborgen werden.

Für weitere Verbesserungen können Sie auch zusätzliche Requisiten für Elemente wie data-tauri-drag-region bereitstellen.

Figma

Schauen Sie sich die Designimplementierung in Figma für eine visuelle Referenz an. Desktop native Fenstersteuerung - Figma.

Diese Quellen wurden verwendet:

• Windows UI 3 @microsoft
• Apple Design Resources - macOS @Apple
• Macos Monterey UI Kit für Figma @joey
• Spotify Desktop App Clone @UiDeisignguide

Entwicklung und Beitrag

bun dev

bun tauri:dev

Projektstruktur:

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

Wenn Sie einen Beitrag leisten möchten, lesen Sie unsere Todo -Liste für Aufgaben, bei denen Sie helfen können. Ihre Beiträge werden geschätzt!

Mitwirkende

Dieses Projekt wird durch die Beiträge verschiedener Personen ermöglicht. Vielen Dank an alle Mitwirkenden, die dazu beigetragen haben, dieses Projekt besser zu machen.

• tauri-controls, @tauri-controls/svelte : @agmmnn
• @Tauri-Controls/Solid : @Ronanru
• @Tauri-Controls/Vue : @Allenli178

Weitere Lesen

• Feature -Anforderung: Fügen Sie die Einstellung für den Titelkundenstil mit nativen Fenstersteuerungen hinzu - Tauri -Apps/Tauri#2663
• Fenstersteuerung Overlay für installierte Desktop -Web -Apps - WICG
• Fenstersteuerung Overlay - Elektron
• Fenstersteuerung Overlay API - MDN

Lizenz

MIT