mirror of
https://github.com/wailsapp/wails.git
synced 2025-05-02 07:40:17 +08:00
638caf72f0
* [assetserver] Add support for HTTP Middlewares * [dev] Disable frontend DevServer if no Assets has been defined and inform user * [dev] Consistent WebSocket behaviour in dev and prod mode for assets handler and middleware In prod mode we can't support WebSockets so make sure the assets handler and middleware never see WebSockets in dev mode. * [templates] Migrate to new AssetServer option * [docs] Add assetserver.Options to the reference
93 lines
2.4 KiB
Plaintext
93 lines
2.4 KiB
Plaintext
# Frameless Applications
|
|
|
|
Wails supports application that have no frames. This can be achieved by using the [frameless](../reference/options.mdx#frameless)
|
|
field in [Application Options](../reference/options.mdx#application-options).
|
|
|
|
Wails offers a simple solution for dragging the window: Any HTML element that has the CSS style `--wails-draggable:drag` will
|
|
act as a "drag handle". This property applies to all child elements. If you need to indicate that a nested element
|
|
should not drag, then use the attribute '--wails-draggable:no-drag' on that element.
|
|
|
|
```html
|
|
<html>
|
|
<head>
|
|
<link rel="stylesheet" href="/main.css" />
|
|
</head>
|
|
|
|
<body style="--wails-draggable:drag">
|
|
<div id="logo"></div>
|
|
<div id="input" style="--wails-draggable:no-drag">
|
|
<input id="name" type="text" />
|
|
<button onclick="greet()">Greet</button>
|
|
</div>
|
|
<div id="result"></div>
|
|
|
|
<script src="/main.js"></script>
|
|
</body>
|
|
</html>
|
|
```
|
|
|
|
For some projects, using a CSS variable may not be possible due to dynamic styling. In this case, you can use the
|
|
`CSSDragProperty` and `CSSDragValue` application options to define a property and value that will be used to indicate
|
|
draggable regions:
|
|
|
|
```go title=main.go
|
|
package main
|
|
|
|
import (
|
|
"embed"
|
|
|
|
"github.com/wailsapp/wails/v2"
|
|
"github.com/wailsapp/wails/v2/pkg/options"
|
|
"github.com/wailsapp/wails/v2/pkg/options/assetserver"
|
|
)
|
|
|
|
//go:embed all:frontend/dist
|
|
var assets embed.FS
|
|
|
|
func main() {
|
|
// Create an instance of the app structure
|
|
app := NewApp()
|
|
|
|
// Create application with options
|
|
err := wails.Run(&options.App{
|
|
Title: "alwaysontop",
|
|
Width: 1024,
|
|
Height: 768,
|
|
AssetServer: &assetserver.Options{
|
|
Assets: assets,
|
|
},
|
|
Frameless: true,
|
|
CSSDragProperty: "widows",
|
|
CSSDragValue: "1",
|
|
Bind: []interface{}{
|
|
app,
|
|
},
|
|
})
|
|
|
|
if err != nil {
|
|
println("Error:", err)
|
|
}
|
|
}
|
|
```
|
|
|
|
```html title=index.html
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
|
|
<title>alwaysontop</title>
|
|
</head>
|
|
<body style="widows: 1">
|
|
<div id="app"></div>
|
|
<script src="./src/main.js" type="module"></script>
|
|
</body>
|
|
</html>
|
|
```
|
|
|
|
:::info Fullscreen
|
|
|
|
If you allow your application to go fullscreen, this drag functionality will be disabled.
|
|
|
|
:::
|