third_party/polymer/v1_0/components-chromium/iron-collapse/iron-collapse.html

   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.github.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/CONTRIBUTORS.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/PATENTS.txt
   9 --><html><head><link rel="import" href="../polymer/polymer.html">
  10
  11 <!--
  12 `iron-collapse` creates a collapsible block of content.  By default, the content
  13 will be collapsed.  Use `opened` or `toggle()` to show/hide the content.
  14
  15     <button on-click="{{toggle}}">toggle collapse</button>
  16
  17     <iron-collapse id="collapse">
  18       <div>Content goes here...</div>
  19     </iron-collapse>
  20
  21     ...
  22
  23     toggle: function() {
  24       this.$.collapse.toggle();
  25     }
  26
  27 `iron-collapse` adjusts the height/width of the collapsible element to show/hide
  28 the content.  So avoid putting padding/margin/border on the collapsible directly,
  29 and instead put a div inside and style that.
  30
  31     <style>
  32       .collapse-content {
  33         padding: 15px;
  34         border: 1px solid #dedede;
  35       }
  36     </style>
  37
  38     <iron-collapse>
  39       <div class="collapse-content">
  40         <div>Content goes here...</div>
  41       </div>
  42     </iron-collapse>
  43
  44 @group Iron Elements
  45 @hero hero.svg
  46 @demo demo/index.html
  47 @element iron-collapse
  48 -->
  49
  50 </head><body><dom-module id="iron-collapse">
  51
  52   <style>
  53
  54     :host {
  55       display: block;
  56       transition-duration: 300ms;
  57     }
  58
  59     :host(.iron-collapse-closed) {
  60       display: none;
  61     }
  62
  63     :host(:not(.iron-collapse-opened)) {
  64       overflow: hidden;
  65     }
  66
  67   </style>
  68
  69   <template>
  70
  71     <content></content>
  72
  73   </template>
  74
  75 </dom-module>
  76
  77 <script src="iron-collapse-extracted.js"></script></body></html>