OLD | NEW |
---|---|
1 // Copyright 2015 The Chromium Authors. All rights reserved. | 1 // Copyright 2015 The Chromium Authors. All rights reserved. |
2 // Use of this source code is governed by a BSD-style license that can be | 2 // Use of this source code is governed by a BSD-style license that can be |
3 // found in the LICENSE file. | 3 // found in the LICENSE file. |
4 | 4 |
5 /** | 5 /** |
6 * @fileoverview | 6 * @fileoverview |
7 * 'settings-section' shows a paper material themed section with a header | 7 * 'settings-section' shows a paper material themed section with a header |
8 * which shows its page title. | 8 * which shows its page title. |
9 * | 9 * |
10 * The section name must match the name specified in settings_router.js. | |
11 * Otherwise, settings-section will not expand and contract correctly. | |
12 * | |
10 * Example: | 13 * Example: |
11 * | 14 * |
12 * <settings-section page-title="[[pageTitle]]"> | 15 * <settings-section page-title="[[pageTitle]]" section="privacy"> |
13 * <!-- Insert your section controls here --> | 16 * <!-- Insert your section controls here --> |
14 * </settings-section> | 17 * </settings-section> |
15 * | 18 * |
16 * @group Chrome Settings Elements | 19 * @group Chrome Settings Elements |
17 * @element settings-section | 20 * @element settings-section |
18 */ | 21 */ |
19 Polymer({ | 22 Polymer({ |
20 is: 'settings-section', | 23 is: 'settings-section', |
21 | 24 |
22 behaviors: [ | 25 behaviors: [ |
23 Polymer.NeonAnimationRunnerBehavior, | 26 Polymer.NeonAnimationRunnerBehavior, |
24 ], | 27 ], |
25 | 28 |
26 properties: { | 29 properties: { |
27 /** | 30 /** |
28 * The current active route. | 31 * The current active route. |
29 */ | 32 */ |
30 currentRoute: { | 33 currentRoute: { |
31 type: Object, | 34 type: Object, |
32 observer: 'currentRouteChanged_', | 35 observer: 'currentRouteChanged_', |
33 }, | 36 }, |
34 | 37 |
35 /** | 38 /** |
36 * The section is expanded to a full-page view when this property matches | 39 * The section is expanded to a full-page view when this property matches |
37 * currentRoute.section. | 40 * currentRoute.section. |
38 */ | 41 */ |
michaelpg
2015/12/10 00:23:45
likewise
tommycli
2015/12/10 01:59:51
Done.
| |
39 section: { | 42 section: { |
40 type: String, | 43 type: String, |
41 }, | 44 }, |
42 | 45 |
43 /** | 46 /** |
44 * Title for the page header and navigation menu. | 47 * Title for the page header and navigation menu. |
45 */ | 48 */ |
46 pageTitle: String, | 49 pageTitle: String, |
47 | 50 |
48 animationConfig: { | 51 animationConfig: { |
(...skipping 128 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
177 {'top': oldRect.top + 'px', 'height': oldRect.height + 'px'}, | 180 {'top': oldRect.top + 'px', 'height': oldRect.height + 'px'}, |
178 {'top': newRect.top + 'px', 'height': newRect.height + 'px'}, | 181 {'top': newRect.top + 'px', 'height': newRect.height + 'px'}, |
179 ], this.timingFromConfig(config)); | 182 ], this.timingFromConfig(config)); |
180 return this._effect; | 183 return this._effect; |
181 }, | 184 }, |
182 | 185 |
183 complete: function(config) { | 186 complete: function(config) { |
184 config.node.classList.remove('neon-animating'); | 187 config.node.classList.remove('neon-animating'); |
185 } | 188 } |
186 }); | 189 }); |
OLD | NEW |