What Will I Learn?
- You will learn Frame properties in electron
- You will learn How to make Frameless Application
Requirements
- Atom Editor:https://atom.io/
- Electron: https://electronjs.org/
- Npm: https://www.npmjs.com/
Difficulty
- Intermediate
Description
In this video I will show you how to make an electron custom frame
I will close the electron frame feature and design our own frame
A frameless window is a window that has no chrome, the part of the window
The frame feature is avalible in the Beowser Window modüle
It defined in Browser Window and true by default
There are menü areas with Shutdown, maximize and minimize buttons
There are menü area contains the necessary functions
İf we want to close ethese fields all we have to do is maket he frame false
Let’s start creating a custom frame
First we create buttons
Let’s define div with id equal content
Create a header element and place buttons in this element
I’ll edit by giving style
Create a file with a css extension for it I will give the style in this file
Write the style.css file as the href attribute of the link element in index.html
We can now give style
I’ll first get the page to its default settings
Let’s design the header element
Now let’s design option class
Okey now the design has formed
Now change the colro when Mouse comes on the buttons
I’ll give each button a different color to give the button id
İd=”close” id=”max” id=”min”
Now the close button hover was red and the other buttons hover were gray
We finished our design
Now let’s add functionality to these buttons
Write onclick attribute to buttons
Electron will use the remote modüle to reach the window
We can Access the window with get current window function
Write close and min functions
We must write a condition fort he maximize operation
Make full screen if not full screen if it is full screen restore it
Project Github Link
Video Tutorial
Curriculum
Posted on Utopian.io - Rewarding Open Source Contributors