chore: add new example frameless (#90)

jinzhongjia · web-flow · commit 721495d63ca9 · 2025-03-30T21:04:57.000+08:00
diff --git a/build.zig.zon b/build.zig.zon
@@ -5,8 +5,8 @@
     .minimum_zig_version = "0.14.0",
     .dependencies = .{
         .webui = .{
-            .hash = "webui-2.5.0-beta.4-pxqD5WQONwB73V_0MKBVXgR7k6t6pb_B3KfAZqfbPf-7",
-            .url = "https://github.com/webui-dev/webui/archive/3c03d4f45cf6e65e678b0ca87f8ec28d952b9d78.tar.gz",
+            .hash = "webui-2.5.0-beta.4-pxqD5YoPNwCJ9uGbFj8HOnmOUW6QgvHZtLqmpZN5kfmw",
+            .url = "https://github.com/webui-dev/webui/archive/9dd20b5c98b53c1e03f94e80415ddfec5c37a1fa.tar.gz",
         },
     },
     .paths = .{
diff --git a/examples/frameless/index.html b/examples/frameless/index.html
@@ -0,0 +1,87 @@
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <script src="webui.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        height: 100%;
+        width: 100%;
+        overflow: hidden;
+        background: transparent;
+      }
+      #titlebar {
+        height: 40px;
+        background: linear-gradient(to right, #2c3e50, #34495e);
+        color: white;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 0 15px;
+        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
+        -webkit-app-region: drag;
+        font-family: Arial, sans-serif;
+      }
+      #title {
+        font-size: 16px;
+        font-weight: bold;
+      }
+      #buttons {
+        -webkit-app-region: no-drag;
+      }
+      .button {
+        display: inline-block;
+        width: 24px;
+        height: 24px;
+        margin-left: 8px;
+        border-radius: 50%;
+        text-align: center;
+        line-height: 24px;
+        cursor: pointer;
+        transition: all 0.2s;
+      }
+      .minimize {
+        background: #f1c40f;
+      }
+      .maximize {
+        background: #2ecc71;
+      }
+      .close {
+        background: #e74c3c;
+      }
+      .button:hover {
+        filter: brightness(120%);
+      }
+      #content {
+        height: calc(100% - 40px);
+        background: rgba(0, 0, 0, 0.7);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      #message {
+        color: white;
+        font-size: 32px;
+        font-family: Arial, sans-serif;
+        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
+      }
+    </style>
+  </head>
+  <body>
+    <div id="titlebar">
+      <span id="title">WebUI Frameless Window</span>
+      <div id="buttons">
+        <span class="button minimize" onclick="minimize()">–</span>
+        <span class="button close" onclick="close_win()">✕</span>
+      </div>
+    </div>
+    <div id="content">
+      <span id="message">This is a WebUI frameless example</span>
+    </div>
+  </body>
+</html>
diff --git a/examples/frameless/main.zig b/examples/frameless/main.zig
@@ -0,0 +1,42 @@
+//! WebUI Zig - FrameLess Example
+//! Note: This example needs to be manually linked to webview_loader when running on Windows
+//! Without webview_loader, it will report that the window is not found and exit immediately
+const webui = @import("webui");
+
+// we use @embedFile to embed html
+const html = @embedFile("index.html");
+
+fn minimize(e: *webui.Event) void {
+    const win = e.getWindow();
+    win.minimize();
+}
+
+fn maximize(e: *webui.Event) void {
+    const win = e.getWindow();
+    win.maximize();
+}
+
+fn close(e: *webui.Event) void {
+    const win = e.getWindow();
+    win.close();
+}
+
+pub fn main() !void {
+    // create a new window
+    var nwin = webui.newWindow();
+
+    _ = nwin.bind("minimize", minimize);
+    _ = nwin.bind("maximize", maximize);
+    _ = nwin.bind("close", close);
+
+    nwin.setSize(800, 600);
+    nwin.setFrameless(true);
+    nwin.setTransparent(true);
+    nwin.setResizable(true);
+    nwin.setCenter();
+
+    _ = nwin.showWv(html);
+
+    // wait the window exit
+    webui.wait();
+}
