Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(77)

Side by Side Diff: pkg/polymer/lib/elements/polymer-selector/demo.html

Issue 175443005: [polymer] import all elements (Closed) Base URL: https://dart.googlecode.com/svn/branches/bleeding_edge/dart
Patch Set: updated from bower Created 6 years, 9 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch | Annotate | Revision Log
OLDNEW
(Empty)
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Selector</title>
5 <script src="../platform/platform.js"></script>
6 <link rel="import" href="polymer-selector.html">
7 </head>
8 <body unresolved>
9 <polymer-element name="selector-examples">
10 <template>
11 <style>
12 .list {
13 display: block;
14 border: 1px solid #ccc;
15 border-bottom: none;
16 background: #666;
17 color: white;
18 list-style: none;
19 margin: 0;
20 padding: 0;
21 }
22
23 .list > * {
24 height: 40px;
25 line-height: 40px;
26 padding: 0 20px;
27 border-bottom: 1px solid #ccc;
28 }
29
30 .list > *.polymer-selected {
31 background: #333;
32 }
33
34 li {
35 height: 30px;
36 }
37
38 li.polymer-selected:after {
39 content: "\2713";
40 position: absolute;
41 padding-left: 10px;
42 }
43 </style>
44
45 <h2>basic</h2>
46 <polymer-selector class="list" selected="0">
47 <div>Item 0</div>
48 <div>Item 1</div>
49 <div>Item 2</div>
50 <div>Item 3</div>
51 <div>Item 4</div>
52 </polymer-selector>
53
54 <h2>multi-selection</h2>
55 <polymer-selector class="list" selected="{{multiSelected}}" multi>
56 <div>Item 0</div>
57 <div>Item 1</div>
58 <div>Item 2</div>
59 <div>Item 3</div>
60 <div>Item 4</div>
61 </polymer-selector>
62
63 <h2>list</h2>
64 <polymer-selector target="{{$.list}}" selected="0"></polymer-selector>
65 <ul id="list">
66 <li>Item 0</li>
67 <li>Item 1</li>
68 <li>Item 2</li>
69 <li>Item 3</li>
70 <li>Item 4</li>
71 </ul>
72
73 <h2>binding of a group of radio buttons to a variable</h2>
74 <polymer-selector target="{{$.myForm}}" itemsSelector="input[type=radio]"
75 selected="{{color}}" valueattr="value" selectedProperty="checked"
76 activateEvent="change"></polymer-selector>
77 <form id="myForm">
78 <label><input type="radio" name="color" value="red"> Red</label> <br>
79 <label><input type="radio" name="color" value="green"> Green</label> <br >
80 <label><input type="radio" name="color" value="blue"> Blue</label> <br>
81 <p>color = {{color}}</p>
82 </form>
83
84 </template>
85
86 <script>
87 Polymer('selector-examples', {
88 ready: function() {
89 this.multiSelected = [1, 3];
90 this.color = 'green';
91 }
92 });
93 </script>
94 </polymer-element>
95
96 <selector-examples></selector-examples>
97 </body>
98 </html>
OLDNEW
« no previous file with comments | « pkg/polymer/lib/elements/polymer-selector/bower.json ('k') | pkg/polymer/lib/elements/polymer-selector/docs.json » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698