| OLD | NEW |
|---|
| (Empty) | |
| 1 <!-- |
| 2 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. |
| 3 This code may only be used under the BSD style license found at http://polymer.g
ithub.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/CONTRI
BUTORS.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/PATEN
TS.txt |
| 8 --><html><head><link rel="import" href="../polymer/polymer.html"> |
| 9 <link rel="import" href="../iron-flex-layout/iron-flex-layout.html"> |
| 10 |
| 11 <!-- |
| 12 `paper-header-panel` contains a header section and a content panel section. |
| 13 |
| 14 __Important:__ The `paper-header-panel` will not display if its parent does not
have a height. |
| 15 |
| 16 Using layout classes, you can make the `paper-header-panel` fill the screen |
| 17 |
| 18 <body class="fullbleed layout vertical"> |
| 19 <paper-header-panel class="flex"> |
| 20 <paper-toolbar> |
| 21 <div>Hello World!</div> |
| 22 </paper-toolbar> |
| 23 </paper-header-panel> |
| 24 </body> |
| 25 |
| 26 Special support is provided for scrolling modes when one uses a paper-toolbar or
equivalent for the |
| 27 header section. |
| 28 |
| 29 Example: |
| 30 |
| 31 <paper-header-panel> |
| 32 <paper-toolbar>Header</paper-toolbar> |
| 33 <div>Content goes here...</div> |
| 34 </paper-header-panel> |
| 35 |
| 36 If you want to use other than `paper-toolbar` for the header, add `paper-header`
class to that |
| 37 element. |
| 38 |
| 39 Example: |
| 40 |
| 41 <paper-header-panel> |
| 42 <div class="paper-header">Header</div> |
| 43 <div>Content goes here...</div> |
| 44 </paper-header-panel> |
| 45 |
| 46 To have the content fit to the main area, use the `fit` class. |
| 47 |
| 48 <paper-header-panel> |
| 49 <div class="paper-header">standard</div> |
| 50 <div class="fit">content fits 100% below the header</div> |
| 51 </paper-header-panel> |
| 52 |
| 53 Modes |
| 54 |
| 55 Controls header and scrolling behavior. Options are `standard`, `seamed`, `water
fall`, `waterfall-tall`, `scroll` and |
| 56 `cover`. Default is `standard`. |
| 57 |
| 58 Mode | Description |
| 59 ----------------|------------- |
| 60 `standard` | The header is a step above the panel. The header will consume the p
anel at the point of entry, preventing it from passing through to the opposite s
ide. |
| 61 `seamed` | The header is presented as seamed with the panel. |
| 62 `waterfall` | Similar to standard mode, but header is initially presented as sea
med with panel, but then separates to form the step. |
| 63 `waterfall-tall` | The header is initially taller (`tall` class is added to the
header). As the user scrolls, the header separates (forming an edge) while conde
nsing (`tall` class is removed from the header). |
| 64 `scroll` | The header keeps its seam with the panel, and is pushed off screen. |
| 65 `cover` | The panel covers the whole `paper-header-panel` including the header.
This allows user to style the panel in such a way that the panel is partially co
vering the header. |
| 66 |
| 67 Example: |
| 68 |
| 69 <paper-header-panel mode="waterfall"> |
| 70 <div class="paper-header">standard</div> |
| 71 <div class="content fit">content fits 100% below the header</div> |
| 72 </paper-header-panel> |
| 73 |
| 74 |
| 75 Styling header panel: |
| 76 |
| 77 To change the shadow that shows up underneath the header: |
| 78 |
| 79 paper-header-panel { |
| 80 --paper-header-panel-shadow: { |
| 81 height: 6px; |
| 82 bottom: -6px; |
| 83 box-shadow: inset 0px 5px 6px -3px rgba(0, 0, 0, 0.4); |
| 84 }; |
| 85 } |
| 86 |
| 87 To change the panel container in different modes: |
| 88 |
| 89 paper-slider { |
| 90 --paper-header-panel-standard-container: { |
| 91 border: 1px solid gray; |
| 92 }; |
| 93 |
| 94 --paper-header-panel-cover-container: { |
| 95 border: 1px solid gray; |
| 96 }; |
| 97 |
| 98 --paper-header-panel-waterfall-container: { |
| 99 border: 1px solid gray; |
| 100 }; |
| 101 |
| 102 --paper-header-panel-waterfall-tall-container: { |
| 103 border: 1px solid gray; |
| 104 }; |
| 105 } |
| 106 |
| 107 @group Paper Elements |
| 108 @element paper-header-panel |
| 109 @demo demo/index.html |
| 110 @hero hero.svg |
| 111 --> |
| 112 |
| 113 </head><body><dom-module id="paper-header-panel"> |
| 114 |
| 115 <style> |
| 116 :host { |
| 117 @apply(--layout); |
| 118 @apply(--layout-vertical); |
| 119 |
| 120 display: block; |
| 121 position: relative; |
| 122 height: 100%; |
| 123 |
| 124 /* Create a stack context, we will need it for the shadow*/ |
| 125 z-index: 0; |
| 126 } |
| 127 |
| 128 #mainContainer { |
| 129 @apply(--layout-flex); |
| 130 |
| 131 position: relative; |
| 132 overflow-y: auto; |
| 133 overflow-x: hidden; |
| 134 -webkit-overflow-scrolling: touch; |
| 135 flex-basis: 0.0001px; |
| 136 } |
| 137 |
| 138 /* |
| 139 * mode: scroll |
| 140 */ |
| 141 :host([mode=scroll]) #mainContainer { |
| 142 @apply(--paper-header-panel-scroll-container); |
| 143 overflow: visible; |
| 144 } |
| 145 |
| 146 :host([mode=scroll]) { |
| 147 overflow-y: auto; |
| 148 overflow-x: hidden; |
| 149 -webkit-overflow-scrolling: touch; |
| 150 } |
| 151 |
| 152 /* |
| 153 * mode: cover |
| 154 */ |
| 155 :host([mode=cover]) #mainContainer { |
| 156 @apply(--paper-header-panel-cover-container); |
| 157 position: absolute; |
| 158 top: 0; |
| 159 right: 0; |
| 160 bottom: 0; |
| 161 left: 0; |
| 162 } |
| 163 |
| 164 /* |
| 165 * mode: standard |
| 166 */ |
| 167 :host([mode=standard]) #mainContainer { |
| 168 @apply(--paper-header-panel-standard-container); |
| 169 } |
| 170 |
| 171 /* |
| 172 * mode: waterfall |
| 173 */ |
| 174 :host([mode=waterfall]) #mainContainer { |
| 175 @apply(--paper-header-panel-waterfall-container); |
| 176 } |
| 177 |
| 178 /* |
| 179 * mode: waterfall-tall |
| 180 */ |
| 181 :host([mode=waterfall-tall]) #mainContainer { |
| 182 @apply(--paper-header-panel-waterfall-tall-container); |
| 183 } |
| 184 |
| 185 :host ::content paper-toolbar, |
| 186 :host ::content .paper-header { |
| 187 position: relative; |
| 188 overflow: visible !important; |
| 189 } |
| 190 |
| 191 :host ::content paper-toolbar:after, |
| 192 :host ::content .paper-header:after { |
| 193 @apply(--paper-header-panel-shadow); |
| 194 |
| 195 -webkit-transition: opacity 0.5s, -webkit-transform 0.5s; |
| 196 transition: opacity 0.5s, transform 0.5s; |
| 197 |
| 198 opacity: 0; |
| 199 content: ""; |
| 200 |
| 201 width: 100%; |
| 202 position: absolute; |
| 203 left: 0px; |
| 204 right: 0px; |
| 205 z-index: 1; |
| 206 |
| 207 -webkit-transform: scale3d(1, 0, 1); |
| 208 -webkit-transform-origin: 0% 0%; |
| 209 |
| 210 transform: scale3d(1, 0, 1); |
| 211 transform-origin: 0% 0%; |
| 212 } |
| 213 |
| 214 :host ::content paper-toolbar.has-shadow:after, |
| 215 :host ::content .paper-header.has-shadow:after { |
| 216 opacity: 1; |
| 217 -webkit-transform: scale3d(1, 1, 1); |
| 218 transform: scale3d(1, 1, 1); |
| 219 } |
| 220 </style> |
| 221 |
| 222 <template> |
| 223 <content id="headerContent" select="paper-toolbar, .paper-header"></content> |
| 224 <div id="mainContainer" class$="[[_computeMainContainerClass(mode)]]"> |
| 225 <content id="mainContent" select="*"></content> |
| 226 </div> |
| 227 </template> |
| 228 |
| 229 </dom-module> |
| 230 |
| 231 <style is="custom-style"> |
| 232 :root { |
| 233 /** |
| 234 * Default paper header panel shadow |
| 235 */ |
| 236 --paper-header-panel-shadow: { |
| 237 height: 6px; |
| 238 bottom: -6px; |
| 239 box-shadow: inset 0px 5px 6px -3px rgba(0, 0, 0, 0.4); |
| 240 }; |
| 241 } |
| 242 </style> |
| 243 |
| 244 <script src="paper-header-panel-extracted.js"></script></body></html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 1162563004:
Upgrade to 1.0 and switch clients to dom-repeat where needed. (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master