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

Side by Side Diff: lib/src/paper-toggle-button/paper-toggle-button.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-tabs/paper-tabs.html ('k') | lib/src/paper-tooltip/paper-tooltip.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="../paper-styles/color.html"> 12 <link rel="import" href="../paper-styles/color.html">
13 <link rel="import" href="../paper-styles/default-theme.html"> 13 <link rel="import" href="../paper-styles/default-theme.html">
14 <link rel="import" href="../paper-ripple/paper-ripple.html"> 14 <link rel="import" href="../paper-ripple/paper-ripple.html">
15 <link rel="import" href="../paper-behaviors/paper-inky-focus-behavior.html"> 15 <link rel="import" href="../paper-behaviors/paper-checked-element-behavior.html" >
16 <link rel="import" href="../iron-checked-element-behavior/iron-checked-element-b ehavior.html">
17 16
18 <!-- 17 <!--
18 Material design: [Switch](https://www.google.com/design/spec/components/selectio n-controls.html#selection-controls-switch)
19
19 `paper-toggle-button` provides a ON/OFF switch that user can toggle the state 20 `paper-toggle-button` provides a ON/OFF switch that user can toggle the state
20 by tapping or by dragging the switch. 21 by tapping or by dragging the switch.
21 22
22 Example: 23 Example:
23 24
24 <paper-toggle-button></paper-toggle-button> 25 <paper-toggle-button></paper-toggle-button>
25 26
26 ### Styling 27 ### Styling
27 28
28 The following custom properties and mixins are available for styling: 29 The following custom properties and mixins are available for styling:
29 30
30 Custom property | Description | Default 31 Custom property | Description | Default
31 ----------------|-------------|---------- 32 ----------------|-------------|----------
32 `--paper-toggle-button-unchecked-bar-color` | Slider color when the input is not checked | `#000000` 33 `--paper-toggle-button-unchecked-bar-color` | Slider color when the input is not checked | `#000000`
33 `--paper-toggle-button-unchecked-button-color` | Button color when the input is not checked | `--paper-grey-50` 34 `--paper-toggle-button-unchecked-button-color` | Button color when the input is not checked | `--paper-grey-50`
34 `--paper-toggle-button-unchecked-ink-color` | Selected/focus ripple color when t he input is not checked | `--dark-primary-color` 35 `--paper-toggle-button-unchecked-ink-color` | Selected/focus ripple color when t he input is not checked | `--dark-primary-color`
35 `--paper-toggle-button-checked-bar-color` | Slider button color when the input i s checked | `--default-primary-color` 36 `--paper-toggle-button-checked-bar-color` | Slider button color when the input i s checked | `--default-primary-color`
36 `--paper-toggle-button-checked-button-color` | Button color when the input is ch ecked | `--default-primary-color` 37 `--paper-toggle-button-checked-button-color` | Button color when the input is ch ecked | `--default-primary-color`
37 `--paper-toggle-button-checked-ink-color` | Selected/focus ripple color when the input is checked | `--default-primary-color` 38 `--paper-toggle-button-checked-ink-color` | Selected/focus ripple color when the input is checked | `--default-primary-color`
38 `--paper-toggle-button-unchecked-bar` | Mixin applied to the slider when the inp ut is not checked | `{}` 39 `--paper-toggle-button-unchecked-bar` | Mixin applied to the slider when the inp ut is not checked | `{}`
39 `--paper-toggle-button-unchecked-button` | Mixin applied to the slider button wh en the input is not checked | `{}` 40 `--paper-toggle-button-unchecked-button` | Mixin applied to the slider button wh en the input is not checked | `{}`
40 `--paper-toggle-button-checked-bar` | Mixin applied to the slider when the input is checked | `{}` 41 `--paper-toggle-button-checked-bar` | Mixin applied to the slider when the input is checked | `{}`
41 `--paper-toggle-button-checked-button` | Mixin applied to the slider button when the input is checked | `{}` 42 `--paper-toggle-button-checked-button` | Mixin applied to the slider button when the input is checked | `{}`
43 `--paper-toggle-button-label-color` | Label color | `--primary-text-color`
42 44
43 @group Paper Elements 45 @group Paper Elements
44 @element paper-toggle-button 46 @element paper-toggle-button
45 @hero hero.svg 47 @hero hero.svg
46 @demo demo/index.html 48 @demo demo/index.html
47 --> 49 -->
48 50
49 <dom-module id="paper-toggle-button"> 51 <dom-module id="paper-toggle-button">
50 <template> 52 <template strip-whitespace>
51 53
52 <style> 54 <style>
53 :host { 55 :host {
54 display: inline-block; 56 display: inline-block;
55 } 57 }
56 58
57 :host([disabled]) { 59 :host([disabled]) {
58 pointer-events: none; 60 pointer-events: none;
59 } 61 }
60 62
61 :host(:focus) { 63 :host(:focus) {
62 outline:none; 64 outline:none;
63 } 65 }
64 66
65 :host .toggle-bar {
66 background-color: var(--paper-toggle-button-unchecked-bar-color, #000000 );
67 @apply(--paper-toggle-button-unchecked-bar);
68 }
69
70 :host .toggle-button {
71 background-color: var(--paper-toggle-button-unchecked-button-color, --pa per-grey-50);
72 @apply(--paper-toggle-button-unchecked-button);
73 }
74
75 :host([checked]) .toggle-bar {
76 background-color: var(--paper-toggle-button-checked-bar-color, --default -primary-color);
77 @apply(--paper-toggle-button-checked-bar);
78 }
79
80 :host([checked]) .toggle-button {
81 background-color: var(--paper-toggle-button-checked-button-color, --defa ult-primary-color);
82 @apply(--paper-toggle-button-checked-button);
83 }
84
85 :host .toggle-ink {
86 color: var(--paper-toggle-button-unchecked-ink-color, --primary-text-col or);
87 }
88
89 :host([checked]) .toggle-ink {
90 color: var(--paper-toggle-button-checked-ink-color, --default-primary-co lor);
91 }
92
93 /* ID selectors should not be overriden by users. */
94
95 #toggleContainer {
96 position: relative;
97 width: 36px;
98 height: 14px;
99 }
100
101 .toggle-bar { 67 .toggle-bar {
102 position: absolute; 68 position: absolute;
103 height: 100%; 69 height: 100%;
104 width: 100%; 70 width: 100%;
105 border-radius: 8px; 71 border-radius: 8px;
106 pointer-events: none; 72 pointer-events: none;
107 opacity: 0.4; 73 opacity: 0.4;
108 transition: background-color linear .08s; 74 transition: background-color linear .08s;
109 } 75 background-color: var(--paper-toggle-button-unchecked-bar-color, #000000 );
110 76 @apply(--paper-toggle-button-unchecked-bar);
111 :host([checked]) .toggle-bar {
112 opacity: 0.5;
113 }
114
115 :host([disabled]) .toggle-bar {
116 background-color: #000;
117 opacity: 0.12;
118 } 77 }
119 78
120 .toggle-button { 79 .toggle-button {
121 position: absolute; 80 position: absolute;
122 top: -3px; 81 top: -3px;
123 height: 20px; 82 height: 20px;
124 width: 20px; 83 width: 20px;
125 border-radius: 50%; 84 border-radius: 50%;
126 box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.6); 85 box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.6);
127 transition: -webkit-transform linear .08s, background-color linear .08s; 86 transition: -webkit-transform linear .08s, background-color linear .08s;
128 transition: transform linear .08s, background-color linear .08s; 87 transition: transform linear .08s, background-color linear .08s;
129 will-change: transform; 88 will-change: transform;
89 background-color: var(--paper-toggle-button-unchecked-button-color, --pa per-grey-50);
90 @apply(--paper-toggle-button-unchecked-button);
130 } 91 }
131 92
132 .toggle-button.dragging { 93 .toggle-button.dragging {
133 -webkit-transition: none; 94 -webkit-transition: none;
134 transition: none; 95 transition: none;
135 } 96 }
136 97
98 :host([checked]:not([disabled])) .toggle-bar {
99 opacity: 0.5;
100 background-color: var(--paper-toggle-button-checked-bar-color, --default -primary-color);
101 @apply(--paper-toggle-button-checked-bar);
102 }
103
104 :host([disabled]) .toggle-bar {
105 background-color: #000;
106 opacity: 0.12;
107 }
108
137 :host([checked]) .toggle-button { 109 :host([checked]) .toggle-button {
138 -webkit-transform: translate(16px, 0); 110 -webkit-transform: translate(16px, 0);
139 transform: translate(16px, 0); 111 transform: translate(16px, 0);
140 } 112 }
141 113
114 :host([checked]:not([disabled])) .toggle-button {
115 background-color: var(--paper-toggle-button-checked-button-color, --defa ult-primary-color);
116 @apply(--paper-toggle-button-checked-button);
117 }
118
142 :host([disabled]) .toggle-button { 119 :host([disabled]) .toggle-button {
143 background-color: #bdbdbd; 120 background-color: #bdbdbd;
144 opacity: 1; 121 opacity: 1;
145 } 122 }
146 123
147 .toggle-ink { 124 .toggle-ink {
148 position: absolute; 125 position: absolute;
149 top: -14px; 126 top: -14px;
150 left: -14px; 127 left: -14px;
151 width: 48px; 128 width: 48px;
152 height: 48px; 129 height: 48px;
153 opacity: 0.5; 130 opacity: 0.5;
154 pointer-events: none; 131 pointer-events: none;
132 color: var(--paper-toggle-button-unchecked-ink-color, --primary-text-col or);
133 }
134
135 :host([checked]) .toggle-ink {
136 color: var(--paper-toggle-button-checked-ink-color, --default-primary-co lor);
137 }
138
139 .toggle-container {
140 display: inline-block;
141 position: relative;
142 width: 36px;
143 height: 14px;
144 }
145
146 .toggle-label {
147 position: relative;
148 top: -2px;
149 display: inline-block;
150 vertical-align: middle;
151 margin-left: 10px;
152 white-space: normal;
153 pointer-events: none;
154 color: var(--paper-toggle-button-label-color, --primary-text-color);
155 } 155 }
156 </style> 156 </style>
157 157
158 <div id="toggleContainer"> 158 <div class="toggle-container">
159 <div id="toggleBar" class="toggle-bar"></div> 159 <div id="toggleBar" class="toggle-bar"></div>
160 <div id="toggleButton" class="toggle-button"> 160 <div id="toggleButton" class="toggle-button"></div>
161 <paper-ripple id="ink" class="toggle-ink circle" recenters></paper-rippl e>
162 </div>
163 </div> 161 </div>
164 162
163 <div class="toggle-label"><content></content></div>
164
165 </template> 165 </template>
166 166
167 <script> 167 <script>
168 Polymer({ 168 Polymer({
169 is: 'paper-toggle-button', 169 is: 'paper-toggle-button',
170 170
171 behaviors: [ 171 behaviors: [
172 Polymer.PaperInkyFocusBehavior, 172 Polymer.PaperCheckedElementBehavior
173 Polymer.IronCheckedElementBehavior
174 ], 173 ],
175 174
176 hostAttributes: { 175 hostAttributes: {
177 role: 'button', 176 role: 'button',
178 'aria-pressed': 'false', 177 'aria-pressed': 'false',
179 tabindex: 0 178 tabindex: 0
180 }, 179 },
181 180
182 properties: { 181 properties: {
183 /** 182 /**
184 * Fired when the checked state changes due to user interaction. 183 * Fired when the checked state changes due to user interaction.
185 * 184 *
186 * @event change 185 * @event change
187 */ 186 */
188 /** 187 /**
189 * Fired when the checked state changes. 188 * Fired when the checked state changes.
190 * 189 *
191 * @event iron-change 190 * @event iron-change
192 */ 191 */
193 }, 192 },
194 193
195 listeners: { 194 listeners: {
196 track: '_ontrack' 195 track: '_ontrack'
197 }, 196 },
198 197
199 ready: function() {
200 this._isReady = true;
201 },
202
203 // button-behavior hook
204 _buttonStateChanged: function() {
205 if (this.disabled) {
206 return;
207 }
208 if (this._isReady) {
209 this.checked = this.active;
210 }
211 },
212
213 _ontrack: function(event) { 198 _ontrack: function(event) {
214 var track = event.detail; 199 var track = event.detail;
215 if (track.state === 'start') { 200 if (track.state === 'start') {
216 this._trackStart(track); 201 this._trackStart(track);
217 } else if (track.state === 'track') { 202 } else if (track.state === 'track') {
218 this._trackMove(track); 203 this._trackMove(track);
219 } else if (track.state === 'end') { 204 } else if (track.state === 'end') {
220 this._trackEnd(track); 205 this._trackEnd(track);
221 } 206 }
222 }, 207 },
(...skipping 12 matching lines...) Expand all
235 var dx = track.dx; 220 var dx = track.dx;
236 this._x = Math.min(this._width, 221 this._x = Math.min(this._width,
237 Math.max(0, this._trackChecked ? this._width + dx : dx)); 222 Math.max(0, this._trackChecked ? this._width + dx : dx));
238 this.translate3d(this._x + 'px', 0, 0, this.$.toggleButton); 223 this.translate3d(this._x + 'px', 0, 0, this.$.toggleButton);
239 this._userActivate(this._x > (this._width / 2)); 224 this._userActivate(this._x > (this._width / 2));
240 }, 225 },
241 226
242 _trackEnd: function(track) { 227 _trackEnd: function(track) {
243 this.$.toggleButton.classList.remove('dragging'); 228 this.$.toggleButton.classList.remove('dragging');
244 this.transform('', this.$.toggleButton); 229 this.transform('', this.$.toggleButton);
230 },
231
232 // customize the element's ripple
233 _createRipple: function() {
234 this._rippleContainer = this.$.toggleButton;
235 var ripple = Polymer.PaperRippleBehavior._createRipple();
236 ripple.id = 'ink';
237 ripple.setAttribute('recenters', '');
238 ripple.classList.add('circle', 'toggle-ink');
239 return ripple;
245 } 240 }
246 241
247 }); 242 });
248 </script> 243 </script>
249 </dom-module> 244 </dom-module>
OLDNEW
« no previous file with comments | « lib/src/paper-tabs/paper-tabs.html ('k') | lib/src/paper-tooltip/paper-tooltip.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698