tauri controls

Tauri Controls est une bibliothèque qui fournit des commandes de fenêtres d'apparence native pour les applications Tauri 2. Vous pouvez améliorer l'expérience utilisateur de vos applications Tauri 2 avec des commandes de fenêtres qui imitent les commandes natives identiques du système actuel.

tauri-controls utilise les API JS / TS de Tauri pour gérer les événements de fenêtre et fournit simplement des éléments HTML d'apparence native (conçue selon les prototypes de conception du système officiel), et non natifs, il ne s'appuie pas sur les API natives du système .

Les conceptions suivantes sont prises comme référence:

• Windows UI 3 @microsoft
• Ressources de conception Apple - macOS @Apple

Comment utiliser

Installer des dépendances

 # 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

Pour les projets Svelte , incluez la ligne suivante dans la section content de votre tailwind.config.js :

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

Ensuite, assurez-vous d'inclure les plugins Tauri suivants dans votre répertoire src-tauri :

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

N'oubliez pas d'enregistrer les plugins dans votre fonction principale.

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

Si vous obtenez le message "non autorisé par la portée" dans le terminal après une construction de production, essayez ceci.

Ajouter à votre code

Et ajoutez simplement le composant WindowTitlebar ou WindowControls à votre code, en fonction de vos besoins:

Fenêtre

Le composant WindowTitlebar gère la barre de titre de fenêtre et ajuste dynamiquement les boutons de commande de fenêtre et l'ordre de contenu de la barre de titre en fonction du système d'exploitation actuel.

 import { WindowTitlebar } from "tauri-controls"

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

Lorsqu'aucune plate-forme n'est spécifiée, le système actuel sera détecté et l'élément correspondant sera retourné. Cette fonctionnalité est une excellente solution pour les versions multiplateforme.

Contraintes de fenêtre

Utilisez le composant WindowControls uniquement pour les commandes de fenêtre.

 import { WindowControls } from "tauri-controls"

function MyTitlebar ( ) {
  return < WindowControls />
} 

Plus d'exemples:

• en réaction
• en svelte
• dans Solid.js
• dans Vue.js

Options

WindowTitlebar :

• controlsOrder?: "right" | "left" | "platform" | "system" : Spécifie l'ordre des commandes de fenêtre. Plateforme : pour obtenir un positionnement basé sur le système d'exploitation spécifié dans WindowControlsProps . Système : pour détecter automatiquement la plate-forme et positionner les commandes en conséquence (par défaut).
• windowControlsProps?: WindowControlsProps : accessoires supplémentaires à passer au composant WindowControls .

WindowControls :

• platform?: "windows" | "macos" | "gnome" : spécifie les commandes de fenêtre de la plate-forme à afficher. Si la propriété de la plate-forme n'est pas spécifiée, la bibliothèque détectera automatiquement le système d'exploitation sur lequel l'application s'exécute et affiche l'élément approprié.
• justify?: boolean : Si réglé sur true , WindowControls justifie / s’encouragera dans le Flexbox où il se trouve.
• hide?: boolean : Si réglé sur true , les commandes de fenêtre seront cachées.
• hideMethod?: "display" | "visibility" : détermine comment les commandes de fenêtre seront cachées.

Vous pouvez également fournir des accessoires supplémentaires aux éléments, tels que data-tauri-drag-region , pour d'autres améliorations.

Figure

Consultez l'implémentation de conception sur FIGMA pour une référence visuelle. Contrôles de fenêtre natifs de bureau - Figma.

Ces sources ont été utilisées:

• Windows UI 3 @microsoft
• Ressources de conception Apple - macOS @Apple
• Kit d'interface utilisateur MacOS Monterey pour Figma @Joey
• Clone d'application Spotify Desktop @UideSignGuide

Développement et contribution

bun dev

bun tauri:dev

Structure du projet:

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

Si vous souhaitez contribuer, consultez notre liste de tâches pour les tâches que vous pouvez aider. Vos contributions sont appréciées!

Contributeurs

Ce projet est rendu possible par les contributions de diverses personnes. Merci à tous les contributeurs qui ont contribué à améliorer ce projet.

• Tauri-Controls, @ Tauri-Controls / Svelte : @agmmnn
• @ Tauri-Controls / Solid : @ronanru
• @ Tauri-Controls / Vue : @ Allenli178

Dès la lecture

• Demande de fonction: Ajouter un paramètre pour le style de la barre de titre avec la prise en charge des commandes de fenêtre natives - Tauri-Apps / Tauri # 2663
• Contrôles de fenêtre superposition pour les applications Web de bureau installées - WICG
• Recherche de commandes de fenêtre - électron
• API de superposition des commandes de fenêtre - MDN

Licence

Mit