five-bells-visualization
Version:
Tool to visualize Five Bells payments
67 lines (52 loc) • 1.35 kB
HTML
<html>
<head>
<title>x-if</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../../polymer.html">
<link rel="import" href="../../src/lib/template/x-if.html">
</head>
<body>
<dom-module id="x-test">
<style>
.content {
border: 1px dashed orange;
margin: 8px;
padding: 8px;
}
</style>
<template>
if <input type="checkbox" checked="{{checked::change}}">
<br><br>
<input value="{{value::input}}">
<template is="x-if" id="if1" if="[[checked]]">
<h3>Lazy / hidden</h3>
<div class="content">
<div>I have been <input value="{{parent.value::input}}"></div>
</div>
</template>
<template is="x-if" id="if2" if="[[checked]]" restamp>
<h3>Restamp</h3>
<div class="content">
<div>I have been <input value="{{parent.value::input}}"></div>
</div>
</template>
</template>
</dom-module>
<script>
HTMLImports.whenReady(function() {
Polymer({
is: 'x-test',
properties: {
value: {
value: 'stamped!'
}
}
});
});
</script>
<x-test></x-test>
</body>
</html>