node-red-contrib-uibuilder
Version:
Easily create data-driven web UI's for Node-RED. Single- & Multi-page. Multiple UI's. Work with existing web development workflows or mix and match with no-code/low-code features.
57 lines (52 loc) • 3 kB
HTML
<!-- Everything like %%...%% and {{...}} gets replaced on first page load if attributes available.
-- Everything that has a data-fmvar="...." gets updated when navigating via SPA.
-- % %body% % is where the main content goes. If you don't include it, you get no content!
-- <base> is REQUIRED for SPA navigation to work properly.
-->
<html lang="en" class="dark"><head>
<meta charset="UTF-8">
<base href="%%url%%/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" uib-var="pageData.description" content="No description for this page.">
<title uib-var="pageData.title">No title</title>
<link rel="icon" uib-var="pageData.favicon" href="../uibuilder/images/uib-world-green.svg">
<link type="text/css" rel="stylesheet" href="../uibuilder/uib-brand.min.css" media="all">
<link type="text/css" rel="stylesheet" href="../uibuilder/utils/markweb.css" media="all">
<!-- You can add your own stylesheets here -->
<!-- REQUIRED: Sets window.pageData at load time -->
%%prescript%%
<!-- REQUIRED: uibuilder client library (optional logLevel)-->
<script type="module" src="../uibuilder/uibuilder.esm.min.js?logLevel=1"></script>
<!-- OPTIONAL: <show-meta> web component to display page metadata for debugging -->
<script type="module" src="../uibuilder/utils/show-meta.mjs"></script>
<!-- REQUIRED: The markweb client library -->
<script type="module" src="../uibuilder/utils/markweb.mjs"></script>
<!-- You can add your own scripts after here -->
</head><body>
<div id="markweb">
<!-- Adds resizer column, Wraps sidebar in an aside tag -->
%%sidebar%%
<!-- Main content -->
<main>
<a class="skip-link" href="#main">Skip to main content</a>
<header>
<h1><a id="page-title-link" href="#" style="color: inherit; text-decoration: none;"><uib-var variable="pageData.title">No Title</uib-var></a></h1>
<div uib-var="pageData.description">No Description for this page.</div>
</header>
<section>
<!-- Optional page status display -->
<!-- <blockquote class="visible-status" uib-if="pageData.status !== undefined || pageData.since !== undefined"> -->
<blockquote class="visible-status">
<uib-var variable="pageData.status" data-before="Status: " data-after=". "></uib-var>
<uib-var variable="pageData.since" data-before="Since: " data-after=". "></uib-var>
</blockquote>
<!-- This is where the main content goes. It will be replaced on navigation. -->
<uib-var variable="pageData.content" type="html">No content</uib-var>
</section>
<footer><!-- Common page footer -->
<span data-fmvar="copyright">%%copyright%%</span>
</footer>
</main>
</div>
</body></html>