Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/vinlemon/window-controls
Web components offering native-like window controls, primarily designed for Tauri 2.
https://github.com/vinlemon/window-controls
controls linux macos tauri tauri2 web-components window-controls windows
Last synced: 2 months ago
JSON representation
Web components offering native-like window controls, primarily designed for Tauri 2.
- Host: GitHub
- URL: https://github.com/vinlemon/window-controls
- Owner: vinlemon
- License: mit
- Created: 2024-05-30T19:24:17.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2024-06-10T08:23:52.000Z (7 months ago)
- Last Synced: 2024-10-11T18:08:04.724Z (2 months ago)
- Topics: controls, linux, macos, tauri, tauri2, web-components, window-controls, windows
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/@vinlemon/window-controls
- Size: 374 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://window-controls.vinlemon.com/)
[](https://www.npmjs.com/package/@vinlemon/window-controls)
## Introduction
For a preview, visit: [window-controls.vinlemon.com](https://window-controls.vinlemon.com/)
Built using the [lit](https://lit.dev/) library, these components are available:
- `WindowControls`: Displays window controls for all operating systems.
- `MacOsControls`, `WindowsControls`, `GnomeControls`: Display window controls for their respective operating systems.
This web component follows the [open-wc](https://github.com/open-wc/open-wc) recommendation.
This project takes inspiration from [tauri-controls](https://github.com/agmmnn/tauri-controls).
### Installation
```bash
npm i @vinlemon/window-controls
```
### Quick Usage
```html
import '@vinlemon/window-controls/window-controls.js';
```
### Example with Tauri 2
```js
import "@vinlemon/window-controls/window-controls.js";
import { Window } from "@tauri-apps/api/window";
import { platform } from "@tauri-apps/plugin-os";
const windowControls = document.createElement("window-controls");
const appWindow = new Window("main");
platform.then((currentPlatform) => {
window.document.body.appendChild(windowControls);
windowControls.os = currentPlatform;
windowControls.minimize = appWindow.minimize;
windowControls.maximize = appWindow.toggleMaximize;
windowControls.close = appWindow.close;
});
appWindow.listen("tauri://focus", () => {
if (windowControls) {
windowControls.inactive = false;
}
});
appWindow.listen("tauri://blur", () => {
if (windowControls) {
windowControls.inactive = true;
}
});
```
## Options
### `WindowControls`:
- **os**: Specifies the operating system. Accepts `"macos"`, `"windows"`, or `"linux"`.
- **inactive**: Boolean to indicate if the window is inactive.
- **minimize**: Function to minimize the window.
- **maximize**: Function to maximize the window.
- **close**: Function to close the window.
### `MacOsControls`:
- **inactive**: Boolean to indicate if the window is inactive.
- **minimize**: Function to minimize the window.
- **maximize**: Function to maximize the window.
- **close**: Function to close the window.
### `WindowsControls`:
- **minimize**: Function to minimize the window.
- **maximize**: Function to maximize the window.
- **close**: Function to close the window.
### `GnomeControls`:
- **minimize**: Function to minimize the window.
- **maximize**: Function to maximize the window.
- **close**: Function to close the window.
## License
MIT