tauri controls

Tauri Controls -это библиотека, которая обеспечивает элементы управления окнами , напоминающими, для приложений Tauri 2. Вы можете улучшить пользовательский опыт ваших приложений Tauri 2 с помощью элементов управления окнами, которые имитируют идентичные собственные элементы управления в текущей системе.

tauri-controls использует API-интерфейсы Tauri JS/TS для обработки оконных событий и просто обеспечивает народные (разработанные в соответствии с официальными прототипами проектирования системы) HTML-элементы, а не нативные, он не зависит от нативных API системы .

Следующие конструкции принимаются в качестве ссылки:

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

Как использовать

Установить зависимости

 # 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

Для стройных проектов включите следующую строку в раздел content вашего tailwind.config.js :

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

Затем обязательно включите следующие плагины Tauri в свой каталог src-tauri :

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

Не забудьте зарегистрировать плагины в вашей основной функции.

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

Если вы получите сообщение «не разрешено массовым» в терминале после производственной сборки, попробуйте это.

Добавьте в свой код

И просто добавьте в свой код компонент WindowTitlebar или WindowControls , в зависимости от ваших потребностей:

Windowtitlebar

Компонент WindowTitlebar обрабатывает картину заголовка окна и динамически настраивает кнопки управления окном и порядок контента заголовка на основе текущей операционной системы.

 import { WindowTitlebar } from "tauri-controls"

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

Когда платформа не будет указана, текущая система будет обнаружена, и соответствующий элемент будет возвращен. Эта функция является отличным решением для кроссплатформенных выпусков.

Windowcontrols

Используйте компонент WindowControls только для управления окнами.

 import { WindowControls } from "tauri-controls"

function MyTitlebar ( ) {
  return < WindowControls />
} 

Больше примеров:

• в реагировании
• в строй
• в Solid.js
• в Vue.js

Параметры

WindowTitlebar :

• controlsOrder?: "right" | "left" | "platform" | "system" : определяет порядок управления окном. Платформа : чтобы получить позиционирование на основе ОС в WindowsControlsProps . Система : для автоматического обнаружения платформы и соответствующим образом расположить элементы управления (по умолчанию).
• windowControlsProps?: WindowControlsProps : Дополнительные реквизиты для передачи в компонент WindowControls .

WindowControls :

• platform?: "windows" | "macos" | "gnome" : указывает, как управляет окном платформы для отображения. Если свойство платформы не указано, библиотека автоматически обнаружит операционную систему, в которой работает приложение, и отобразит соответствующий элемент.
• justify?: boolean : если установить на true , WindowControls оправдывает/защелачивается в Flexbox, где он находится.
• true hide?: boolean
• hideMethod?: "display" | "visibility" : определяет, как управление окном будет скрыто.

Вы также можете предоставить дополнительные реквизиты для элементов, таких как data-tauri-drag-region , для дальнейших улучшений.

Фигма

Проверьте реализацию дизайна на Figma для визуальной справки. Управление народным окном на рабочем столе - Figma.

Эти источники были использованы:

• Windows UI 3 @microsoft
• Apple Design Resources - macOS @apple
• MacOS Monterey UI Kit для Figma @joey
• Spotify Desktop App Clone @uidesignguide

Разработка и вклад

bun dev

bun tauri:dev

Структура проекта:

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

Если вы заинтересованы в участии, ознакомьтесь с нашим списком TODO для задач, с которыми вы можете помочь. Ваш вклад приветствуются!

Участники

Этот проект стал возможным благодаря вкладу различных людей. Спасибо всем участникам, которые помогли сделать этот проект лучше.

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

Дальнейшее чтение

• Запрос на функции: добавить настройку для стиля титула с поддержкой нативного управления окном - Tauri -Apps/Tauri#2663
• Оверлей управления окнами для установленных настольных веб -приложений - WICG
• Оверловое наложение управления окном - электрон
• Окно управление наложением API - MDN

Лицензия

Грань