OLD | NEW |
1 <!-- | 1 <!-- |
2 Copyright 2013 The Polymer Authors. All rights reserved. | 2 Copyright 2013 The Polymer Authors. All rights reserved. |
3 Use of this source code is governed by a BSD-style | 3 Use of this source code is governed by a BSD-style |
4 license that can be found in the LICENSE file. | 4 license that can be found in the LICENSE file. |
5 --> | 5 --> |
6 <!-- | 6 <!-- |
7 /** | 7 /** |
8 * @module Polymer Elements | 8 * @module Polymer Elements |
9 */ | 9 */ |
10 --> | 10 --> |
11 <!-- | 11 <!-- |
12 /** | 12 /** |
13 * The polymer-selection element is used to manage selection state. It has no | 13 * The polymer-selection element is used to manage selection state. It has no |
14 * visual appearance and is typically used in conjuneciton with another element. | 14 * visual appearance and is typically used in conjuneciton with another element. |
15 * For example, <a href="polymer-selector.html">polymer-selector</a> | 15 * For example, <a href="polymer-selector.html">polymer-selector</a> |
16 * use a polymer-selection to manage selection. | 16 * use a polymer-selection to manage selection. |
17 * | 17 * |
18 * To mark an item as selected, call the select(item) method on | 18 * To mark an item as selected, call the select(item) method on |
19 * polymer-selection. Notice that the item itself is an argument to this method. | 19 * polymer-selection. Notice that the item itself is an argument to this method. |
20 * The polymer-selection element manages selection state for any given set of | 20 * The polymer-selection element manages selection state for any given set of |
21 * items. When an item is selected, the `polymer-select` event is fired. | 21 * items. When an item is selected, the `polymer-select` event is fired. |
22 * The attribute "multi" indicates if multiple items can be selected at once. | 22 * The attribute "multi" indicates if multiple items can be selected at once. |
23 * | 23 * |
24 * Example: | 24 * Example: |
25 * | 25 * |
26 * <polymer-element name="selection-example"> | 26 * <polymer-element name="selection-example"> |
27 * <template> | 27 * <template> |
28 * <style> | 28 * <style> |
29 * ::-webkit-distributed(> .selected) { | 29 * ::-webkit-distributed(> .selected) { |
30 * font-weight: bold; | 30 * font-weight: bold; |
31 * font-style: italic; | 31 * font-style: italic; |
32 * } | 32 * } |
33 * </style> | 33 * </style> |
(...skipping 19 matching lines...) Expand all Loading... |
53 * <li>Green</li> | 53 * <li>Green</li> |
54 * <li>Blue</li> | 54 * <li>Blue</li> |
55 * </selection-example> | 55 * </selection-example> |
56 * | 56 * |
57 * @class polymer-selection | 57 * @class polymer-selection |
58 */ | 58 */ |
59 /** | 59 /** |
60 * Fired when an item's selection state is changed. This event is fired both | 60 * Fired when an item's selection state is changed. This event is fired both |
61 * when an item is selected or deselected. The `isSelected` detail property | 61 * when an item is selected or deselected. The `isSelected` detail property |
62 * contains the selection state. | 62 * contains the selection state. |
63 * | 63 * |
64 * @event polymer-select | 64 * @event polymer-select |
65 * @param {Object} detail | 65 * @param {Object} detail |
66 * @param {boolean} detail.isSelected true for selection and false for deselec
tion | 66 * @param {boolean} detail.isSelected true for selection and false for deselec
tion |
67 * @param {Object} detail.item the item element | 67 * @param {Object} detail.item the item element |
68 */ | 68 */ |
69 --> | 69 --> |
| 70 <link rel="import" href="../polymer/polymer.html"> |
| 71 |
70 <polymer-element name="polymer-selection" attributes="multi"> | 72 <polymer-element name="polymer-selection" attributes="multi"> |
71 <template> | 73 <template> |
72 <style> | 74 <style> |
73 :host { | 75 :host { |
74 display: none !important; | 76 display: none !important; |
75 } | 77 } |
76 </style> | 78 </style> |
77 </template> | 79 </template> |
78 <script> | 80 <script> |
79 Polymer('polymer-selection', { | 81 Polymer('polymer-selection', { |
80 /** | 82 /** |
81 * If true, multiple selections are allowed. | 83 * If true, multiple selections are allowed. |
82 * | 84 * |
83 * @attribute multi | 85 * @attribute multi |
84 * @type boolean | 86 * @type boolean |
85 * @default false | 87 * @default false |
86 */ | 88 */ |
87 multi: false, | 89 multi: false, |
88 ready: function() { | 90 ready: function() { |
89 this.clear(); | 91 this.clear(); |
90 }, | 92 }, |
91 clear: function() { | 93 clear: function() { |
92 this.selection = []; | 94 this.selection = []; |
93 }, | 95 }, |
94 /** | 96 /** |
95 * Retrieves the selected item(s). | 97 * Retrieves the selected item(s). |
96 * @method getSelection | 98 * @method getSelection |
97 * @returns Returns the selected item(s). If the multi property is true, | 99 * @returns Returns the selected item(s). If the multi property is true, |
98 * getSelection will return an array, otherwise it will return | 100 * getSelection will return an array, otherwise it will return |
99 * the selected item or undefined if there is no selection. | 101 * the selected item or undefined if there is no selection. |
100 */ | 102 */ |
101 getSelection: function() { | 103 getSelection: function() { |
102 return this.multi ? this.selection : this.selection[0]; | 104 return this.multi ? this.selection : this.selection[0]; |
103 }, | 105 }, |
104 /** | 106 /** |
105 * Indicates if a given item is selected. | 107 * Indicates if a given item is selected. |
106 * @method isSelected | 108 * @method isSelected |
107 * @param {any} item The item whose selection state should be checked. | 109 * @param {any} item The item whose selection state should be checked. |
108 * @returns Returns true if `item` is selected. | 110 * @returns Returns true if `item` is selected. |
(...skipping 33 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
142 * Toggles the selection state for `item`. | 144 * Toggles the selection state for `item`. |
143 * @method toggle | 145 * @method toggle |
144 * @param {any} item: The item to toggle. | 146 * @param {any} item: The item to toggle. |
145 */ | 147 */ |
146 toggle: function(item) { | 148 toggle: function(item) { |
147 this.setItemSelected(item, !this.isSelected(item)); | 149 this.setItemSelected(item, !this.isSelected(item)); |
148 } | 150 } |
149 }); | 151 }); |
150 </script> | 152 </script> |
151 </polymer-element> | 153 </polymer-element> |
OLD | NEW |