todomvc
Version:
> Helping you select an MV\* framework
107 lines (95 loc) • 3 kB
HTML
<!--
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
-->
<html>
<head>
<title>Selector</title>
<script src="../platform/platform.js"></script>
<link rel="import" href="core-selector.html">
</head>
<body unresolved>
<polymer-element name="selector-examples">
<template>
<style>
.list {
display: block;
border: 1px solid #ccc;
border-bottom: none;
background: #666;
color: white;
list-style: none;
margin: 0;
padding: 0;
}
.list > * {
height: 40px;
line-height: 40px;
padding: 0 20px;
border-bottom: 1px solid #ccc;
}
.list > *.core-selected {
background: #333;
}
li {
height: 30px;
}
li.core-selected:after {
content: "\2713";
position: absolute;
padding-left: 10px;
}
</style>
<h2>basic</h2>
<core-selector class="list" selected="0">
<div>Item 0</div>
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
</core-selector>
<h2>multi-selection</h2>
<core-selector class="list" selected="{{multiSelected}}" multi>
<div>Item 0</div>
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
</core-selector>
<h2>list</h2>
<core-selector target="{{$.list}}" selected="0"></core-selector>
<ul id="list">
<li>Item 0</li>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
<h2>binding of a group of radio buttons to a variable</h2>
<core-selector target="{{$.myForm}}" itemsSelector="input[type=radio]"
selected="{{color}}" valueattr="value" selectedProperty="checked"
activateEvent="change"></core-selector>
<form id="myForm">
<label><input type="radio" name="color" value="red"> Red</label> <br>
<label><input type="radio" name="color" value="green"> Green</label> <br>
<label><input type="radio" name="color" value="blue"> Blue</label> <br>
<p>color = {{color}}</p>
</form>
</template>
<script>
Polymer('selector-examples', {
ready: function() {
this.multiSelected = [1, 3];
this.color = 'green';
}
});
</script>
</polymer-element>
<selector-examples></selector-examples>
</body>
</html>