More than 5 years have passed since last update.

Electron 独自window

Electron

Posted at 2016-06-30

ChromiumのUIを使わず、自分でwindowのUIをつくりたいとき
閉じる、最大化、最小化ボタンくらいはつくる。

main.js

const el = require('electron'), {app} = el;
const Bw = electron.BrowserWindow, ipc = electron.ipcMain;

let win = null;
app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') app.quit();
});
app.on('activate', () => {
    if (win === null) createMainWindow();
});
app.on('ready', createMainWindow);

function createMainWindow(){
    win = new Bw({
        title: '',
        width: 1280,
        height: 720,
        minWidth: 150,
        minHeight: 100,
        frame: false,
        darkTheme: true,
        'standard-window': false,      // これと
        titleBarStyle: 'hidden-inset', // これが
        'overlay-scrollbars': true,
        resizable: true,
        transparent: true,
        webPreferences: {},
        fullscreenable: true,
    }),
    win.loadURL(`file://${__dirname}/index.html`),
    win.on('closed', () => {win = null;});
};

ipc.on('minimize', (e, arg) => {
    win.minimize();
});
ipc.on('maximize', (e, arg) => {
    win.isMaximized() ? win.unmaximize() : win.maximize();
});

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="./style.css">
    <script src="./jquery-2.2.4.min.js"></script>
    <script>
if (typeof module === "object" && module.exports) {
    window.$ = window.jQuery = module.exports;
    module.exports = {};
}
    </script>
    <script>
const el = require('electron'), {ipcRenderer} = el;

$(() => {
    $('#closed').click(() => {window.close()})
    $('#minimize').click(() => {ipcRenderer.send('minimize', true)})
    $('#maximize').click(() => {ipcRenderer.send('maximize', true)})
});
    </script>
</head>
<body ng-app="app" ng-controller="RootCtrl as root">
    <div id="titleBar">
        <div id="titleName">
            <span id="name">appname</span>
        </div>
    </div>
    <main>
        <button type="button" id="closed">close</button>
        <button type="button" id="minimize">minimize</button>
        <button type="button" id="maximize">maximize</button>
    </main>
</body>
</html>

style.css

#titleBar {
    -webkit-app-region: drag; /* ドラッグでwindowの移動可能にする */
    -webkit-user-select: none; /* 選択不可 */
    position: fixed;
    top: 0;
    width: 100%;
    height: 24px;
    margin: 0;
    padding: 0;
    background: #fcfcfc;
    z-index: 9999;
}
span#name{
    height:24px;
    margin:0;padding:0;
    font-size:14px;
    alignment-baseline: middle;
}
main {
    -webkit-app-region: no-drag; /*　ドラッグでwindowの移動不可にする */
    height: calc(100% - 28px);
    width: 100%;
    margin-top: 28px;
}
button {
    -webkit-app-region: no-drag;
}

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up