Created
October 22, 2021 22:36
-
-
Save thebluefish/14fcb76d630ea620f0b271a02c007077 to your computer and use it in GitHub Desktop.
An Electron 11 titlebar demo using Vue, HTML, SCSS
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<template> | |
<header class="titlebar"> | |
<div class="spacer"> | |
<div :class="maximized ? 'drag drag-max' : 'drag drag-min'"/> | |
</div> | |
<div class="system-bar"> | |
<button class="sys-btn" @click.stop="onMinimize()"> | |
<img src="/caption-buttons.svg#minimize"> | |
</button> | |
<button class="sys-btn" @click.stop="onMaximize()"> | |
<img :src="maximized ? '/caption-buttons.svg#restore' : '/caption-buttons.svg#maximize'"/> | |
</button> | |
<button class="sys-btn close-btn" @click.stop="onClose()"> | |
<img src="/caption-buttons.svg#close"> | |
</button> | |
</div> | |
</header> | |
</template> | |
<script> | |
import {remote} from 'electron' | |
export default { | |
name: 'TitleBarElectron', | |
data: () => ({ | |
maximized: remote.getCurrentWindow().isMaximized(), | |
}), | |
computed: { | |
win() { | |
return remote.getCurrentWindow() | |
}, | |
}, | |
methods: { | |
onMinimize() { | |
this.win.minimize(); | |
}, | |
onMaximize() { | |
if(this.win.isMaximized()) { | |
this.win.unmaximize(); | |
} | |
else { | |
this.win.maximize(); | |
} | |
}, | |
onClose() { | |
this.win.close(); | |
}, | |
}, | |
mounted() { | |
this.win.on("maximize", () => { | |
this.maximized = true | |
}); | |
this.win.on("unmaximize", () => { | |
this.maximized = false | |
}) | |
}, | |
} | |
</script> | |
<style scoped lang="scss"> | |
.titlebar { | |
background: #101010; | |
color: #FFFFFF; | |
height: 24px; | |
overflow: hidden; | |
display: flex; | |
.system-bar { | |
height: inherit; | |
align-items: flex-start; | |
display: flex; | |
} | |
.spacer { | |
flex-grow: 1; | |
position: relative; | |
.drag { | |
display: block; | |
position: absolute; | |
-webkit-app-region: drag; | |
} | |
.drag-min { | |
top: 6px; | |
left: 6px; | |
width: calc(100% - 6px); | |
height: calc(100% - 6px); | |
} | |
.drag-max { | |
top: 0; | |
left: 0; | |
width: 100%; | |
height: 100%; | |
} | |
} | |
.sys-btn { | |
margin: 0; | |
padding: 0; | |
outline: 0; | |
border-radius: 0; | |
border-style: none; | |
min-width: 32px; | |
width: 32px; | |
height: 24px; | |
font-size: 24px; | |
align-items: center; | |
justify-content: center; | |
display: inline-flex; | |
flex: 0 0 auto; | |
position: relative; | |
text-decoration: none; | |
background-color: transparent; | |
transition: 0.3s; | |
&:last-child { | |
margin: 0; | |
} | |
&:hover { | |
background: #303030; | |
} | |
} | |
.close-btn:hover { | |
background: #ed4245; | |
} | |
} | |
</style> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment