| OLD | NEW |
|---|
| 1 <!-- | 1 <!-- |
| 2 @license | 2 @license |
| 3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. | 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 | 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 | 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 | 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 | 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 | 8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt |
| 9 --><html><head><link rel="import" href="../polymer/polymer.html"> | 9 --><html><head><link rel="import" href="../polymer/polymer.html"> |
| 10 <link rel="import" href="../iron-resizable-behavior/iron-resizable-behavior.html
"> | 10 <link rel="import" href="../iron-resizable-behavior/iron-resizable-behavior.html
"> |
| 11 | 11 |
| 12 <!-- | 12 <!-- |
| 13 `iron-collapse` creates a collapsible block of content. By default, the content | 13 `iron-collapse` creates a collapsible block of content. By default, the content |
| 14 will be collapsed. Use `opened` or `toggle()` to show/hide the content. | 14 will be collapsed. Use `opened` or `toggle()` to show/hide the content. |
| 15 | 15 |
| 16 <button on-click="toggle">toggle collapse</button> | 16 <button on-click="toggle">toggle collapse</button> |
| 17 | 17 |
| 18 <iron-collapse id="collapse"> | 18 <iron-collapse id="collapse"> |
| 19 <div>Content goes here...</div> | 19 <div>Content goes here...</div> |
| 20 </iron-collapse> | 20 </iron-collapse> |
| 21 | 21 |
| 22 ... | 22 ... |
| 23 | 23 |
| 24 toggle: function() { | 24 toggle: function() { |
| 25 this.$.collapse.toggle(); | 25 this.$.collapse.toggle(); |
| 26 } | 26 } |
| 27 | 27 |
| 28 `iron-collapse` adjusts the height/width of the collapsible element to show/hide | 28 `iron-collapse` adjusts the max-height/max-width of the collapsible element to s
how/hide |
| 29 the content. So avoid putting padding/margin/border on the collapsible directly
, | 29 the content. So avoid putting padding/margin/border on the collapsible directly
, |
| 30 and instead put a div inside and style that. | 30 and instead put a div inside and style that. |
| 31 | 31 |
| 32 <style> | 32 <style> |
| 33 .collapse-content { | 33 .collapse-content { |
| 34 padding: 15px; | 34 padding: 15px; |
| 35 border: 1px solid #dedede; | 35 border: 1px solid #dedede; |
| 36 } | 36 } |
| 37 </style> | 37 </style> |
| 38 | 38 |
| 39 <iron-collapse> | 39 <iron-collapse> |
| 40 <div class="collapse-content"> | 40 <div class="collapse-content"> |
| 41 <div>Content goes here...</div> | 41 <div>Content goes here...</div> |
| 42 </div> | 42 </div> |
| 43 </iron-collapse> | 43 </iron-collapse> |
| 44 | 44 |
| 45 @group Iron Elements | 45 @group Iron Elements |
| 46 @hero hero.svg | 46 @hero hero.svg |
| 47 @demo demo/index.html | 47 @demo demo/index.html |
| 48 @element iron-collapse | 48 @element iron-collapse |
| 49 --> | 49 --> |
| 50 | 50 |
| 51 </head><body><dom-module id="iron-collapse"> | 51 </head><body><dom-module id="iron-collapse"> |
| 52 | 52 |
| 53 <style> | 53 <template> |
| 54 | 54 |
| 55 :host { | 55 <style> |
| 56 display: block; | 56 :host { |
| 57 transition-duration: 300ms; | 57 display: block; |
| 58 overflow: visible; | 58 transition-duration: 300ms; |
| 59 } | 59 overflow: visible; |
| 60 } |
| 60 | 61 |
| 61 :host(.iron-collapse-closed) { | 62 :host(.iron-collapse-closed) { |
| 62 display: none; | 63 display: none; |
| 63 } | 64 } |
| 64 | 65 |
| 65 :host(:not(.iron-collapse-opened)) { | 66 :host(:not(.iron-collapse-opened)) { |
| 66 overflow: hidden; | 67 overflow: hidden; |
| 67 } | 68 } |
| 68 | 69 </style> |
| 69 </style> | |
| 70 | |
| 71 <template> | |
| 72 | 70 |
| 73 <content></content> | 71 <content></content> |
| 74 | 72 |
| 75 </template> | 73 </template> |
| 76 | 74 |
| 77 </dom-module> | 75 </dom-module> |
| 78 | 76 |
| 79 <script src="iron-collapse-extracted.js"></script></body></html> | 77 <script src="iron-collapse-extracted.js"></script></body></html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2074813002:
Roll Polymer (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master