lightview
Version:
Small, simple, powerful web UI and micro front end creation ... Great ideas from Svelte, React, Vue and Riot combined.
60 lines (54 loc) • 2.07 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Lightview:Tutorial:If Directive</title>
<link href="../css/tutorial.css" rel="stylesheet">
<link href="../components/repl.html" rel="module">
<link href="../slidein.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">
## If Directive
The `l-if` directive supports the conditional display of content. It can be added to any html element. If its value
is `true`, the element and child nodes are displayed. Otherwise, they are not.
Try deleting the line `exposed = true`. Nothing should display.
Try adding `hiding = true` to the mount function in the script block. "I am hiding" should display.
Try changing `l-if="${hiding}"` to `l-if="${!hiding}"`. Nothing should display.
</div>
<button class="nav-previous"><a href="./15-form-binding.html" target="content">Previous</a></button>
<button class="nav-next"><a href="./17-loop-directives.html" target="content">Next</a></button>
</div>
<div style="float:right;margin-right:10px">
<h2></h2>
<l-repl id="repl" style="min-height:95vh;min-width:600px;" previewpinned>
<div slot="bodyhtml"></div>
<div slot="script"></div>
<template slot="src">
<l-head>
<script src="../javascript/lightview.js?as=x-body"></script>
</l-head>
<l-body>
<p l-if="${exposed}">I am exposed</p>
<p l-if="${hiding}">I am hiding</p>
</l-body>
<script id="lightview">
currentComponent.mount = function() {
this.variables({exposed:"boolean",hiding:"boolean"});
exposed = true;
}
</script>
</template>
</l-repl>
</div>
<script>
processMarkdown();
</script>
</body>
</html>