lightview
Version:
Small, simple, powerful web UI and micro front end creation ... Great ideas from Svelte, React, Vue and Riot combined.
72 lines (68 loc) • 2.49 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Lightview:Components:Timeline</title>
<link href="../css/tutorial.css" rel="stylesheet">
<link href="../slidein.html" rel="module">
<link href="repl.html" rel="module">
<script src="../javascript/highlightjs.min.js"></script>
<script src="../javascript/marked.min.js"></script>
<script src="../javascript/utils.js"></script>
</head>
<body class="tutorial-body">
<script src="../javascript/lightview.js"></script>
<div class="tutorial-instructions">
<l-slidein src="./contents.html" class="toc"></l-slidein>
<div class="markdown">
## Timeline
</div>
<button class="nav-previous"><a href="orgchart-repl.html" target="content">Previous</a></button>
<button class="nav-next"><a href="gauge-repl.html" target="content">Next</a></button>
</div>
<div class="repl">
<h2></h2>
<l-repl id="repl" style="min-height:95vh;min-width:600px;" previewpinned path="$location" previewheight="400px">
<div slot="headhtml"></div>
<div slot="bodyhtml"></div>
<div slot="script"></div>
<template slot="src">
<l-head>
<link href="./timeline.html" rel="module">
<script src="../javascript/lightview.js"></script>
</l-head>
<l-body>
<l-timeline title="Presidents">
{
options: { showRowLabels: false },
rows: [
[ '1', 'George Washington','1789-03-30', '1797-2-04' ],
[ '2', 'John Adams', '1797-02-04', '1801-02-04' ],
[ '3', 'Thomas Jefferson', '1801-02-04', '1809-02-04']
]
}
</l-timeline>
<l-timeline title="Presidents and Vice Presidents">
{
options: { },
rows: [
[ 'President', 'George Washington','1789-03-30', '1797-2-04' ],
[ 'President', 'John Adams', '1797-02-04', '1801-02-04' ],
[ 'President', 'Thomas Jefferson', '1801-02-04', '1809-02-04'],
[ 'Vice President', 'John Adams','1789-03-21', '1797-02-04'],
[ 'Vice President', 'Thomas Jefferson','1797-02-04', '1801-02-04'],
[ 'Vice President', 'Aaron Burr','1801-02-04', '1805-02-04']
]
}
</l-timeline>
</l-body>
<script>
</script>
</template>
</l-repl>
</div>
<script>
processMarkdown();
</script>
</body>
</html>