Window Customization
Tauri provides lots of options for customizing the look and feel of your app’s window. You can create custom titlebars, have transparent windows, enforce size constraints, and more.
Configuration
There are three ways to change the window configuration:
Usage
Creating a Custom Titlebar
A common use of these window features is creating a custom titlebar. This short tutorial will guide you through that process.
tauri.conf.json
Set decorations
to false
in your tauri.conf.json
:
Permissions
Add window permissions in capability file.
By default, all plugin commands are blocked and cannot be accessed. You must define a list of permissions in your capabilities
configuration.
See the Capabilities Overview for more information and the step by step guide to use plugin permissions.
Permission | Description |
---|---|
core:window:default | Default permissions for the plugin. Except window:allow-start-dragging . |
core:window:allow-close | Enables the close command without any pre-configured scope. |
core:window:allow-minimize | Enables the minimize command without any pre-configured scope. |
core:window:allow-start-dragging | Enables the start_dragging command without any pre-configured scope. |
core:window:allow-toggle-maximize | Enables the toggle_maximize command without any pre-configured scope. |
core:window:allow-internal-toggle-maximize | Enables the internal_toggle_maximize command without any pre-configured scope. |
CSS
Add this CSS sample to keep it at the top of the screen and style the buttons:
HTML
Put this at the top of your <body>
tag:
Note that you may need to move the rest of your content down so that the titlebar doesn’t cover it.
JavaScript
Use this code snippet to make the buttons work:
Note that if you are using a Rust-based frontend, you can copy the code above into a <script>
element in your index.html
file.
Manual Implementation of data-tauri-drag-region
For use cases where you customize the drag behavior, you can manually add an event listener with window.startDragging
instead of using data-tauri-drag-region
.
HTML
From the code in the previous section, we remove data-tauri-drag-region
and add an id
:
Javascript
Add an event listener to the titlebar element:
(macOS) Transparent Titlebar with Custom Window Background Color
We are going to create the main window and change its background color from the Rust side.
Remove the main window from the tauri.conf.json
file:
Add cocoa
crate to dependencies so that we can use it to call the macOS native API:
Create the main window and change its background color:
© 2024 Tauri Contributors. CC-BY / MIT