Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(345)

Side by Side Diff: third_party/polymer/v0_8/components-chromium/iron-collapse/iron-collapse.html

Issue 1155683008: Rename polymer and cr_elements v0_8 to v1_0 (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@v1
Patch Set: fix a merge mistake Created 5 years, 6 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
(Empty)
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.g ithub.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/CONTRI BUTORS.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/PATEN TS.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>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698