You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
This repository was archived by the owner on Sep 13, 2024. It is now read-only.
| backgroundColor **(required)**| Color | The background color of the titlebar. |#444444|
69
-
| icon | string | The icon shown on the left side of the title bar. | null |
70
-
| iconsTheme | Theme | Style of the icons. | Themebar.win |
71
-
| shadow | boolean | The shadow of the titlebar. | false |
72
-
| drag | boolean | Define whether or not you can drag the window by holding the click on the title bar. | true |
73
-
| minimizable | boolean | Enables or disables the option to minimize the window by clicking on the corresponding button in the title bar. | true |
74
-
| 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 |
75
-
| closeable | boolean | Enables or disables the option of the close window by clicking on the corresponding button in the title bar. | true |
76
-
| order | string | Set the order of the elements on the title bar. (`inverted`, `first-buttons`) | null |
77
-
| titleHorizontalAlignment | string | Set horizontal alignment of the window title. (`left`, `center`, `right`) | center |
78
-
| menu | Electron.Menu | The menu to show in the title bar. | Menu.getApplicationMenu() |
79
-
| menuPosition | string | The position of menubar on titlebar. | left |
80
-
| enableMnemonics | boolean | Enable the mnemonics on menubar and menu items. | true |
81
-
| itemBackgroundColor | Color | The background color when the mouse is over the item. | rgba(0, 0, 0, .14) |
82
-
| hideWhenClickingClose | boolean | When the close button is clicked, the window is hidden instead of closed. | false |
83
-
| overflow | string | The overflow of the container (`auto`, `visible`, `hidden`) | auto |
84
-
| unfocusEffect | boolean | Enables or disables the blur option in the title bar. | false |
85
-
86
-
## Methods
87
-
88
-
### Update Background
89
-
90
-
This change the color of titlebar and it's checked whether the color is light or dark, so that the color of the icons adapts to the background of the title bar.
To assign colors you can use the following options: `Color.fromHex()`, `new Color(new RGBA(r, g, b, a))`, `new Color(new HSLA(h, s, l, a))`, `new Color(new HSVA(h, s, v, a))` or `Color.BLUE`, `Color.RED`, etc.
97
-
98
-
### Update Items Background Color
99
-
100
-
This method change background color on hover of items of menubar.
To assign colors you can use the following options: `Color.fromHex()`, `new Color(new RGBA(r, g, b, a))`, `new Color(new HSLA(h, s, l, a))`, `new Color(new HSVA(h, s, v, a))` or `Color.BLUE`, `Color.RED`, etc.
107
-
108
-
### Update Title
109
-
110
-
This method updated the title of the title bar, If you change the content of the `title` tag, you should call this method for update the title.
111
-
112
-
```js
113
-
document.title='My new title';
114
-
titlebar.updateTitle();
115
-
116
-
// Or you can do as follows and avoid writing document.title
117
-
titlebar.updateTitle('New Title');
118
-
```
119
-
120
-
if this method is called and the title parameter is added, the title of the document is changed to that of the parameter.
121
-
122
-
### Update Icon
123
-
124
-
With this method you can update the icon. This method receives the url of the image _(it is advisable to use transparent image formats)_
125
-
126
-
```js
127
-
titlebar.updateIcon('./images/my-icon.svg');
128
-
```
129
-
130
-
### Update Menu
131
-
132
-
This method updates or creates the menu, to create the menu use remote.Menu and remote.MenuItem.
133
-
134
-
```js
135
-
constmenu=newMenu();
136
-
menu.append(newMenuItem({
137
-
label:'Item 1',
138
-
submenu: [
139
-
{
140
-
label:'Subitem 1',
141
-
click: () =>console.log('Click on subitem 1')
142
-
},
143
-
{
144
-
type:'separator'
145
-
}
146
-
]
147
-
}));
148
-
149
-
menu.append(newMenuItem({
150
-
label:'Item 2',
151
-
submenu: [
152
-
{
153
-
label:'Subitem checkbox',
154
-
type:'checkbox',
155
-
checked:true
156
-
},
157
-
{
158
-
type:'separator'
159
-
},
160
-
{
161
-
label:'Subitem with submenu',
162
-
submenu: [
163
-
{
164
-
label:'Submenu &item 1',
165
-
accelerator:'Ctrl+T'
166
-
}
167
-
]
168
-
}
169
-
]
170
-
}));
171
-
172
-
titlebar.updateMenu(menu);
173
-
```
174
-
175
-
### Update Menu Position
176
-
177
-
You can change the position of the menu bar. `left` and `bottom` are allowed.
178
-
179
-
```js
180
-
titlebar.updateMenuPosition('bottom');
181
-
```
182
-
183
-
### Set Horizontal Alignment
184
-
185
-
> setHorizontalAlignment method was contributed by [@MairwunNx](https://github.com/MairwunNx):punch:
186
-
187
-
`left`, `center` and `right` are allowed
188
-
189
-
```js
190
-
titlebar.setHorizontalAlignment('right');
191
-
```
192
-
193
-
### Dispose
194
-
195
-
This method removes the title bar completely and all recorded events.
196
-
197
-
```js
198
-
titlebar.dispose();
199
-
```
200
-
201
-
## CSS Classes
202
-
The following CSS classes exist and can be used to customize the titlebar
| .window-appicon | Styles the app icon on the titlebar. |
208
-
| .window-title | Styles the window title. (Example: font-size) |
209
-
| .window-controls-container | Styles the window controls section. |
210
-
| .resizer top | Styles the resizer invisible top bar |
211
-
| .resizer left | Styles the resizer invisible left bar |
212
-
| .menubar | Styles the top menus |
213
-
| .menubar-menu-button | Styles the main menu elements. (Example: color) |
214
-
| .menubar-menu-button open | Styles the main menu elements when open menu. (Example: color) |
215
-
| .menubar-menu-title | Description missing |
216
-
| .action-item | Description missing |
217
-
| .action-menu-item | Styles action menu elements. (Example: color) |
218
-
219
-
220
-
## License
22
+
## 🚀 Usage
23
+
To see the documentation on how to use the title bar, visit the [Wiki](https://github.com/AlexTorresSk/custom-electron-titlebar/wiki)
221
24
25
+
## ✅ License
222
26
This project is under the [MIT](https://github.com/AlexTorresSk/custom-electron-titlebar/blob/master/LICENSE) license.
27
+
28
+
## 💰 Support
29
+
If you want to support my development, you can do so by donating through [Buy me a coffee](https://www.buymeacoffee.com/AlexTorresSk), [Paypal](https://www.paypal.com/paypalme/hapovedat) or [Patreon](https://www.patreon.com/AlexTorresSk)
0 commit comments