| 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 * When a `cr-collapse` is toggled, its `opened` field changes immediately, but | |
| 14 * its show/hide animation finishes some time afterward. To determine if the | |
| 15 * element is actually shown in the UI, check for the `cr-collapse-closed` CSS | |
| 16 * class. | |
| 17 * | |
| 18 * Example: | |
| 19 * <style> | |
| 20 * #collapse-content { | |
| 21 * padding: 15px; | |
| 22 * } | |
| 23 * </style> | |
| 24 * <button on-click="{{toggle}}">toggle collapse</button> | |
| 25 * <cr-collapse id="collapse"> | |
| 26 * <div id="collapse-content"> | |
| 27 * Content goes here... | |
| 28 * </div> | |
| 29 * </cr-collapse> | |
| 30 * | |
| 31 * ... | |
| 32 * | |
| 33 * toggle: function() { | |
| 34 * this.$.collapse.toggle(); | |
| 35 * } | |
| 36 * | |
| 37 * @element cr-collapse | |
| 38 */ | |
| 39 Polymer({ | |
| 40 publish: { | |
| 41 /** | |
| 42 * Set opened to `true` to show the collapse element and to `false` to hide | |
| 43 * it. | |
| 44 * | |
| 45 * @attribute opened | |
| 46 * @type boolean | |
| 47 * @default false | |
| 48 */ | |
| 49 opened: {value: false, reflect: true}, | |
| 50 }, | |
| 51 | |
| 52 handleResize_: function() { | |
| 53 this.classList.toggle('cr-collapse-closed', !this.opened); | |
| 54 }, | |
| 55 | |
| 56 toggle: function() { | |
| 57 this.$.collapse.toggle(); | |
| 58 }, | |
| 59 | |
| 60 ready: function() { | |
| 61 this.$.collapse.addEventListener( | |
| 62 'core-resize', this.handleResize_.bind(this)); | |
| 63 this.handleResize_(); | |
| 64 }, | |
| 65 }); | |
| OLD | NEW |