For all information, read the wiki.
Windows 11 native-like apps using Javascript and HTML. Works with Electron and NW.js !
Grab this repository and import it into your project's folder.
import Presqu'11 CSS files in your tag
<head>
<link rel="stylesheet" href="presqu11.css">
</head>and then import the JS at the end of
<body>
<!-- your code -->
<!-- importing Presqu'11 -->
<script src="presqu11.js"></script>
</body>To use Presqu'11 components, just add them in your HTML file.
The topbar is a key element of a Windows app. This one has been recreated from scratch using CSS, to fit Windows 11 guidelines.
<w11-topbar icon="//your icon//" title="//your title//"></w11-topbar>NWJS users : Controls like close, maximize etc... already works straight from with no additionnal code. Dragging works too.
Electron users : Dragging works out-of-the-box, but controls will not work and may crash the app
To use tabs, you need two key things : a tab and a way to select tabs. Both are included and works with no additionnal code.
<w11-tabs default="// default tab //">
<w11-tab-select icon="// icon //" text="Tab 1" for="tab1" class="selected"></w11-tab-select>
<w11-tab-select icon="// icon //" text="Tab 2" for="tab2"></w11-tab-select>
</w11-tabs>default=""tells which tab should be shown by default. The default app should also get theclass="selected"to be selected in the selection.- The rest of the code is pretty self-explainatory, try by yourself.*
The tab is what should be shown to users (it contains the main content).
<w11-tab id="tab11">
<w11-tab-title>Tab 1</w11-tab-title>
<w11-tab-content>
</w11-tab-content>
</w11-tab>The ID should be the same as for="" in your tab selection, otherwise, it may crash the app.
The <w11-tab-title> is optionnal, but recommended for user experience If used, you should add your content in <w11-tab-content>. If you don't use <w11-tab-title>, it's optionnal to use <w11-tab-content>.
For the other components, read the wiki.