-
-
Notifications
You must be signed in to change notification settings - Fork 150
Titlebar Options
If you want to learn about the menu bar options, see Menubar Options.
The titlebar has various options that allow for customization. These options are passed as an object to the Titlebar
or CustomTitlebar
component:
const options = {
// options
};
new Titlebar(options);
This is the background color of the titlebar. It can be a hexadecimal color using TitlebarColor.fromHex(color)
or a TitlebarColor
.
For more details on colors, see Colors.
const options = {
backgroundColor: TitlebarColor.fromHex('#FF0000')
};
The overflow of the container is the way the content is displayed when the container size is smaller than the content size. It can be auto
, hidden
or visible
.
const options = {
overflow: 'auto'
};
This is the icon that is displayed in the titlebar. It can be a NativeImage
icon or a path to an image file.
const options = {
icon: path.join(__dirname, 'icon.png')
};
or using nativeImage
const options = {
icon: nativeImage.createFromPath(path.join(__dirname, 'icon.png'))
};
For more details on NativeImage
, see Electron NativeImage.
This is the size of the icon that is displayed in the titlebar. This must be a number and must be between 16 and 24. (size in pixels)
const options = {
iconSize: 20
};
This is the location of the title. It can be left
, center
or right
.
const options = {
titleHorizontalAlignment: 'left'
};
It can be inverted
or first-buttons
.
inverted
completely reverses the bar, meaning buttons on the left are shown on the right and vice versa.
first-buttons
shows the titlebar normally, but buttons on the right are shown on the left.
const options = {
order: 'inverted'
};
Indicates whether the minimize button is enabled or not.
const options = {
minimizable: true
}
Indicates whether the maximize button is enabled or not.
const options = {
maximizable: true
}
Indicates whether the close button is enabled or not.
const options = {
closeable: true
}
Allows for customization of the button titles that are displayed when hovering over them.
const options = {
tooltips: {
minimize: 'Minimize',
maximize: 'Maximize',
restoreDown: 'Restore',
close: 'Close'
}
}