Skip to main content
Version: v2.0.0-beta.44

Frameless Applications

Wails supports applications with no frame. This can be achieved by using the frameless field in Application Options.

danger

The data-wails-drag attribute is being deprecated in favour of the following CSS style: style="--wails-draggable:drag". You can use style="--wails-draggable:no-drag" to disable the drag behaviour. For this release only, you can test this by setting the following application option:

        Experimental: &options.Experimental{
UseCSSDrag: true,
},

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>
<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>
Fullscreen

If you allow your application to go fullscreen, this drag functionality will be disabled.