Lightweight window manager for the web.
Demo • Getting Started • Options • Styling • API • Custom Builds
Get Latest Build (Stable):
| Bundle Standalone: | ||
| winbox.bundle.js | Download | https://rawcdn.githack.com/nextapps-de/winbox/0.0.1/dist/winbox.bundle.js |
|
Non-Bundled: |
||
| winbox.min.js | Download | https://rawcdn.githack.com/nextapps-de/winbox/0.0.1/dist/js/winbox.min.js |
| winbox.css | Download | https://rawcdn.githack.com/nextapps-de/winbox/0.0.1/dist/css/winbox.css |
| img.zip | Download | Alternatively when using non-bundled version you can download icons from /dist/img/. |
|
ES6 Modules: |
||
| src.zip | Download | The folder "src" of this Github repository. |
Get Latest Build (Nightly):
Just exchange the version number from the URLs above with "master", e.g.: "/winbox/0.0.1/dist/" into "/winbox/master/dist".
Get Latest (NPM):
npm install winbox.jsGet Latest (ES6 Modules):
https://github.com/nextapps-de/winbox/tree/master/src
Basic Setup
1. Just insert the script resource tag right after the documents head:
When you need to add custom styling through css class modifications it is recommended to load the library before you load the css which contains the modifications. Otherwise you have to add an "!important" flag to override existing styles.
<html>
<head>
<script src="winbox.bundle.js"></script>
<title></title>
</head>
<body>
<!-- CONTENT -->
</body>
</html>Preload Library / Async Load
If you like to override css classes for custom styling you may need to add !important flag to the css property value.
<html>
<head>
<title></title>
<link rel="preload" href="winbox.bundle.js" as="script">
</head>
<body>
<!--
CONTENT
-->
<script src="winbox.bundle.js" async></script>
</body>
</html>When using WinBox exclusively through the API it is recommended to follow this practice. But there are some important facts you might need to know:
- When loading the library before loading other stylesheets (which modifies the WinBox default theme) you do not have to add a "!important" flag to the styles.
- When using WinBox with anchors it is recommended to load the library in the head section of the document to prevent executing the default anchor behavior when the user has clicked during page load.
- In rare situations it also might produce a short flashing/reflow after page load, depending on your stack. Moving the script tag into the head section will solve this issue.
Custom Builds
Note: You can modify all source files e.g. stylesheets, template and also the icon files located in /src/img/. Providing a more handy way to pass custom icons is coming soon.
Perform a full build:
npm run buildThe destination folder of the build is: /dist/
Copyright 2021 Nextapps GmbH
Released under the Apache 2.0 License