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 |