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

Side by Side Diff: third_party/polymer/v0_8/components/paper-toggle-button/paper-toggle-button.html

Issue 1124053009: Pull latest Polymer elements (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Created 5 years, 7 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
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="../paper-ripple/paper-ripple.html"> 12 <link rel="import" href="../paper-ripple/paper-ripple.html">
13 <link rel="import" href="../paper-behaviors/paper-button-behavior.html"> 13 <link rel="import" href="../paper-behaviors/paper-radio-button-behavior.html">
14 14
15 <!-- 15 <!--
16 `paper-toggle-button` provides a ON/OFF switch that user can toggle the state 16 `paper-toggle-button` provides a ON/OFF switch that user can toggle the state
17 by tapping or by dragging the swtich. 17 by tapping or by dragging the swtich.
18 18
19 Example: 19 Example:
20 20
21 <paper-toggle-button></paper-toggle-button> 21 <paper-toggle-button></paper-toggle-button>
22 22
23 Styling toggle-button: 23 Styling toggle-button:
(...skipping 36 matching lines...) Expand 10 before | Expand all | Expand 10 after
60 </div> 60 </div>
61 </div> 61 </div>
62 62
63 </template> 63 </template>
64 64
65 <script> 65 <script>
66 Polymer({ 66 Polymer({
67 is: 'paper-toggle-button', 67 is: 'paper-toggle-button',
68 68
69 behaviors: [ 69 behaviors: [
70 Polymer.PaperButtonBehavior 70 Polymer.PaperRadioButtonBehavior
71 ], 71 ],
72 72
73 // The custom properties shim is currently an opt-in feature. 73 // The custom properties shim is currently an opt-in feature.
74 enableCustomStyleProperties: true, 74 enableCustomStyleProperties: true,
75 75
76 hostAttributes: { 76 hostAttributes: {
77 role: 'button', 77 role: 'button',
78 'aria-pressed': 'false', 78 'aria-pressed': 'false',
79 tabindex: 0 79 tabindex: 0
80 }, 80 },
(...skipping 13 matching lines...) Expand all
94 * Gets or sets the state, `true` is checked and `false` is unchecked. 94 * Gets or sets the state, `true` is checked and `false` is unchecked.
95 * 95 *
96 * @attribute checked 96 * @attribute checked
97 * @type boolean 97 * @type boolean
98 * @default false 98 * @default false
99 */ 99 */
100 checked: { 100 checked: {
101 type: Boolean, 101 type: Boolean,
102 value: false, 102 value: false,
103 reflectToAttribute: true, 103 reflectToAttribute: true,
104 notify: true,
104 observer: '_checkedChanged' 105 observer: '_checkedChanged'
106 },
107
108 /**
109 * If true, the button toggles the active state with each tap or press
110 * of the spacebar.
111 *
112 * @attribute toggles
113 * @type boolean
114 * @default true
115 */
116 toggles: {
117 type: Boolean,
118 value: true,
119 reflectToAttribute: true
105 } 120 }
106 }, 121 },
107 122
108 listeners: { 123 listeners: {
109 // TODO(sjmiles): tracking feature disabled until we can control 124 // TODO(sjmiles): tracking feature disabled until we can control
110 // track/tap interaction with confidence 125 // track/tap interaction with confidence
111 //xtrack: '_ontrack' 126 //xtrack: '_ontrack'
112 }, 127 },
113 128
114 ready: function() {
115 this.toggles = true;
116 },
117
118 // button-behavior hook 129 // button-behavior hook
119 _buttonStateChanged: function() { 130 _buttonStateChanged: function() {
120 this.checked = this.active; 131 this.checked = this.active;
121 }, 132 },
122 133
123 _checkedChanged: function(checked) { 134 _checkedChanged: function(checked) {
124 this.active = this.checked; 135 this.active = this.checked;
125 this.fire('iron-change'); 136 this.fire('iron-change');
126 }, 137 },
127 138
(...skipping 25 matching lines...) Expand all
153 _trackEnd: function(track) { 164 _trackEnd: function(track) {
154 this.$.toggleButton.classList.remove('dragging'); 165 this.$.toggleButton.classList.remove('dragging');
155 this.transform(this, ''); 166 this.transform(this, '');
156 this._userActivate(Math.abs(this._x) > this._width / 2); 167 this._userActivate(Math.abs(this._x) > this._width / 2);
157 } 168 }
158 169
159 }); 170 });
160 </script> 171 </script>
161 172
162 </dom-module> 173 </dom-module>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698