Allows to enable support for mouse hover events. This will cause the titlebar buttons to show a hover effect when the mouse cursor is hovering over any titlebar button. The specifics of the hover effect depend on the os-theme and theme used.
An example effect is shown in the images below:
(left: hover effect enabled, right: hover effect disabled (default). The hover effect varies from theme to theme).
<!-- hover effect enabled -->
<os-window
hover
></os-window>
<!-- hover effect disabled (default) -->
<os-window></os-window>
You can change the hover effect setting through JavaScript:
var win = document.createElement('os-window');
// To enable the hover effect
win.hover = true;
// To disable the hover effect
win.hover = false;
// To read the state of the hover effect
var isHoverEnabled = win.hover;
You can also listen for changes to the hover effect setting by registering an event listener for the hoverChange
event. The old and new values will be passed to the event listener as properties on the e.detail
object:
var win = document.createElement('os-window');
win.addEventListener('hoverChange', function(e) {
// read the old value for the hover state
console.log('Hover state was: ' + e.detail.oldValue);
// read the new value for the hover state
console.log('Hover state is now: ' + e.detail.newValue);
});
Allows the user to modify the window state using their mouse. This will cause most of the titlebar buttons to respond to mouse clicks and perform the corresponding action: The maximize button will restore the window to its original size and the minimize button will cause the window to collapse to just its toolbar. The effect is the same as setting the window-state
attribute or the windowState
property to either maximize
or minimize
. For an example how either state looks like, please refer to the Window State feature
<!-- interaction support enabled -->
<os-window
interactive
></os-window>
<!-- interaction support disabled (default) -->
<os-window></os-window>
You can change the interaction support setting through JavaScript:
var win = document.createElement('os-window');
// To enable interaction support
win.interactive = true;
// To disable interaction support
win.interactive = false;
// To read the state of interaction support
var isInteractive = win.interactive;
You can also listen for changes to the interaction support setting by registering an event listener for the interactiveChange
event. The old and new values will be passed to the event listener as properties on the e.detail
object:
var win = document.createElement('os-window');
win.addEventListener('interactiveChange', function(e) {
// read the old value for the interaction support setting
console.log('Interaction support was: ' + e.detail.oldValue);
// read the new value for the interaction support setting
console.log('Interaction support is now: ' + e.detail.newValue);
});
You can change the state of the window from maximized (default) to minimized. A minimized window hides its contents and is reduced to its window titlebar, showing only the titlebar buttons and the title text.
An example of a maximized and minimized window is shown in the images below:
(left: maximixed (default), right: minimized
<!-- window state maximized (default) -->
<os-window></os-window>
<!-- window state maximized (explicitly) -->
<os-window
window-state="maximized"
></os-window>
<!-- window state minimized -->
<os-window
window-state="minimized"
></os-window>
You can change the window state through JavaScript:
var win = document.createElement('os-window');
// To change window state to minimized
win.windowState = 'minimized';
// To change window state to maximized
win.windowState = 'maximized';
// To read the window state
var windowState = win.windowState;
You can also listen for changes to the window state by registering an event listener for the windowStateChange
event. The old and new state will be passed to the event listener as properties on the e.detail
object:
var win = document.createElement('os-window');
win.addEventListener('windowStateChange', function(e) {
// read the old window state
console.log('Window state was: ' + e.detail.oldWindowState);
// read the new window state
console.log('Window state is now: ' + e.detail.newWindowState);
});
You can change text that is displayed in the window titlebar next to the titlebar buttons. Per default the titlebar text is empty.
(left: empty titlebar text (default), right: random titlebar text
<!-- window title text empty (default) -->
<os-window></os-window>
<!-- window title text empty (explicitly) -->
<os-window
window-title=""
></os-window>
<!-- window title set -->
<os-window
window-title="Random Cat Pic"
></os-window>
You can change the window title through JavaScript:
var win = document.createElement('os-window');
// To change window title
win.windowState = 'My new window title';
// To read the window title
var windowTitle = win.windowTitle;
You can also listen for changes to the window title by registering an event listener for the windowTitleChange
event. The old and new title will be passed to the event listener as properties on the e.detail
object:
var win = document.createElement('os-window');
win.addEventListener('windowTitleChange', function(e) {
// read the old window title
console.log('Window title was: ' + e.detail.oldWindowTitle);
// read the new window title
console.log('Window title is now: ' + e.detail.newWindowTitle);
});
You can change the operating system theme of the window. Currently the available operating system themes are "mac" (default) and "win-xp".
An example of all available operating system theme settings is show in the images below:
(left: mac window theme (default), right win-xp window theme)
<!-- default operating system theme -->
<os-window></os-window>
<!-- default operating system theme (explicit) -->
<os-window
os-theme=""
></os-window>
<!-- mac operating system theme -->
<os-window
os-theme="mac"
></os-window>
<!-- win-xp operating system theme -->
<os-window
os-theme="win-xp"
></os-window>
<!-- win-7 operating system theme -->
<os-window
os-theme="win-7"
></os-window>
You can change the operating system theme through JavaScript:
var win = document.createElement('os-window');
// To change operating system theme to mac
win.osTheme = 'mac';
// To change operating system theme to win-xp
win.osTheme = 'win-xp';
// To change operating system theme to win-7
win.osTheme = 'win-7';
// To read the operating system theme
var osTheme = win.osTheme;
You can also listen for changes to the operating system theme by registering an event listener for the osThemeChange
event. The old and new operating system theme will be passed to the event listener as properties on the e.detail
object:
var win = document.createElement('os-window');
win.addEventListener('osThemeChange', function(e) {
// read the old operating system theme
console.log('Operating system theme was: ' + e.detail.oldOsTheme);
// read the new operating system theme
console.log('Operating system theme is now: ' + e.detail.newOsTheme);
});
For each operating system theme you can also change light mode or dark mode.
An example of all available combinations of light and dark mode with operating system theme settings is show in the images below:
(left: light mac window theme (default), right: dark mac window theme)
(left: light win-xp window theme (default), right: dark win-xp window theme)
(left: light win-7 window theme (default), right: dark win-7 window theme)
<!-- default theme -->
<os-window></os-window>
<!-- default theme (explicit) -->
<os-window
theme="light"
></os-window>
<!-- dark theme -->
<os-window
theme="dark"
></os-window>
You can change the theme through JavaScript:
var win = document.createElement('os-window');
// To change the theme to 'light'
win.theme = 'light';
// To change the theme to 'dark'
win.theme = 'dark';
// To read the theme
var theme = win.theme;
You can also listen for changes to the operating system theme by registering an event listener for the osThemeChange
event. The old and new operating system theme will be passed to the event listener as properties on the e.detail
object:
var win = document.createElement('os-window');
win.addEventListener('osThemeChange', function(e) {
// read the old operating system theme
console.log('Operating system theme was: ' + e.detail.oldOsTheme);
// read the new operating system theme
console.log('Operating system theme is now: ' + e.detail.newOsTheme);
});