diff --git a/src/content/docs/learn/window-customization.mdx b/src/content/docs/learn/window-customization.mdx index 9e5b6783c..4a0f0439e 100644 --- a/src/content/docs/learn/window-customization.mdx +++ b/src/content/docs/learn/window-customization.mdx @@ -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 `` tag: ```html -
-
- minimize -
-
- maximize -
-
- close +
+
+
+ + +
``` 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: