Skip to content
This repository was archived by the owner on Sep 13, 2024. It is now read-only.

Commit 40fdb1f

Browse files
AlexTorresDevAlexTorresDev
committed
Update readme
1 parent 42c3412 commit 40fdb1f

File tree

2 files changed

+27
-91
lines changed

2 files changed

+27
-91
lines changed

‎.npmignore

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@
44
.idea/
55

66
# for npm
7+
.vscode/
8+
.github/
79
node_modules/
810
npm-shrinkwrap.json
911

‎README.md

Lines changed: 25 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,6 @@ This project is a typescript library for electron that allows you to configure a
99

1010
![Preview 2](screenshots/window_2.png)
1111

12-
![Preview 3](screenshots/window_3.png)
13-
1412
## Install
1513

1614
```
@@ -50,35 +48,37 @@ The parameter `backgroundColor: Color` is required, this should be `Color` type.
5048
Update the code that launches browser window
5149
```js
5250
let mainWindow = new BrowserWindow({
53-
width: 1000,
54-
height: 600,
55-
titleBarStyle: "hidden", // add this line
51+
width: 1000,
52+
height: 600,
53+
titleBarStyle: "hidden", // add this line
54+
webPreferences: {
55+
preload: path.join(__dirname, 'preload.js')
56+
}
5657
});
5758
```
5859

5960
## Options
6061

6162
The interface [`TitleBarOptions`] is managed, which has the following configurable options for the title bar. Some parameters are optional.
6263

63-
| Parameter | Type | Description | Default |
64-
| ------------------------------ | ---------------- | ------------------------------------------------------------------------------------------------------------------------------- | ------------------------- |
65-
| backgroundColor **(required)** | Color | The background color of the titlebar. | #444444 |
66-
| icon | string | The icon shown on the left side of the title bar. | null |
67-
| iconsTheme | Theme | Style of the icons. | Themebar.win |
68-
| shadow | boolean | The shadow of the titlebar. | false |
69-
| drag | boolean | Define whether or not you can drag the window by holding the click on the title bar. | true |
70-
| minimizable | boolean | Enables or disables the option to minimize the window by clicking on the corresponding button in the title bar. | true |
71-
| maximizable | boolean | Enables or disables the option to maximize and un-maximize the window by clicking on the corresponding button in the title bar. | true |
72-
| closeable | boolean | Enables or disables the option of the close window by clicking on the corresponding button in the title bar. | true |
73-
| order | string | Set the order of the elements on the title bar. (`inverted`, `first-buttons`) | null |
74-
| titleHorizontalAlignment | string | Set horizontal alignment of the window title. (`left`, `center`, `right`) | center |
75-
| menu | Electron.Menu | The menu to show in the title bar. | Menu.getApplicationMenu() |
76-
| menuPosition | string | The position of menubar on titlebar. | left |
77-
| enableMnemonics | boolean | Enable the mnemonics on menubar and menu items. | true |
78-
| itemBackgroundColor | Color | The background color when the mouse is over the item. | rgba(0, 0, 0, .14) |
79-
| hideWhenClickingClose | boolean | When the close button is clicked, the window is hidden instead of closed. | false |
80-
| overflow | string | The overflow of the container (`auto`, `visible`, `hidden`) | auto |
81-
| unfocusEffect | boolean | Enables or disables the blur option in the title bar. | false |
64+
| Parameter | Type | Description | Default |
65+
| ------------------------------ | ------------------------- | ------------------------------------------------------------------------------------------------------------------------------- | ------------------------- |
66+
| backgroundColor **(required)** | Color | The background color of the titlebar. | #444444 |
67+
| icon | string | The icon shown on the left side of the title bar. | null |
68+
| shadow | boolean | The shadow of the titlebar. | false |
69+
| drag | boolean | Define whether or not you can drag the window by holding the click on the title bar. | true |
70+
| onMinimize | Funtion | Enables or disables the option to minimize the window by clicking on the corresponding button in the title bar. | undefined |
71+
| onMaximize | Funtion | Enables or disables the option to maximize and un-maximize the window by clicking on the corresponding button in the title bar. | undefined |
72+
| onClose | Funtion | Enables or disables the option of the close window by clicking on the corresponding button in the title bar. | undefined |
73+
| isMaximized | Funtion | Check if window is maximized. | undefined |
74+
| onMenuItemClick | Funtion(commandId: number)| Fires when any menu option is pressed. | undefined |
75+
| order | string | Set the order of the elements on the title bar. (`inverted`, `first-buttons`) | null |
76+
| titleHorizontalAlignment | string | Set horizontal alignment of the window title. (`left`, `center`, `right`) | center |
77+
| menuPosition | string | The position of menubar on titlebar. | left |
78+
| enableMnemonics | boolean | Enable the mnemonics on menubar and menu items. | true |
79+
| hideWhenClickingClose | boolean | When the close button is clicked, the window is hidden instead of closed. | false |
80+
| overflow | string | The overflow of the container (`auto`, `visible`, `hidden`) | auto |
81+
| unfocusEffect | boolean | Enables or disables the blur option in the title bar. | false |
8282

8383
## Methods
8484

@@ -124,51 +124,6 @@ With this method you can update the icon. This method receives the url of the im
124124
titlebar.updateIcon('./images/my-icon.svg');
125125
```
126126

