Blame view

bower_components/iron-collapse/README.md 814 Bytes
c5169e0e   Renato De Donato   a new hope
1
  # iron-collapse
73bcce88   luigser   COMPONENTS
2
3
4
5
  
  `iron-collapse` creates a collapsible block of content.  By default, the content
  will be collapsed.  Use `opened` or `toggle()` to show/hide the content.
  
c5169e0e   Renato De Donato   a new hope
6
7
  ```html
  <button on-click="toggle">toggle collapse</button>
73bcce88   luigser   COMPONENTS
8
  
c5169e0e   Renato De Donato   a new hope
9
10
11
12
  <iron-collapse id="collapse">
    <div>Content goes here...</div>
  </iron-collapse>
  ```
73bcce88   luigser   COMPONENTS
13
  
c5169e0e   Renato De Donato   a new hope
14
15
16
17
18
  ```javascript
  toggle: function() {
    this.$.collapse.toggle();
  }
  ```
73bcce88   luigser   COMPONENTS
19
20
21
22
23
  
  `iron-collapse` adjusts the height/width of the collapsible element to show/hide
  the content.  So avoid putting padding/margin/border on the collapsible directly,
  and instead put a div inside and style that.
  
c5169e0e   Renato De Donato   a new hope
24
25
26
27
28
29
30
31
32
33
34
35
36
37
  ```html
  <style>
    .collapse-content {
      padding: 15px;
      border: 1px solid #dedede;
    }
  </style>
  
  <iron-collapse>
    <div class="collapse-content">
      <div>Content goes here...</div>
    </div>
  </iron-collapse>
  ```