tauri controls

Tauri Controls é uma biblioteca que fornece controles de janela de aparência nativa para aplicativos Tauri 2. Você pode aprimorar a experiência do usuário de seus aplicativos Tauri 2 com controles de janela que imitam os controles nativos idênticos no sistema atual.

tauri-controls usa as APIs JS/TS de Tauri para lidar com eventos de janela e apenas fornecem elementos HTML de aparência nativa (projetados de acordo com protótipos oficiais de design do sistema), não nativos, não depende das APIs nativas do sistema .

Os seguintes projetos são tomados como referência:

• Windows UI 3 @microsoft
• Apple Design Resources - MacOS @apple

Como usar

Instalar dependências

 # 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 projetos esbeltos , inclua a seguinte linha na seção content do seu tailwind.config.js :

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

Em seguida, inclua os seguintes plugins Tauri no seu diretório src-tauri :

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

Não se esqueça de registrar plugins em sua função 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" ) ;
}

Se você receber a mensagem "não é permitida pelo escopo" no terminal após uma construção de produção, tente isso.

Adicione ao seu código

E basta adicionar o componente WindowTitlebar ou WindowControls ao seu código, dependendo de suas necessidades:

Windowtitlebar

O componente WindowTitlebar lida com a barra de título da janela e ajusta dinamicamente os botões de controle da janela e a ordem do conteúdo da barra de título com base no sistema operacional atual.

 import { WindowTitlebar } from "tauri-controls"

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

Quando nenhuma plataforma for especificada, o sistema atual será detectado e o elemento correspondente será retornado. Esse recurso é uma ótima solução para versões cruzadas.

WindowsControls

Use o componente WindowControls apenas para controles de janela.

 import { WindowControls } from "tauri-controls"

function MyTitlebar ( ) {
  return < WindowControls />
} 

Mais exemplos:

• em React
• em esbelto
• em Solid.js
• em vue.js

Opções

WindowTitlebar :

• controlsOrder?: "right" | "left" | "platform" | "system" : especifica a ordem dos controles de janela. Plataforma : para obter o posicionamento baseado em OS especificado no WindowControlsProps . Sistema : Para detectar automaticamente a plataforma e posicionar os controles de acordo (padrão).
• windowControlsProps?: WindowControlsProps : adereços adicionais para passar para o componente WindowControls .

WindowControls :

• platform?: "windows" | "macos" | "gnome" : especifica que a janela da plataforma controla para exibir. Se a propriedade da plataforma não for especificada, a biblioteca detectará automaticamente o sistema operacional em que o aplicativo está em execução e exibirá o elemento apropriado.
• justify?: boolean : Se definido como true , WindowControls justificará/encaixarão no Flexbox onde está localizado.
• hide?: boolean : se definido como true , os controles da janela serão ocultos.
• hideMethod?: "display" | "visibility" : determina como os controles da janela serão ocultos.

Você também pode fornecer adereços adicionais a elementos, como data-tauri-drag-region , para aprimoramentos adicionais.

Figma

Confira a implementação do design no FIGMA para obter uma referência visual. Controles de janela nativa da área de trabalho - figma.

Essas fontes foram utilizadas:

• Windows UI 3 @microsoft
• Apple Design Resources - MacOS @apple
• MacOS Monterey Ui Kit para figma @joey
• Spotify Desktop App Clone @uidesignguide

Desenvolvimento e contribuição

bun dev

bun tauri:dev

Estrutura do projeto:

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

Se você estiver interessado em contribuir, consulte nossa lista de tarefas para as tarefas com as quais você pode ajudar. Suas contribuições são apreciadas!

Colaboradores

Este projeto é possível pelas contribuições de vários indivíduos. Obrigado a todos os colaboradores que ajudaram a melhorar esse projeto.

• Tauri-Controls, @tauri-controls/svelte : @agmmnn
• @Tauri-Controls/Solid : @ronanru
• @tauri-controls/vue : @allenli178

Leitura adicional

• Solicitação de recurso: Adicionar configuração para o estilo TitleBar com o suporte de controles de janelas nativo - Tauri -Apps/Tauri#2663
• Controles de janela sobreposição para aplicativos da web de desktop instalados - WICG
• Controles de janela sobreposição - elétron
• Controles de janela API sobreposição - mdn

Licença

Mit