Package Exports
- universal-title-bar
- universal-title-bar/src/universal-title-bar.svelte
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (universal-title-bar) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
Universal Title Bar
For PWA's your app needs to have the window-controls-overlay enabled and the browser needs to support the feature:
// site.webmanifest
{
// ...
"display_override": ["window-controls-overlay"],
// ...
}The titlebar title is inherited from the document's title, and the image is the first favicon entry in the website. They can be overwritten using their respective props.
For electron you need to the enable the custom controls using the controls prop, handle the maximize and minimize events yourself, and create a frameless window:
new BrowserWindow({
// ...
frame: false,
autoHideMenuBar: true,
/// ...
})This component uses $$restProps, which means you can pass any property to the root div, like style, class etc.
Functions:
import titlebar from 'universal-title-bar'
import snap from 'snap-layout'
<titlebar controls={true} autohide={true} hidden={false} title='My App' image='./image.png' on:close={() => { window.close() }} on:maximize={() => { handleMax() }} on:minimize={() => { handleMin() }}>
<snap size='env(titlebar-area-height, 32px)' />
</titlebar>Or use as a web component outside Svelte:
<script src="https://cdn.jsdelivr.net/npm/universal-title-bar@latest/dist/universal-title-bar.mjs"></script>
<body>
<universal-title-bar controls="true"></universal-title-bar>
</body>