relift-html
Version:
A blazing fast view library that lets you put Javascript Template Literals in HTML
59 lines (51 loc) • 1.56 kB
HTML
<html>
<head>
<title>reLift Demo</title>
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic" />
<link rel="stylesheet" href="//cdn.rawgit.com/necolas/normalize.css/master/normalize.css" />
<link rel="stylesheet" href="//cdn.rawgit.com/milligram/milligram/master/dist/milligram.min.css" />
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<div class="container">
<div class="row">
<div class="column center">
<h3 class="title">Counter</h3>
</div>
</div>
<div class="row">
<div id="counter" class="column center">
<div><h4>{this.count}</h4></div>
<div>
${ (this.count >= 7) ? `More than 7` : `` }
<div r-if="this.count > 5">greater than 5</div>
<button @click="down" class="button-outline">DOWN</button>
<button @click="up" class="button-outline">UP</button>
</div>
</div>
</div>
<div>
<my-counter></my-counter>
</div>
</div>
<script type="module">
import reLiftHTML from '../src/index.js';
reLiftHTML({
el: '#counter',
tagName: 'my-counter',
asTemplate: true,
isShadow: false,
data: {
count: 0
},
up() {
this.data.count++;
},
down() {
this.data.count--;
}
});
</script>
</body>
</html>