tauri controls

Tauri Controls es una biblioteca que proporciona controles de ventana de aspecto nativo para aplicaciones Tauri 2. Puede mejorar la experiencia del usuario de sus aplicaciones Tauri 2 con controles de ventanas que imitan los controles nativos idénticos en el sistema actual.

tauri-controls utiliza las API JS/TS de Tauri para manejar eventos de ventana y solo proporciona elementos HTML de diseño nativo (diseñado de acuerdo con el diseño del sistema), no es nativo, no depende de las API nativas del sistema .

Los siguientes diseños se toman como referencia:

• Windows UI 3 @microsoft
• Recursos de diseño de Apple - macOS @apple

Cómo usar

Instalar dependencias

 # 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

Para los proyectos SVELTE , incluya la siguiente línea en la sección content de su tailwind.config.js :

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

Luego, asegúrese de incluir los siguientes complementos Tauri en su directorio src-tauri :

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

No olvide registrar complementos en su función principal.

 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 recibe el mensaje "no permitido por el alcance" en el terminal después de una construcción de producción, intente esto.

Agregar a su código

Y simplemente agregue el componente WindowTitlebar o WindowControls a su código, dependiendo de sus necesidades:

Ventana

El componente WindowTitlebar maneja la barra de título de la ventana y ajusta dinámicamente los botones de control de la ventana y el orden de contenido de la barra de título en función del sistema operativo actual.

 import { WindowTitlebar } from "tauri-controls"

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

Cuando no se especifica ninguna plataforma, se detectará el sistema actual y se devolverá el elemento coincidente. Esta característica es una gran solución para versiones multiplataforma.

Controles de Windows

Use el componente WindowControls solo para los controles de la ventana.

 import { WindowControls } from "tauri-controls"

function MyTitlebar ( ) {
  return < WindowControls />
} 

Más ejemplos:

• en reaccionar
• en esbelto
• en sólido.js
• en vue.js

Opción

WindowTitlebar :

• controlsOrder?: "right" | "left" | "platform" | "system" : Especifica el orden de los controles de la ventana. Plataforma : para obtener el posicionamiento basado en el sistema operativo especificado en WindowControlSprops . Sistema : para detectar automáticamente la plataforma y colocar los controles en consecuencia (predeterminado).
• windowControlsProps?: WindowControlsProps : accesorios adicionales para pasar al componente WindowControls .

WindowControls :

• platform?: "windows" | "macos" | "gnome" : especifica qué ventana de plataforma controla para mostrar. Si no se especifica la propiedad de la plataforma , la biblioteca detectará automáticamente el sistema operativo en el que se ejecuta la aplicación y mostrará el elemento apropiado.
• justify?: boolean : si se establece en true , WindowControls justificará/romperá en el FlexBox donde se encuentra.
• hide?: boolean : si se establece en true , los controles de la ventana se ocultarán.
• hideMethod?: "display" | "visibility" : determina cómo se ocultarán los controles de la ventana.

También puede proporcionar accesorios adicionales a los elementos, como data-tauri-drag-region , para mejorar más.

Figma

Consulte la implementación de diseño en Figma para obtener una referencia visual. Controles de la ventana nativa de escritorio - Figma.

Estas fuentes fueron utilizadas:

• Windows UI 3 @microsoft
• Recursos de diseño de Apple - macOS @apple
• Kit de interfaz de usuario de MacOS Monterey para figma @joey
• Spotify Desktop App Clone @uidesignguide

Desarrollo y contribución

bun dev

bun tauri:dev

Estructura del proyecto:

 .
├── /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 está interesado en contribuir, consulte nuestra lista de tareas con las que puede ayudar. ¡Sus contribuciones son apreciadas!

Colaboradores

Este proyecto es posible gracias a las contribuciones de varios individuos. Gracias a todos los contribuyentes que han ayudado a mejorar este proyecto.

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

Lectura adicional

• Solicitud de función: Agregue la configuración para el estilo de la barra de título con soporte de controles de ventana nativos - Tauri -aps/Tauri#2663
• Ventana Controles de superposición para aplicaciones web de escritorio instaladas - Wicg
• Ventana Controles de superposición - Electron
• API de superposición de controles de la ventana - MDN

Licencia

MIT