π₯ Native-looking window controls for Tauri 2. React, Solid, Vue, Svelte+Tailwind.
MIT License
Bot releases are hidden (Show)
Published by agmmnn 9 months ago
Published by agmmnn about 1 year ago
Published by agmmnn about 1 year ago
Published by agmmnn about 1 year ago
Big thanks to @allenli178, tauri-controls is now also available for Vue.js 3.
Check out the pull request here #11 π
pnpm add @tauri-controls/vue
<script setup lang="ts">
import { WindowTitlebar } from "@tauri-controls/solid"
</script>
<template>
<WindowTitlebar>{/* Place your titlebar content here */}</WindowTitlebar>
</template>
Published by agmmnn about 1 year ago
A big shoutout to @ronanru, tauri-controls is now also available for Solid.js.
Check out the pull request here #8 π
pnpm add @tauri-controls/solid
import { WindowTitlebar } from "@tauri-controls/solid"
function MyTitlebar() {
return (
<WindowTitlebar>{/* Place your titlebar content here */}</WindowTitlebar>
)
}
Published by agmmnn about 1 year ago
justify
option to WindowControls
: When set to true, WindowControls will justify/snap within the flexbox container it is placed in.Tauri Controls has been implemented for Svelte/Sveltekit, you can easily install it for svelte following the same installation steps except the extra tailwind step.
pnpm add @tauri-controls/svelte
<script lang="ts">
import { WindowTitlebar } from "@tauri-controls/svelte"
</script>
<WindowTitlebar>{/* Place your titlebar content here */}</WindowTitlebar>
Check out the Tauri app demo with pnpm tauri dev
: master
/apps/tauri-controls-svelte
All templates in tauri-ui now contain tauri-controls
. https://github.com/agmmnn/tauri-ui/releases/tag/v0.3.0
Published by agmmnn about 1 year ago
Published by agmmnn about 1 year ago
TauriAppWindowProvider
: contexts/plugin-windowPublished by agmmnn about 1 year ago
mr
used instead of gap
(Safari<14.1 doesnt support flex gap: https://www.falldowngoboone.com/blog/the-curious-case-of-flexbox-gap-and-safari/)bg-background
, overflow-hidden
attributes added. cd59f8f
Published by agmmnn about 1 year ago
WindowTitlebar
component.hide
, hideMethod
options to WindowControls
.WindowTitlebar component handles the window controls and dynamically adjusts the control buttons and titlebar content order based on the current operating system.
Usage:
<WindowTitlebar>
{/* Place your titlebar content here */}
</WindowTitlebar>
Options:
controlsOrder?: "right" | "left" | "platform"
: Specify the position of window controls. leave it undefined
for default OS-based positioning or use "right" for right-aligned, "left" for left-aligned, "platform" for OS-based positioning specified in windowControlsProps
.windowControlsProps?: WindowControls
// this will show only macos controls with macos order
<WindowTitlebar
controlsOrder="platform"
windowControlsProps={{platform: "macos"}}
>
{/* Place your titlebar content here. Menu, app icon, window title etc. */}
</WindowTitlebar>
Published by agmmnn about 1 year ago