OLD | NEW |
| (Empty) |
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 | |
3 // found in the LICENSE file. | |
4 | |
5 /** | |
6 * @fileoverview | |
7 * `cr-collapse` creates a collapsible block of content. By default, the content | |
8 * will be collapsed. Use `opened` or `toggle()` to show/hide the content. | |
9 * `cr-collapse` adjusts the height/width of the collapsible element to | |
10 * show/hide the content. So avoid putting padding/margin/border on the | |
11 * collapsible directly, and instead put a `div` inside and style that. | |
12 * | |
13 * Example: | |
14 * <style> | |
15 * #collapse-content { | |
16 * padding: 15px; | |
17 * } | |
18 * </style> | |
19 * <button on-click="{{toggle}}">toggle collapse</button> | |
20 * <cr-collapse id="collapse"> | |
21 * <div id="collapse-content"> | |
22 * Content goes here... | |
23 * </div> | |
24 * </cr-collapse> | |
25 * | |
26 * ... | |
27 * | |
28 * toggle: function() { | |
29 * this.$.collapse.toggle(); | |
30 * } | |
31 * | |
32 * @element cr-collapse | |
33 */ | |
34 Polymer({ | |
35 is: 'cr-collapse', | |
36 | |
37 properties: { | |
38 /** | |
39 * Set opened to `true` to show the collapse element and to `false` to hide | |
40 * it. | |
41 */ | |
42 opened: { | |
43 type: Boolean, | |
44 value: false, | |
45 reflectToAttribute: true, | |
46 notify: true | |
47 }, | |
48 }, | |
49 | |
50 toggle: function() { | |
51 this.$.collapse.toggle(); | |
52 }, | |
53 }); | |
OLD | NEW |