third_party/polymer/components-chromium/core-collapse/core-collapse.html

   1 <!--
   2 Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
   3 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
   4 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
   5 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
   6 Code distributed by Google as part of the polymer project is also
   7 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
   8 --><!--
   9 `core-collapse` creates a collapsible block of content.  By default, the content
  10 will be collapsed.  Use `opened` or `toggle()` to show/hide the content.
  11
  12     <button on-click="{{toggle}}">toggle collapse</button>
  13
  14     <core-collapse id="collapse">
  15       Content goes here...
  16     </core-collapse>
  17
  18     ...
  19
  20     toggle: function() {
  21       this.$.collapse.toggle();
  22     }
  23
  24 `core-collapse` adjusts the height/width of the collapsible element to show/hide
  25 the content.  So avoid putting padding/margin/border on the collapsible directly,
  26 and instead put a div inside and style that.
  27
  28     <style>
  29       .collapse-content {
  30         padding: 15px;
  31         border: 1px solid #dedede;
  32       }
  33     </style>
  34
  35     <core-collapse>
  36       <div class="collapse-content">
  37         Content goes here...
  38       </div>
  39     </core-collapse>
  40
  41 @group Polymer Core Elements
  42 @element core-collapse
  43 --><html><head><link rel="import" href="../polymer/polymer.html">
  44
  45 <link rel="stylesheet" href="core-collapse.css" shim-shadowdom="">
  46
  47 </head><body><polymer-element name="core-collapse" attributes="target horizontal opened duration fixedSize allowOverflow" assetpath="">
  48 <template>
  49
  50   <content></content>
  51
  52 </template>
  53
  54 </polymer-element>
  55 <script charset="utf-8" src="core-collapse-extracted.js"></script></body></html>