OLD | NEW |
| (Empty) |
1 <!-- | |
2 @license | |
3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. | |
4 This code may only be used under the BSD style license found at http://polymer.g
ithub.io/LICENSE.txt | |
5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt | |
6 The complete set of contributors may be found at http://polymer.github.io/CONTRI
BUTORS.txt | |
7 Code distributed by Google as part of the polymer project is also | |
8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt | |
9 --> | |
10 | |
11 <link rel="import" href="../polymer/polymer.html"> | |
12 | |
13 <!-- | |
14 `iron-collapse` creates a collapsible block of content. By default, the content | |
15 will be collapsed. Use `opened` or `toggle()` to show/hide the content. | |
16 | |
17 <button on-click="{{toggle}}">toggle collapse</button> | |
18 | |
19 <iron-collapse id="collapse"> | |
20 <div>Content goes here...</div> | |
21 </iron-collapse> | |
22 | |
23 ... | |
24 | |
25 toggle: function() { | |
26 this.$.collapse.toggle(); | |
27 } | |
28 | |
29 `iron-collapse` adjusts the height/width of the collapsible element to show/hide | |
30 the content. So avoid putting padding/margin/border on the collapsible directly
, | |
31 and instead put a div inside and style that. | |
32 | |
33 <style> | |
34 .collapse-content { | |
35 padding: 15px; | |
36 border: 1px solid #dedede; | |
37 } | |
38 </style> | |
39 | |
40 <iron-collapse> | |
41 <div class="collapse-content"> | |
42 <div>Content goes here...</div> | |
43 </div> | |
44 </iron-collapse> | |
45 | |
46 @group Iron Elements | |
47 @hero hero.svg | |
48 @demo demo/index.html | |
49 @element iron-collapse | |
50 --> | |
51 | |
52 <dom-module id="iron-collapse"> | |
53 | |
54 <style> | |
55 | |
56 :host { | |
57 display: block; | |
58 transition-duration: 300ms; | |
59 } | |
60 | |
61 :host(.iron-collapse-closed) { | |
62 display: none; | |
63 } | |
64 | |
65 :host(:not(.iron-collapse-opened)) { | |
66 overflow: hidden; | |
67 } | |
68 | |
69 </style> | |
70 | |
71 <template> | |
72 | |
73 <content></content> | |
74 | |
75 </template> | |
76 | |
77 </dom-module> | |
78 | |
79 <script> | |
80 | |
81 Polymer({ | |
82 | |
83 is: 'iron-collapse', | |
84 | |
85 properties: { | |
86 | |
87 /** | |
88 * If true, the orientation is horizontal; otherwise is vertical. | |
89 * | |
90 * @attribute horizontal | |
91 */ | |
92 horizontal: { | |
93 type: Boolean, | |
94 value: false, | |
95 observer: '_horizontalChanged' | |
96 }, | |
97 | |
98 /** | |
99 * Set opened to true to show the collapse element and to false to hide it
. | |
100 * | |
101 * @attribute opened | |
102 */ | |
103 opened: { | |
104 type: Boolean, | |
105 value: false, | |
106 notify: true, | |
107 observer: '_openedChanged' | |
108 } | |
109 | |
110 }, | |
111 | |
112 hostAttributes: { | |
113 role: 'group', | |
114 'aria-expanded': 'false' | |
115 }, | |
116 | |
117 listeners: { | |
118 transitionend: '_transitionEnd' | |
119 }, | |
120 | |
121 ready: function() { | |
122 // Avoid transition at the beginning e.g. page loads and enable | |
123 // transitions only after the element is rendered and ready. | |
124 this._enableTransition = true; | |
125 }, | |
126 | |
127 /** | |
128 * Toggle the opened state. | |
129 * | |
130 * @method toggle | |
131 */ | |
132 toggle: function() { | |
133 this.opened = !this.opened; | |
134 }, | |
135 | |
136 show: function() { | |
137 this.toggleClass('iron-collapse-closed', false); | |
138 this.updateSize('auto', false); | |
139 var s = this._calcSize(); | |
140 this.updateSize('0px', false); | |
141 // force layout to ensure transition will go | |
142 this.offsetHeight; | |
143 this.updateSize(s, true); | |
144 }, | |
145 | |
146 hide: function() { | |
147 this.toggleClass('iron-collapse-opened', false); | |
148 this.updateSize(this._calcSize(), false); | |
149 // force layout to ensure transition will go | |
150 this.offsetHeight; | |
151 this.updateSize('0px', true); | |
152 }, | |
153 | |
154 updateSize: function(size, animated) { | |
155 this.enableTransition(animated); | |
156 var s = this.style; | |
157 var nochange = s[this.dimension] === size; | |
158 s[this.dimension] = size; | |
159 if (animated && nochange) { | |
160 this._transitionEnd(); | |
161 } | |
162 }, | |
163 | |
164 enableTransition: function(enabled) { | |
165 this.style.transitionDuration = (enabled && this._enableTransition) ? '' :
'0s'; | |
166 }, | |
167 | |
168 _horizontalChanged: function() { | |
169 this.dimension = this.horizontal ? 'width' : 'height'; | |
170 this.style.transitionProperty = this.dimension; | |
171 }, | |
172 | |
173 _openedChanged: function() { | |
174 this[this.opened ? 'show' : 'hide'](); | |
175 this.setAttribute('aria-expanded', this.opened ? 'true' : 'false'); | |
176 | |
177 }, | |
178 | |
179 _transitionEnd: function() { | |
180 if (this.opened) { | |
181 this.updateSize('auto', false); | |
182 } | |
183 this.toggleClass('iron-collapse-closed', !this.opened); | |
184 this.toggleClass('iron-collapse-opened', this.opened); | |
185 this.enableTransition(false); | |
186 }, | |
187 | |
188 _calcSize: function() { | |
189 return this.getBoundingClientRect()[this.dimension] + 'px'; | |
190 }, | |
191 | |
192 | |
193 }); | |
194 | |
195 </script> | |
OLD | NEW |