mirror of
https://github.com/Polymer/polymer.git
synced 2025-02-25 18:55:30 -06:00
71 lines
1.4 KiB
HTML
71 lines
1.4 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
|
|
<title>dom-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/dom-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="dom-if" id="if1" if="[[checked]]">
|
|
<h3>Lazy / hidden</h3>
|
|
Text node
|
|
<div class="content" style="display: inline-block;">
|
|
<div>I have been <input value="{{value::input}}"></div>
|
|
</div>
|
|
Text node
|
|
</template>
|
|
|
|
<template is="dom-if" id="if2" if="[[checked]]" restamp>
|
|
<h3>Restamp</h3>
|
|
Text node
|
|
<div class="content" style="display: inline-block;">
|
|
<div>I have been <input value="{{value::input}}"></div>
|
|
</div>
|
|
Text node
|
|
</template>
|
|
|
|
</template>
|
|
</dom-module>
|
|
|
|
<script>
|
|
HTMLImports.whenReady(function() {
|
|
Polymer({
|
|
|
|
is: 'x-test',
|
|
|
|
properties: {
|
|
value: {
|
|
value: 'stamped!'
|
|
}
|
|
}
|
|
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<x-test></x-test>
|
|
|
|
</body>
|
|
</html>
|