mirror of
https://github.com/wailsapp/wails.git
synced 2025-05-02 18:42:23 +08:00
48 lines
1.6 KiB
Plaintext
48 lines
1.6 KiB
Plaintext
|
|
# Frameless Applications
|
|
|
|
Wails supports applications with no frame. This can be achieved by using the [frameless](../reference/options.mdx#frameless)
|
|
field in [Application Options](../reference/options.mdx#application-options).
|
|
|
|
|
|
:::warning
|
|
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:
|
|
```go
|
|
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
|
|
<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.
|
|
:::
|