@itrocks/list
Version:
Generic action-based object list navigation in HTML and JSON
63 lines (60 loc) • 1.61 kB
HTML
<html lang="en">
<head>
<link href="../../action-bar/action.css" rel="stylesheet">
<link href="../../ux-core/css/app.css" rel="stylesheet">
<link href="../../ux-core/css/article.css" rel="stylesheet">
<link href="../list.css" rel="stylesheet">
<meta charset="utf-8">
<script src="../build.js" type="module"></script>
<title>{type.@output.ucFirst} list</title>
</head>
<body>
<main>
<!--BEGIN-->
<!--#main-->
<article data-action="list" data-class="{type.name}" data-route="{type.@route}">
<header>
<h2>{type.@output.ucFirst} list</h2>
<section class="summary">{objects.length} elements</section>
<ul class="general actions">
<!--generalActions-->
<li class="{action}">{{template}}</li>
<!--end-->
</ul>
</header>
<form action="app://(type.@route)" autocomplete="off" method="post" target="main">
<table class="objects">
<thead>
<tr class="properties">
<th class="select" data-fix><input name="select" type="checkbox" value="all"></th>
<!--type.%properties-->
<th data-property="{name}">{@display}</th>
<!--end-->
</tr>
</thead>
<tbody>
<!--objects-->
<tr>
<th class="select"><input name="id" type="checkbox" value="{id}"></th>
<!--%properties-->
<td>{outputOptionalContainer}</td>
<!--end-->
</tr>
<!--end-->
</tbody>
</table>
<footer>
<ul class="selection actions">
<!--selectionActions-->
<li class="{action}">{{template}}</li>
<!--end-->
</ul>
</footer>
</form>
</article>
<!--#end-->
<!--END-->
</main>
</body>
</html>