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

Side by Side Diff: lib/src/paper-radio-group/paper-radio-group.html

Issue 1418513006: update elements and fix some bugs (Closed) Base URL: git@github.com:dart-lang/polymer_elements.git@master
Patch Set: code review updates Created 5 years, 1 month 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
« no previous file with comments | « lib/src/paper-radio-button/test/basic.html ('k') | lib/src/paper-radio-group/test/basic.html » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <!-- 1 <!--
2 @license 2 @license
3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
4 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE.txt 4 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE.txt
5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt 5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
6 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS.txt 6 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS.txt
7 Code distributed by Google as part of the polymer project is also 7 Code distributed by Google as part of the polymer project is also
8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt 8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt
9 --> 9 -->
10 10
11 <link rel="import" href="../polymer/polymer.html"> 11 <link rel="import" href="../polymer/polymer.html">
12 <link rel="import" href="../iron-a11y-keys-behavior/iron-a11y-keys-behavior.html ">
12 <link rel="import" href="../iron-selector/iron-selectable.html"> 13 <link rel="import" href="../iron-selector/iron-selectable.html">
13 <link rel="import" href="../paper-radio-button/paper-radio-button.html"> 14 <link rel="import" href="../paper-radio-button/paper-radio-button.html">
14 <link rel="import" href="../iron-a11y-keys-behavior/iron-a11y-keys-behavior.html ">
15 15
16 <!-- 16 <!--
17 `paper-radio-group` allows user to select only one radio button from a set. 17 Material design: [Radio button](https://www.google.com/design/spec/components/se lection-controls.html#selection-controls-radio-button)
18
19 `paper-radio-group` allows user to select at most one radio button from a set.
18 Checking one radio button that belongs to a radio group unchecks any 20 Checking one radio button that belongs to a radio group unchecks any
19 previously checked radio button within the same group. Use 21 previously checked radio button within the same group. Use
20 `selected` to get or set the selected radio button. 22 `selected` to get or set the selected radio button.
21 23
24 The <paper-radio-buttons> inside the group must have the `name` attribute
25 set.
26
22 Example: 27 Example:
23 28
24 <paper-radio-group selected="small"> 29 <paper-radio-group selected="small">
25 <paper-radio-button name="small">Small</paper-radio-button> 30 <paper-radio-button name="small">Small</paper-radio-button>
26 <paper-radio-button name="medium">Medium</paper-radio-button> 31 <paper-radio-button name="medium">Medium</paper-radio-button>
27 <paper-radio-button name="large">Large</paper-radio-button> 32 <paper-radio-button name="large">Large</paper-radio-button>
28 </paper-radio-group> 33 </paper-radio-group>
29 34
30 See <a href="paper-radio-button.html">paper-radio-button</a> for more 35 Radio-button-groups can be made optional, and allow zero buttons to be selected:
36
37 <paper-radio-group selected="small" allow-empty-selection>
38 <paper-radio-button name="small">Small</paper-radio-button>
39 <paper-radio-button name="medium">Medium</paper-radio-button>
40 <paper-radio-button name="large">Large</paper-radio-button>
41 </paper-radio-group>
42
43 See <a href="paper-radio-button">paper-radio-button</a> for more
31 information about `paper-radio-button`. 44 information about `paper-radio-button`.
32 45
33 @group Paper Elements 46 @group Paper Elements
34 @element paper-radio-group 47 @element paper-radio-group
35 @hero hero.svg 48 @hero hero.svg
36 @demo demo/index.html 49 @demo demo/index.html
37 --> 50 -->
38 51
39 <dom-module name="paper-radio-group"> 52 <dom-module id="paper-radio-group">
40 <style> 53 <style>
41 :host { 54 :host {
42 display: inline-block; 55 display: inline-block;
43 } 56 }
44 57
45 :host ::content > * { 58 :host ::content > * {
46 padding: 12px; 59 padding: 12px;
47 } 60 }
48 </style> 61 </style>
49 62
(...skipping 12 matching lines...) Expand all
62 Polymer.IronSelectableBehavior 75 Polymer.IronSelectableBehavior
63 ], 76 ],
64 77
65 hostAttributes: { 78 hostAttributes: {
66 role: 'radiogroup', 79 role: 'radiogroup',
67 tabindex: 0 80 tabindex: 0
68 }, 81 },
69 82
70 properties: { 83 properties: {
71 /** 84 /**
85 * Fired when the radio group selection changes.
86 *
87 * @event paper-radio-group-changed
88 */
89
90 /**
72 * Overriden from Polymer.IronSelectableBehavior 91 * Overriden from Polymer.IronSelectableBehavior
73 */ 92 */
74 attrForSelected: { 93 attrForSelected: {
75 type: String, 94 type: String,
76 value: 'name' 95 value: 'name'
77 }, 96 },
78 97
79 /** 98 /**
80 * Overriden from Polymer.IronSelectableBehavior 99 * Overriden from Polymer.IronSelectableBehavior
81 */ 100 */
82 selectedAttribute: { 101 selectedAttribute: {
83 type: String, 102 type: String,
84 value: 'checked' 103 value: 'checked'
85 }, 104 },
86 105
87 /** 106 /**
88 * Overriden from Polymer.IronSelectableBehavior 107 * Overriden from Polymer.IronSelectableBehavior
89 */ 108 */
90 selectable: { 109 selectable: {
91 type: String, 110 type: String,
92 value: 'paper-radio-button' 111 value: 'paper-radio-button'
112 },
113
114 /**
115 * If true, radio-buttons can be deselected
116 */
117 allowEmptySelection: {
118 type: Boolean,
119 value: false
93 } 120 }
94 }, 121 },
95 122
96 keyBindings: { 123 keyBindings: {
97 'left up': 'selectPrevious', 124 'left up': 'selectPrevious',
98 'right down': 'selectNext', 125 'right down': 'selectNext',
99 }, 126 },
100 127
101 /** 128 /**
102 * Selects the given value. 129 * Selects the given value.
103 */ 130 */
104 select: function(value) { 131 select: function(value) {
105 if (this.selected) { 132 if (this.selected) {
106 var oldItem = this._valueToItem(this.selected); 133 var oldItem = this._valueToItem(this.selected);
107 134
108 // Do not allow unchecking the selected item.
109 if (this.selected == value) { 135 if (this.selected == value) {
110 oldItem.checked = true; 136 // If deselecting is allowed we'll have to apply an empty selection.
111 return; 137 // Otherwise, we should force the selection to stay and make this
138 // action a no-op.
139 if (this.allowEmptySelection) {
140 value = '';
141 } else {
142 oldItem.checked = true;
143 return;
144 }
112 } 145 }
113 146
114 if (oldItem) 147 if (oldItem)
115 oldItem.checked = false; 148 oldItem.checked = false;
116 } 149 }
117 150
118 Polymer.IronSelectableBehavior.select.apply(this, [value]); 151 Polymer.IronSelectableBehavior.select.apply(this, [value]);
119 this.fire('paper-radio-group-changed'); 152 this.fire('paper-radio-group-changed');
120 }, 153 },
121 154
(...skipping 21 matching lines...) Expand all
143 var newIndex = Number(this._valueToIndex(this.selected)); 176 var newIndex = Number(this._valueToIndex(this.selected));
144 177
145 do { 178 do {
146 newIndex = (newIndex + 1 + length) % length; 179 newIndex = (newIndex + 1 + length) % length;
147 } while (this.items[newIndex].disabled) 180 } while (this.items[newIndex].disabled)
148 181
149 this.select(this._indexToValue(newIndex)); 182 this.select(this._indexToValue(newIndex));
150 }, 183 },
151 }); 184 });
152 </script> 185 </script>
OLDNEW
« no previous file with comments | « lib/src/paper-radio-button/test/basic.html ('k') | lib/src/paper-radio-group/test/basic.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698