| 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 |