Skip to content

Commit 087eef3

Browse files
AlbertShownAlbertShown
committed
New Frameless example
1 parent eb5f17e commit 087eef3

File tree

1 file changed

+127
-0
lines changed

1 file changed

+127
-0
lines changed

‎examples/frameless/frameless.ts‎

Lines changed: 127 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
1+
// To run this script:
2+
// bun run frameless.ts
3+
4+
// To import from local (Debugging and Development)
5+
// import { WebUI } from "../../mod.ts";
6+
7+
// To import from NPM (Production)
8+
import { WebUI } from '@webui-dev/bun-webui';
9+
10+
const myHtml = `
11+
<html>
12+
<head>
13+
<meta charset='UTF-8'>
14+
<script src=\webui.js\></script>
15+
<style>
16+
* { margin: 0; padding: 0; box-sizing: border-box; }
17+
html, body { height: 100%; width: 100%; overflow: hidden; background: transparent; }
18+
#ui-container {
19+
height: 100%;
20+
width: 100%;
21+
background: rgba(30, 30, 30, 0.95);
22+
color: #f5f5f5;
23+
font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
24+
display: flex;
25+
flex-direction: column;
26+
border-radius: 10px;
27+
backdrop-filter: blur(24px);
28+
-webkit-backdrop-filter: blur(24px);
29+
border: 1px solid rgba(255, 255, 255, 0.12);
30+
overflow: hidden;
31+
}
32+
#titlebar {
33+
height: 48px;
34+
background: rgba(0, 0, 0, 0.25);
35+
-webkit-app-region: drag; /* Win32/macOS (Native) */
36+
--webui-app-region: drag; /* Linux (Custom) */
37+
display: flex;
38+
align-items: center;
39+
justify-content: space-between;
40+
padding: 0 18px;
41+
flex-shrink: 0;
42+
}
43+
#title { font-size: 15px; font-weight: 500; }
44+
#buttons {
45+
-webkit-app-region: no-drag;
46+
display: flex;
47+
gap: 12px;
48+
}
49+
#buttons span {
50+
width: 14px;
51+
height: 14px;
52+
border-radius: 50%;
53+
cursor: pointer;
54+
transition: all 0.15s ease-out;
55+
}
56+
#buttons span:hover { transform: scale(1.1); filter: brightness(1.15); }
57+
.buttons span:active { transform: scale(0.9); filter: brightness(0.9); }
58+
.close { background: #ff5f57; }
59+
.minimize { background: #ffbd2e; }
60+
/* .maximize { background: #28c940; } REMOVED */
61+
#content {
62+
flex-grow: 1;
63+
display: flex;
64+
flex-direction: column;
65+
align-items: center;
66+
justify-content: center;
67+
padding: 20px;
68+
text-align: center;
69+
overflow: auto;
70+
}
71+
#message {
72+
font-size: 38px;
73+
font-weight: 200;
74+
letter-spacing: 0.5px;
75+
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
76+
}
77+
#sub-message {
78+
font-size: 16px;
79+
font-weight: 300;
80+
color: rgba(240, 240, 240, 0.7);
81+
margin-top: 12px;
82+
}
83+
</style>
84+
</head>
85+
<body>
86+
<div id='ui-container'>
87+
<div id='titlebar'>
88+
<span id='title'>Bun WebUI Frameless WebView Window</span>
89+
<div id='buttons'>
90+
<span class='button minimize' onclick='minimize()'></span>
91+
<span class='button close' onclick='close_win()'></span>
92+
</div>
93+
</div>
94+
<div id='content'>
95+
<span id='message'>Welcome to Your Bun WebUI App</span>
96+
<span id='sub-message'>This is a stylish, frameless WebUI WebView window.</span>
97+
</div>
98+
</div>
99+
</body>
100+
</html>`;
101+
102+
// Create new window
103+
const myWindow = new WebUI();
104+
105+
// Bind
106+
myWindow.bind("minimize", () => {
107+
myWindow.minimize();
108+
});
109+
myWindow.bind("close_win", () => {
110+
WebUI.exit();
111+
});
112+
113+
myWindow.setSize(800, 600);
114+
myWindow.setFrameless(true);
115+
myWindow.setTransparent(true);
116+
myWindow.setResizable(false);
117+
myWindow.setCenter();
118+
119+
// Show the window
120+
await myWindow.showWebView(myHtml); // in Microsoft Windows you may need `WebView2Loader.dll`
121+
122+
// Wait until all windows get closed
123+
await WebUI.wait();
124+
125+
console.log("Thank you.");
126+
127+
process.exit(0);

0 commit comments

Comments
 (0)