mirrors/electron
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions 1

docs: add custom titlebar example (#44506)

Browse source 
* 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:
trop[bot] 2024-11-01 12:47:51 -05:00 • committed by GitHub
parent 39d29a1d2e
commit 5498eaa29d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
22 changed files with 533 additions and 267 deletions
Download patch file Download diff file Expand all files Collapse all files

14
docs/fiddles/features/window-customization/custom-title-bar/custom-drag-region/index.html Normal file
View file

@ -0,0 +1,14 @@
<!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>Custom Titlebar App</title>
</head>
<body>
<!-- mount your title bar at the top of you application's body tag -->
<div class="titlebar">Cool titlebar</div>
</body>
</html>

16
docs/fiddles/features/window-customization/custom-title-bar/custom-drag-region/main.js Normal file
View file

@ -0,0 +1,16 @@
const { app, BrowserWindow } = require('electron')
function createWindow () {
const win = new BrowserWindow({
// remove the default titlebar
titleBarStyle: 'hidden',
// expose window controlls in Windows/Linux
...(process.platform !== 'darwin' ? { titleBarOverlay: true } : {})
})
win.loadFile('index.html')
}
app.whenReady().then(() => {
createWindow()
})

12
docs/fiddles/features/window-customization/custom-title-bar/custom-drag-region/styles.css Normal file
View file

@ -0,0 +1,12 @@
body {
margin: 0;
}
.titlebar {
height: 30px;
background: blue;
color: white;
display: flex;
justify-content: center;
align-items: center;
app-region: drag;
}

14
docs/fiddles/features/window-customization/custom-title-bar/custom-title-bar/index.html Normal file
View file

@ -0,0 +1,14 @@
<!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>Custom Titlebar App</title>
</head>
<body>
<!-- mount your title bar at the top of you application's body tag -->
<div class="titlebar">Cool titlebar</div>
</body>
</html>

16
docs/fiddles/features/window-customization/custom-title-bar/custom-title-bar/main.js Normal file
View file

@ -0,0 +1,16 @@
const { app, BrowserWindow } = require('electron')
function createWindow () {
const win = new BrowserWindow({
// remove the default titlebar
titleBarStyle: 'hidden',
// expose window controlls in Windows/Linux
...(process.platform !== 'darwin' ? { titleBarOverlay: true } : {})
})
win.loadFile('index.html')
}
app.whenReady().then(() => {
createWindow()
})

12
docs/fiddles/features/window-customization/custom-title-bar/custom-title-bar/styles.css Normal file
View file

@ -0,0 +1,12 @@
body {
margin: 0;
}
.titlebar {
height: 30px;
background: blue;
color: white;
display: flex;
justify-content: center;
align-items: center;
}

15
docs/fiddles/features/window-customization/custom-title-bar/native-window-controls/main.js Normal file
View file

@ -0,0 +1,15 @@
const { app, BrowserWindow } = require('electron')
function createWindow () {
const win = new BrowserWindow({
// remove the default titlebar
titleBarStyle: 'hidden',
// expose window controlls in Windows/Linux
...(process.platform !== 'darwin' ? { titleBarOverlay: true } : {})
})
win.loadURL('https://example.com')
}
app.whenReady().then(() => {
createWindow()
})

13
docs/fiddles/features/window-customization/custom-title-bar/remove-title-bar/main.js Normal file
View file

@ -0,0 +1,13 @@
const { app, BrowserWindow } = require('electron')
function createWindow () {
const win = new BrowserWindow({
// remove the default titlebar
titleBarStyle: 'hidden'
})
win.loadURL('https://example.com')
}
app.whenReady().then(() => {
createWindow()
})

10
docs/fiddles/features/window-customization/custom-title-bar/starter-code/main.js Normal file
View file

@ -0,0 +1,10 @@
const { app, BrowserWindow } = require('electron')
function createWindow () {
const win = new BrowserWindow({})
win.loadURL('https://example.com')
}
app.whenReady().then(() => {
createWindow()
})

14
docs/fiddles/features/window-customization/custom-window-styles/frameless-windows/main.js Normal file
View file

@ -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()
})

15
docs/fiddles/features/window-customization/custom-window-styles/transparent-windows/index.html Normal file
View file

@ -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>

16
docs/fiddles/features/window-customization/custom-window-styles/transparent-windows/main.js Normal file
View file

@ -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()
})

16
docs/fiddles/features/window-customization/custom-window-styles/transparent-windows/styles.css Normal file
View file

@ -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;
}