5
0
mirror of https://github.com/wailsapp/wails.git synced 2025-05-02 05:11:29 +08:00
wails/website/docs/guides/frameless.mdx
2021-09-27 19:35:30 +10:00

36 lines
1.2 KiB
Plaintext

# Frameless Applications
Wails supports applications with no frame. This can be achieved by using the [frameless](/docs/reference/options#frameless)
field in [Application Options](/docs/reference/options#application-options).
Wails offers a simple solution for dragging the window: Any HTML element that has the attribute "data-wails-drag" will
act as a "drag handle". This property applies to all nested elements. If you need to indicate that a nested element
should not drag, then use the attribute 'data-wails-no-drag' on that element.
The default vanilla template uses this, even though it is not frameless. The whole `body` element is tagged as draggable.
The `<div id="input" data-wails-no-drag>` is tagged as being not draggable.
```html
<html>
<head>
<link rel="stylesheet" href="/main.css" />
</head>
<body data-wails-drag>
<div id="logo"></div>
<div id="input" data-wails-no-drag>
<input id="name" type="text" />
<button onclick="greet()">Greet</button>
</div>
<div id="result"></div>
<script src="/main.js"></script>
</body>
</html>
```
:::info Fullscreen
If you allow your application to go fullscreen, this drag functionality will be disabled.
:::