OLD | NEW |
| (Empty) |
1 <polymer-element name="polymer-body" extends="body" assetpath="../polymer/"> | |
2 | |
3 | |
4 | |
5 </polymer-element> | |
6 <!-- | |
7 Copyright 2013 The Polymer Authors. All rights reserved. | |
8 Use of this source code is governed by a BSD-style | |
9 license that can be found in the LICENSE file. | |
10 --> | |
11 | |
12 <!-- <link rel="import" href="../polymer-dev/polymer.html"> --> | |
13 | |
14 <!-- | |
15 Copyright 2013 The Polymer Authors. All rights reserved. | |
16 Use of this source code is governed by a BSD-style | |
17 license that can be found in the LICENSE file. | |
18 --> | |
19 <!-- | |
20 /** | |
21 * @module Polymer Elements | |
22 */ | |
23 --> | |
24 <!-- | |
25 /** | |
26 * The polymer-selection element is used to manage selection state. It has no | |
27 * visual appearance and is typically used in conjuneciton with another element. | |
28 * For example, <a href="polymer-selector.html">polymer-selector</a> | |
29 * use a polymer-selection to manage selection. | |
30 * | |
31 * To mark an item as selected, call the select(item) method on | |
32 * polymer-selection. Notice that the item itself is an argument to this method. | |
33 * The polymer-selection element manages selection state for any given set of | |
34 * items. When an item is selected, the `polymer-select` event is fired. | |
35 * The attribute "multi" indicates if multiple items can be selected at once. | |
36 * | |
37 * Example: | |
38 * | |
39 * <polymer-element name="selection-example"> | |
40 * <template> | |
41 * <style> | |
42 * ::-webkit-distributed(> .selected) { | |
43 * font-weight: bold; | |
44 * font-style: italic; | |
45 * } | |
46 * </style> | |
47 * <ul on-tap="{{itemTapAction}}"> | |
48 * <content></content> | |
49 * </ul> | |
50 * <polymer-selection id="selection" multi on-polymer-select="{{selectA
ction}}"></polymer-selection> | |
51 * </template> | |
52 * <script> | |
53 * Polymer('selection-example', { | |
54 * itemTapAction: function(e) { | |
55 * this.$.selection.select(e.target); | |
56 * }, | |
57 * selectAction: function(e, detail) { | |
58 * detail.item.classList.toggle('selected', detail.isSelected); | |
59 * } | |
60 * }); | |
61 * </script> | |
62 * </polymer-element> | |
63 * | |
64 * <selection-example> | |
65 * <li>Red</li> | |
66 * <li>Green</li> | |
67 * <li>Blue</li> | |
68 * </selection-example> | |
69 * | |
70 * @class polymer-selection | |
71 */ | |
72 /** | |
73 * Fired when an item's selection state is changed. This event is fired both | |
74 * when an item is selected or deselected. The `isSelected` detail property | |
75 * contains the selection state. | |
76 * | |
77 * @event polymer-select | |
78 * @param {Object} detail | |
79 * @param {boolean} detail.isSelected true for selection and false for deselec
tion | |
80 * @param {Object} detail.item the item element | |
81 */ | |
82 --> | |
83 | |
84 | |
85 <polymer-element name="polymer-selection" attributes="multi" assetpath="../polym
er-selection/"> | |
86 <template> | |
87 <style> | |
88 :host { | |
89 display: none !important; | |
90 } | |
91 </style> | |
92 </template> | |
93 | |
94 </polymer-element> | |
95 | |
96 <!-- | |
97 Copyright 2013 The Polymer Authors. All rights reserved. | |
98 Use of this source code is governed by a BSD-style | |
99 license that can be found in the LICENSE file. | |
100 --> | |
101 <!-- | |
102 /** | |
103 * @module Polymer Elements | |
104 */ | |
105 /** | |
106 * polymer-selector is used to manage a list of elements that can be selected. | |
107 * The attribute "selected" indicates which item element is being selected. | |
108 * The attribute "multi" indicates if multiple items can be selected at once. | |
109 * Tapping on the item element would fire "polymer-activate" event. Use | |
110 * "polymer-select" event to listen for selection changes. | |
111 * | |
112 * Example: | |
113 * | |
114 * <polymer-selector selected="0"> | |
115 * <div>Item 1</div> | |
116 * <div>Item 2</div> | |
117 * <div>Item 3</div> | |
118 * </polymer-selector> | |
119 * | |
120 * polymer-selector is not styled. So one needs to use "polymer-selected" CSS | |
121 * class to style the selected element. | |
122 * | |
123 * <style> | |
124 * .item.polymer-selected { | |
125 * background: #eee; | |
126 * } | |
127 * </style> | |
128 * ... | |
129 * <polymer-selector> | |
130 * <div class="item">Item 1</div> | |
131 * <div class="item">Item 2</div> | |
132 * <div class="item">Item 3</div> | |
133 * </polymer-selector> | |
134 * | |
135 * @class polymer-selector | |
136 * @status stable | |
137 */ | |
138 /** | |
139 * Fired when an item's selection state is changed. This event is fired both | |
140 * when an item is selected or deselected. The `isSelected` detail property | |
141 * contains the selection state. | |
142 * | |
143 * @event polymer-select | |
144 * @param {Object} detail | |
145 * @param {boolean} detail.isSelected true for selection and false for deselec
tion | |
146 * @param {Object} detail.item the item element | |
147 */ | |
148 /** | |
149 * Fired when an item element is tapped. | |
150 * | |
151 * @event polymer-activate | |
152 * @param {Object} detail | |
153 * @param {Object} detail.item the item element | |
154 */ | |
155 --> | |
156 | |
157 | |
158 | |
159 <polymer-element name="polymer-selector" attributes="selected multi valueattr se
lectedClass selectedProperty selectedAttribute selectedItem selectedModel select
edIndex notap target itemsSelector activateEvent" assetpath="../polymer-selector
/"> | |
160 <template> | |
161 <polymer-selection id="selection" multi="{{multi}}" on-polymer-select="{{sel
ectionSelect}}"></polymer-selection> | |
162 <content id="items" select="*"></content> | |
163 </template> | |
164 | |
165 </polymer-element> | |
166 <!-- WARNING: DO NOT modify polymer-elements.html/polymer-elements.js. They | |
167 are automatically generated from polymer-elements.in.html using | |
168 vulcanize.py. --> | |
169 | |
170 <!-- Include all library elements here that should be vulcanized down to a | |
171 single html/js file. --> | |
172 | |
173 | |
174 <script src="polymer-elements.js"></script> | |
175 | |
OLD | NEW |