127-
### Update Menu
128-
129-
This method updates or creates the menu, to create the menu use remote.Menu and remote.MenuItem.
130-
131-
```js
132-
const menu = new Menu();
133-
menu.append(new MenuItem({
134-
label: 'Item 1',
135-
submenu: [
136-
{
137-
label: 'Subitem 1',
138-
click: () => console.log('Click on subitem 1')
139-
},
140-
{
141-
type: 'separator'
142-
}
143-
]
144-
}));
145-
146-
menu.append(new MenuItem({
147-
label: 'Item 2',
148-
submenu: [
149-
{
150-
label: 'Subitem checkbox',
151-
type: 'checkbox',
152-
checked: true
153-
},
154-
{
155-
type: 'separator'
156-
},
157-
{
158-
label: 'Subitem with submenu',
159-
submenu: [
160-
{
161-
label: 'Submenu &item 1',
162-
accelerator: 'Ctrl+T'
163-
}
164-
]
165-
}
166-
]
167-
}));
168-
169-
titlebar.updateMenu(menu);
170-
```
171-
172127
### Update Menu Position
173128

174129
You can change the position of the menu bar. `left` and `bottom` are allowed.
@@ -179,9 +134,7 @@ titlebar.updateMenuPosition('bottom');
179134

180135
### Set Horizontal Alignment
181136

182-
> setHorizontalAlignment method was contributed by [@MairwunNx](https://github.com/MairwunNx) :punch:
183-
184-
`left`, `center` and `right` are allowed
137+
You can change the position of the title of title bar. `left`, `center` and `right` are allowed
185138

186139
```js
187140
titlebar.setHorizontalAlignment('right');
@@ -195,25 +148,6 @@ This method removes the title bar completely and all recorded events.
195148
titlebar.dispose();
196149
```
197150

198-
## CSS Classes
199-
The following CSS classes exist and can be used to customize the titlebar
200-
201-
| Class name | Description |
202-
| --------------------------- | -----------------------------------------------------------------|
203-
| .titlebar | Styles the titlebar. |
204-
| .window-appicon | Styles the app icon on the titlebar. |
205-
| .window-title | Styles the window title. (Example: font-size) |
206-
| .window-controls-container | Styles the window controls section. |
207-
| .resizer top | Styles the resizer invisible top bar |
208-
| .resizer left | Styles the resizer invisible left bar |
209-
| .menubar | Styles the top menus |
210-
| .menubar-menu-button | Styles the main menu elements. (Example: color) |
211-
| .menubar-menu-button open | Styles the main menu elements when open menu. (Example: color) |
212-
| .menubar-menu-title | Description missing |
213-
| .action-item | Description missing |
214-
| .action-menu-item | Styles action menu elements. (Example: color) |
215-
216-
217151
## License
218152

219153
This project is under the [MIT](https://github.com/AlexTorresSk/custom-electron-titlebar/blob/master/LICENSE) license.

0 commit comments

Comments
 (0)