docs: add custom titlebar example (#44507)
* docs: add custom titlebar example * docs: add links and other small edits * docs: add panel window docs * docs: remove panel example * docs: specify expected emphasis style * docs: responding to feedback * docs: fix section names in links * docs: rework baseWindow note * docs: making window customization its own section * responding to feedback Co-authored-by: trop[bot] <37223003+trop[bot]@users.noreply.github.com> Co-authored-by: Anny Yang <anny@electronjs.org>
This commit is contained in:
parent
50eb34423f
commit
f3a2c1dee7
22 changed files with 533 additions and 267 deletions
|
@ -0,0 +1,14 @@
|
|||
const { app, BrowserWindow } = require('electron')
|
||||
|
||||
function createWindow () {
|
||||
const win = new BrowserWindow({
|
||||
width: 300,
|
||||
height: 200,
|
||||
frame: false
|
||||
})
|
||||
win.loadURL('https://example.com')
|
||||
}
|
||||
|
||||
app.whenReady().then(() => {
|
||||
createWindow()
|
||||
})
|
|
@ -0,0 +1,15 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
|
||||
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'">
|
||||
<link href="./styles.css" rel="stylesheet">
|
||||
<title>Transparent Hello World</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="white-circle">
|
||||
<div>Hello World!</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,16 @@
|
|||
const { app, BrowserWindow } = require('electron')
|
||||
|
||||
function createWindow () {
|
||||
const win = new BrowserWindow({
|
||||
width: 100,
|
||||
height: 100,
|
||||
resizable: false,
|
||||
frame: false,
|
||||
transparent: true
|
||||
})
|
||||
win.loadFile('index.html')
|
||||
}
|
||||
|
||||
app.whenReady().then(() => {
|
||||
createWindow()
|
||||
})
|
|
@ -0,0 +1,16 @@
|
|||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: rgba(0, 0, 0, 0); /* Transparent background */
|
||||
}
|
||||
.white-circle {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: white;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
app-region: drag;
|
||||
user-select: none;
|
||||
}
|
Loading…
Add table
Add a link
Reference in a new issue