five-bells-visualization
Version:
Tool to visualize Five Bells payments
212 lines (131 loc) • 3.37 kB
HTML
<!--
@license
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="import" href="../../polymer.html">
<x-trivial></x-trivial>
<style>
x-trivial {
display: block;
padding: 8px;
}
</style>
<script>
Polymer({
is: 'x-trivial',
ready: function() {
this.innerHTML = '<i>Hey</i>, is this script <b>on</b>?';
}
});
</script>
<!----------------------------------------------------------------------------->
<x-has-template></x-has-template>
<style>
x-has-template {
display: block;
padding: 8px;
}
</style>
<template>
<i>Hey</i>, is this template <b>on</b>?
</template>
<script>
Polymer({
is: 'x-has-template'
});
</script>
<!----------------------------------------------------------------------------->
<x-has-projection>content</x-has-projection>
<style>
x-has-projection {
display: block;
padding: 8px;
}
</style>
<template>
<i>Hey</i>, is this <content></content> <b>on</b>?
</template>
<script>
Polymer({
is: 'x-has-projection'
});
</script>
<!----------------------------------------------------------------------------->
<x-has-reprojection>reprojection</x-has-reprojection>
<style>
x-has-reprojection {
display: block;
}
</style>
<template>
<x-has-projection><content></content></x-has-projection>
</template>
<script>
Polymer({
is: 'x-has-reprojection'
});
</script>
<!----------------------------------------------------------------------------->
<div is="x-extended-div"></div>
<style>
[is=x-extended-div] {
display: block;
padding: 8px;
}
</style>
<template>
<i>Hey</i>, is this extension <b>on</b>?
</template>
<script>
Polymer({
is: 'x-extended-div',
extends: 'div'
});
</script>
<!----------------------------------------------------------------------------->
<x-annotated></x-annotated>
<style>
x-annotated {
display: block;
padding: 8px;
}
</style>
<template>
<i>Hey</i>, is this <span id="kind"></span> <b>on</b>?
</template>
<script>
Polymer({
is: 'x-annotated',
ready: function() {
this.$.kind.textContent = 'annotation';
}
});
</script>
<!----------------------------------------------------------------------------->
<x-attributes attribute="attribute"></x-attributes>
<style>
x-attributes {
padding: 8px;
}
</style>
<template>
<i>Hey</i>, is this <span id="kind"></span> <b>on</b>?
</template>
<script>
Polymer({
is: 'x-attributes',
hostAttributes: 'block',
properties: {
attribute: String
},
set attribute(attribute) {
this.$.kind.textContent = attribute;
}
});
</script>