tauri-apps/archived-tauri-docs
1
0
Fork 0
mirror of https://github.com/tauri-apps/tauri-docs.git synced 2026-01-31 00:35:16 +01:00
Code Issues Packages Projects Releases Wiki Activity

Mention app region in custom title bar section (#3386)

Browse Source 
Co-authored-by: FabianLars <FabianLars@users.noreply.github.com>
This commit is contained in:
Tony
2025-07-04 20:44:19 +08:00
committed by GitHub
parent 5f383887af
commit d516022e2d
1 changed files with 50 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
src/content/docs/learn/window-customization.mdx
View File

@@ -85,23 +85,28 @@ Add this CSS sample to keep it at the top of the screen and style the buttons:
height: 30px;
background: #329ea3;
user-select: none;
display: flex;
justify-content: flex-end;
display: grid;
grid-template-columns: auto max-content;
position: fixed;
top: 0;
left: 0;
right: 0;
}
.titlebar-button {
.titlebar > .controls {
display: flex;
}
.titlebar button {
appearance: none;
padding: 0;
margin: 0;
border: none;
display: inline-flex;
justify-content: center;
align-items: center;
width: 30px;
height: 30px;
user-select: none;
-webkit-user-select: none;
background-color: transparent;
}
.titlebar-button:hover {
.titlebar button:hover {
background: #5bbec3;
}
```
@@ -111,27 +116,50 @@ Add this CSS sample to keep it at the top of the screen and style the buttons:
Put this at the top of your `<body>` tag:
```html
<div data-tauri-drag-region class="titlebar">
<div class="titlebar-button" id="titlebar-minimize">
<img
src="https://api.iconify.design/mdi:window-minimize.svg"
alt="minimize"
/>
</div>
<div class="titlebar-button" id="titlebar-maximize">
<img
src="https://api.iconify.design/mdi:window-maximize.svg"
alt="maximize"
/>
</div>
<div class="titlebar-button" id="titlebar-close">
<img src="https://api.iconify.design/mdi:close.svg" alt="close" />
<div class="titlebar">
<div data-tauri-drag-region></div>
<div class="controls">
<button id="titlebar-minimize" title="minimize">
<!-- https://api.iconify.design/mdi:window-minimize.svg -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path fill="currentColor" d="M19 13H5v-2h14z" /><path>
</svg>
</button>
<button id="titlebar-maximize" title="maximize">
<!-- https://api.iconify.design/mdi:window-maximize.svg -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path fill="currentColor" d="M4 4h16v16H4zm2 4v10h12V8z" />
</svg>
</button>
<button id="titlebar-close" title="close">
<!-- https://api.iconify.design/mdi:close.svg -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path
fill="currentColor"
d="M13.46 12L19 17.54V19h-1.46L12 13.46L6.46 19H5v-1.46L10.54 12L5 6.46V5h1.46L12 10.54L17.54 5H19v1.46z"
/>
</svg>
</button>
</div>
</div>
```
Note that you may need to move the rest of your content down so that the titlebar doesn't cover it.
:::tip
On Windows, if you just want a title bar that doesn't need custom interactions, you can use
```css
*[data-tauri-drag-region] {
app-region: drag;
}
```
to make the title bar work with touch and pen inputs
:::
#### JavaScript
Use this code snippet to make the buttons work: