tauri controls
v0.4.0
Tauri Controls 는 Tauri 2 응용 프로그램에 대한 기본적인 창 컨트롤을 제공하는 라이브러리입니다. 현재 시스템의 동일한 기본 컨트롤을 모방하는 Window 컨트롤을 사용하여 Tauri 2 응용 프로그램의 사용자 경험을 향상시킬 수 있습니다.
tauri-controls Tauri의 JS/TS API를 사용하여 Window 이벤트를 처리하고 기본적으로 보입니다 (공식 시스템 설계 프로토 타입에 따라 설계) HTML 요소는 기본이 아닌 시스템의 기본 API에 의존하지 않습니다 .
다음 디자인은 참조로 사용됩니다.
# 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-mergeSvelte 프로젝트의 경우
tailwind.config.js의content섹션에 다음 줄을 포함시킵니다."./node_modules/@tauri-controls/svelte/**/*.{js,svelte,ts}"
그런 다음 src-tauri 디렉토리에 다음 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" ) ;
}프로덕션 빌드 후 터미널에서 "SCOPE로 허용되지 않는"메시지를 받으면이 작업을 시도하십시오.
필요에 따라 WindowTitlebar 또는 WindowControls 구성 요소를 코드에 추가하기 만하면됩니다.
WindowTitlebar 구성 요소는 Window Titlebar를 처리하고 현재 운영 체제를 기반으로 Window Control 버튼 및 Titlebar 컨텐츠 순서를 동적으로 조정합니다.
import { WindowTitlebar } from "tauri-controls"
function MyTitlebar ( ) {
return (
< WindowTitlebar > { /* Place your titlebar content here */ } </ WindowTitlebar >
)
}플랫폼이 지정되지 않으면 현재 시스템이 감지되고 일치하는 요소가 반환됩니다. 이 기능은 크로스 플랫폼 릴리스를위한 훌륭한 솔루션입니다.
WindowControls 구성 요소를 Window 컨트롤에만 사용하십시오.
import { WindowControls } from "tauri-controls"
function MyTitlebar ( ) {
return < WindowControls />
} 
WindowTitlebar :controlsOrder?: "right" | "left" | "platform" | "system" : 창 제어 순서를 지정합니다. 플랫폼 : WindowControlSprops 에 OS 기반 포지셔닝을 지정합니다. 시스템 : 플랫폼을 자동으로 감지하고 그에 따라 컨트롤을 배치합니다 (기본값).windowControlsProps?: WindowControlsProps : WindowControls 구성 요소로 전달할 추가 소품.WindowControls :platform?: "windows" | "macos" | "gnome" : 표시 할 플랫폼의 창 컨트롤을 지정합니다. 플랫폼 속성이 지정되지 않은 경우 라이브러리는 앱이 실행중인 운영 체제를 자동으로 감지하고 적절한 요소를 표시합니다.justify?: boolean : true 로 설정되면 WindowControls Flexbox가 위치한 곳에서 정당화/스냅됩니다.hide?: boolean : true 로 설정되면 창 제어가 숨겨집니다.hideMethod?: "display" | "visibility" : 창 컨트롤이 어떻게 숨겨 질지 결정합니다. 또한 추가 향상을 위해 data-tauri-drag-region 과 같은 요소에 추가 소품을 제공 할 수도 있습니다.
시각적 참조는 Figma의 디자인 구현을 확인하십시오. 데스크탑 기본 창 컨트롤 - Figma.
이러한 출처는 다음과 같습니다.
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 목록을 확인하십시오. 당신의 기여는 감사합니다!
이 프로젝트는 다양한 개인의 기여로 가능합니다. 이 프로젝트를 개선하는 데 도움을 준 모든 기고자들에게 감사합니다.
MIT
