ui/webui/resources/cr_elements/v1_0/cr_collapse/cr_collapse.js

   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  * Example:
  14  *     <style>
  15  *       #collapse-content {
  16  *         padding: 15px;
  17  *       }
  18  *     </style>
  19  *     <button on-click="{{toggle}}">toggle collapse</button>
  20  *     <cr-collapse id="collapse">
  21  *       <div id="collapse-content">
  22  *         Content goes here...
  23  *       </div>
  24  *     </cr-collapse>
  25  *
  26  *     ...
  27  *
  28  *     toggle: function() {
  29  *       this.$.collapse.toggle();
  30  *     }
  31  *
  32  * @element cr-collapse
  33  */
  34 Polymer({
  35   is: 'cr-collapse',
  36
  37   properties: {
  38     /**
  39      * Set opened to `true` to show the collapse element and to `false` to hide
  40      * it.
  41      */
  42     opened: {
  43       type: Boolean,
  44       value: false,
  45       reflectToAttribute: true,
  46       notify: true
  47     },
  48   },
  49
  50   toggle: function() {
  51     this.$.collapse.toggle();
  52   },
  53 });