window-control-fc window-drag-fc monitor-switcher-fc Combined Tauri API

window-control-fc

Shows close/minimize for windows, quit/hide for app context. Requires Tauri runtime. Window context App/Tray context <window-control-fc data-context="window"></window-control-fc> <window-control-fc data-context="app" data-app-name="My App"></window-control-fc>

window-drag-fc

Draggable region for moving windows. Uses Tauri's data-tauri-drag-region. Drag handle Grab to drag <window-drag-fc></window-drag-fc>

monitor-switcher-fc

Multi-monitor management. Only visible with 2+ monitors. Requires Tauri plugin. Monitor switcher (Hidden if single monitor) <monitor-switcher-fc></monitor-switcher-fc>

Combined Header Example

All three components in a typical header layout. <header> <window-control-fc></window-control-fc> <window-drag-fc></window-drag-fc> <spacer></spacer> <monitor-switcher-fc></monitor-switcher-fc> </header>

Tauri Requirements

Dependency	Required For
window.__TAURI__	All components
plugin:window-controls	Close, minimize, hide, quit, monitors

Plugin Commands

Command	Args
window_close	{ label }
window_minimize	{ label }
window_hide	{ label }
quit_app	none
get_monitor_list	none
set_window_on_monitor_index	{ index }

Import

<!-- Styles --> <link rel="stylesheet" href="window-control/window-control.css"> <link rel="stylesheet" href="window-drag/window-drag.css"> <link rel="stylesheet" href="monitor-switcher/monitor-switcher.css"> <!-- All components --> <script type="module" src="index.js"></script> <!-- Or individual --> <script type="module" src="window-control/window-control.js"></script>

Tauri Bridge

import { pluginInvoke, getCurrentWindow } from './shared/tauri-bridge.js'; await pluginInvoke('window_close', { label: 'main' }); const win = getCurrentWindow(); console.log(win?.label);