Чтобы создать окно без Chrome или прозрачное окно произвольной формы, вам нужно использовать API Frameless Window. Этот «API» позволяет создавать безрамное окно без хрома, части окна, такие как панели инструментов, которые не являются частью веб-страницы.
В браузере Chrome — это любой видимый аспект браузера, кроме самих веб-страниц (например, панели инструментов, строка меню, вкладки). Чтобы создать безрамное окно, вам нужно установить frame свойство false в экземпляре BrowserWindow, который вы хотите:
const {BrowserWindow} = require('electron')
let win = new BrowserWindow({
width: 800,
height: 600,
frame: false
})
win.show()Как правило, вы можете включить эту функцию в главном окне (main.js), это должно быть похоже на:
function createWindow () {
// Create the browser window.
mainWindow = new BrowserWindow({width: 800, height: 600, frame: false})
// and load the index.html of the app.
mainWindow.loadURL(`file://${__dirname}/index.html`)
// Open the DevTools.
mainWindow.webContents.openDevTools()
// Emitted when the window is closed.
mainWindow.on('closed', function () {
// Dereference the window object, usually you would store windows
// in an array if your app supports multi windows, this is the time
// when you should delete the corresponding element.
mainWindow = null
})
}Чье исполнение должно создать окно, похожее на:
Однако вы, вероятно, не хотите лишать пользователя возможности закрыть, свернуть или развернуть свое приложение, поэтому вам нужно научиться делать это. Эти методы доступны в BrowserWindow, поэтому вам нужно только получить сфокусированное окно, используя константу BrowserWindow, когда вы находитесь в процессе рендеринга:
const {BrowserWindow} = require('electron').remote;
// Retrieve focused window
var theWindow = BrowserWindow.getFocusedWindow();
// Execute common tasks
// Minimize
theWindow.minimize();
// Maximize app
theWindow.maximize();
// Close app
theWindow.close();Типичные кнопки, но с некоторыми CSS и HTML
Вы можете создать ту же панель инструментов, которую настольное приложение использует с пользовательскими HTML и CSS.
В этом примере мы собираемся использовать следующую разметку:
Our Code World Frameless (But draggable,resizable and closable Window)
-
+
x
И какой-то стиль, чтобы он выглядел «хорошо»:
body {
padding: 0px;
margin: 0px;
}
#title-bar {
-webkit-app-region: drag;
height: 40px;
text-align: center;
line-height: 40px;
vertical-align: middle;
background-color: #03a9f4;
padding: none;
margin: 0px;
}
#title {
position: fixed;
top: 0px;
left: 6px;
color:white;
}
#title-bar-btns {
-webkit-app-region: no-drag;
position: fixed;
top: 0px;
right: 6px;
}Обратите внимание, что title-bar В классе есть класс, позволяющий перетаскивать окно по экрану, в противном случае ваш пользователь будет вынужден работать с приложением в статической позиции на экране (что вам, вероятно, не нужно). -webkit-app-region: drag; сделает выбранный элемент точкой для перетаскивания всего окна вокруг экрана так же, как это делает исходная строка заголовка.
Окончательная реализация в вашем index.html файл должен выглядеть так:
My Electron Frameless Window
body {
padding: 0px;
margin: 0px;
}
#title-bar {
-webkit-app-region: drag;
height: 40px;
text-align: center;
line-height: 40px;
vertical-align: middle;
background-color: #03a9f4;
padding: none;
margin: 0px;
}
#title {
position: fixed;
top: 0px;
left: 6px;
color:white;
}
#title-bar-btns {
-webkit-app-region: no-drag;
position: fixed;
top: 0px;
right: 6px;
}
Our Code World Frameless (But draggable,resizable and closable Window)
-
+
x
Electron rocks!
(function () {
// Retrieve remote BrowserWindow
const {BrowserWindow} = require('electron').remote
function init() {
// Minimize task
document.getElementById("min-btn").addEventListener("click", (e) => {
var window = BrowserWindow.getFocusedWindow();
window.minimize();
});
// Maximize window
document.getElementById("max-btn").addEventListener("click", (e) => {
var window = BrowserWindow.getFocusedWindow();
if(window.isMaximized()){
window.unmaximize();
}else{
window.maximize();
}
});
// Close app
document.getElementById("close-btn").addEventListener("click", (e) => {
var window = BrowserWindow.getFocusedWindow();
window.close();
});
};
document.onreadystatechange = () => {
if (document.readyState == "complete") {
init();
}
};
})();
И результат приложения будет выглядеть так:
Повеселись !
