| OLD | NEW |
|---|
| (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 <link rel="import" href="../../iron-flex-layout/iron-flex-layout.html"> |
| 11 <link rel="import" href="../../iron-resizable-behavior/iron-resizable-behavior.h
tml"> |
| 12 <link rel="import" href="../app-scroll-effects/app-scroll-effects-behavior.html"
> |
| 13 |
| 14 <!-- |
| 15 app-header is container element for app-toolbars at the top of the screen that c
an have scroll |
| 16 effects. By default, an app-header moves away from the viewport when scrolling d
own and |
| 17 if using `reveals`, the header slides back when scrolling back up. For example: |
| 18 |
| 19 ```html |
| 20 <app-header reveals> |
| 21 <app-toolbar> |
| 22 <div title>App name</div> |
| 23 </app-toolbar> |
| 24 </app-header> |
| 25 ``` |
| 26 |
| 27 app-header can also condense when scrolling down. To achieve this behavior, the
header |
| 28 must have a larger height than the `primary` element in the light DOM. For examp
le: |
| 29 |
| 30 ```html |
| 31 <app-header style="height: 96px;" condenses fixed> |
| 32 <app-toolbar style="height: 64px;"> |
| 33 <div title>App name</div> |
| 34 </app-toolbar> |
| 35 </app-header> |
| 36 ``` |
| 37 |
| 38 In this case the header is initially `96px` tall, and it shrinks to `64px` when
scrolling down. |
| 39 That is what is meant by "condensing". |
| 40 |
| 41 ### Primary element |
| 42 |
| 43 As the header condenses, the immediate children of app-header are stacked up. |
| 44 In this case, the primary element is the immediate child that would always staye
d above |
| 45 the others as the header condenses. By default, the `primary` element is the fir
st app-toolbar |
| 46 that is an immediate children of app-header. |
| 47 |
| 48 ```html |
| 49 <app-header condenses> |
| 50 <app-toolbar> Primary element </app-toolbar> |
| 51 </app-header> |
| 52 ``` |
| 53 |
| 54 ```html |
| 55 <app-header condenses> |
| 56 <app-toolbar></app-toolbar> |
| 57 <app-toolbar primary> Primary element </app-toolbar> |
| 58 </app-header> |
| 59 ``` |
| 60 |
| 61 The primary element must be a direct child of app-header. |
| 62 |
| 63 ### Scroll target |
| 64 |
| 65 The app-header's `scrollTarget` property allows to customize the scrollable elem
ent to which |
| 66 the header responds when the user scrolls. By default, app-header uses the docum
ent as |
| 67 the scroll target, but you can customize this property by setting the id of the
element, e.g. |
| 68 |
| 69 ```html |
| 70 <div id="scrollingRegion" style="overflow-y: auto;"> |
| 71 <app-header scroll-target="scrollingRegion"> |
| 72 </app-header> |
| 73 </div> |
| 74 ``` |
| 75 |
| 76 In this case, the `scrollTarget` property points to the outer div element. Alter
natively, |
| 77 you can set this property programmatically: |
| 78 |
| 79 ```js |
| 80 appHeader.scrollTarget = document.querySelector("#scrollingRegion"); |
| 81 ``` |
| 82 |
| 83 ## Backgrounds |
| 84 app-header has two background layers that can be used for styling when the heade
r is condensed |
| 85 or when the scrollable element is scrolled to the top. |
| 86 |
| 87 ## Scroll effects |
| 88 |
| 89 Scroll effects are _optional_ visual effects applied in app-header based on scro
ll position. For example, |
| 90 The [Material Design scrolling techniques](https://www.google.com/design/spec/pa
tterns/scrolling-techniques.html) |
| 91 recommends effects that can be installed via the `effects` property. e.g. |
| 92 |
| 93 ```html |
| 94 <app-header effects="waterfall"> |
| 95 <app-toolbar>App name</app-toolbar> |
| 96 </app-header> |
| 97 ``` |
| 98 |
| 99 #### Importing the effects |
| 100 |
| 101 To use the scroll effects, you must explicitly import them in addition to `app-h
eader`: |
| 102 |
| 103 ```html |
| 104 <link rel="import" href="/bower_components/app-layout/app-scroll-effects/app-scr
oll-effects.html"> |
| 105 ``` |
| 106 |
| 107 #### List of effects |
| 108 |
| 109 * **blend-background** |
| 110 Fades in/out two background elements by applying CSS opacity based on scroll pos
ition. |
| 111 You can use this effect to smoothly change the background color or image of the
header. |
| 112 For example, using the mixin `--app-header-background-rear-layer` lets you assig
n a different |
| 113 background when the header is condensed: |
| 114 |
| 115 ```css |
| 116 app-header { |
| 117 background-color: red; |
| 118 --app-header-background-rear-layer: { |
| 119 /* The header is blue when condensed */ |
| 120 background-color: blue; |
| 121 }; |
| 122 } |
| 123 ``` |
| 124 |
| 125 * **fade-background** |
| 126 Upon scrolling past a threshold, this effect will trigger an opacity transition
to |
| 127 fade in/out the backgrounds. Compared to the `blend-background` effect, |
| 128 this effect doesn't interpolate the opacity based on scroll position. |
| 129 |
| 130 |
| 131 * **parallax-background** |
| 132 A simple parallax effect that vertically translates the backgrounds based on a f
raction |
| 133 of the scroll position. For example: |
| 134 |
| 135 ```css |
| 136 app-header { |
| 137 --app-header-background-front-layer: { |
| 138 background-image: url(...); |
| 139 }; |
| 140 } |
| 141 ``` |
| 142 ```html |
| 143 <app-header style="height: 300px;" effects="parallax-background"> |
| 144 <app-toolbar>App name</app-toolbar> |
| 145 </app-header> |
| 146 ``` |
| 147 |
| 148 The fraction determines how far the background moves relative to the scroll posi
tion. |
| 149 This value can be assigned via the `scalar` config value and it is typically a v
alue |
| 150 between 0 and 1 inclusive. If `scalar=0`, the background doesn't move away from
the header. |
| 151 |
| 152 * **resize-title** |
| 153 Progressively interpolates the size of the title from the element with the `titl
e` attribute |
| 154 to the element with the `condensed-title` attribute as the header condenses. For
example: |
| 155 |
| 156 ```html |
| 157 <app-header condenses reveals effects="resize-title"> |
| 158 <app-toolbar> |
| 159 <h4 condensed-title>App name</h4> |
| 160 </app-toolbar> |
| 161 <app-toolbar> |
| 162 <h1 title>App name</h1> |
| 163 </app-toolbar> |
| 164 </app-header> |
| 165 ``` |
| 166 |
| 167 * **resize-snapped-title** |
| 168 Upon scrolling past a threshold, this effect fades in/out the titles using opaci
ty transitions. |
| 169 Similarly to `resize-title`, the `title` and `condensed-title` elements must be
placed in the |
| 170 light DOM. |
| 171 |
| 172 * **waterfall** |
| 173 Toggles the shadow property in app-header to create a sense of depth (as recomme
nded in the |
| 174 MD spec) between the header and the underneath content. You can change the shado
w by |
| 175 customizing the `--app-header-shadow` mixin. For example: |
| 176 |
| 177 ```css |
| 178 app-header { |
| 179 --app-header-shadow: { |
| 180 box-shadow: inset 0px 5px 2px -3px rgba(0, 0, 0, 0.2); |
| 181 }; |
| 182 } |
| 183 ``` |
| 184 |
| 185 ```html |
| 186 <app-header condenses reveals effects="waterfall"> |
| 187 <app-toolbar> |
| 188 <h1 title>App name</h1> |
| 189 </app-toolbar> |
| 190 </app-header> |
| 191 ``` |
| 192 |
| 193 * **material** |
| 194 Installs the waterfall, resize-title, blend-background and parallax-background e
ffects. |
| 195 |
| 196 ### Content attributes |
| 197 |
| 198 Attribute | Description | Default |
| 199 ----------|---------------------|---------------------------------------- |
| 200 `primary` | Element that remains at the top when the header condenses. | The fir
st app-toolbar in the light DOM. |
| 201 |
| 202 |
| 203 ## Styling |
| 204 |
| 205 Mixin | Description | Default |
| 206 ------|-------------|---------- |
| 207 `--app-header-background-front-layer` | Applies to the front layer of the backgr
ound. | {} |
| 208 `--app-header-background-rear-layer` | Applies to the rear layer of the backgrou
nd. | {} |
| 209 `--app-header-shadow` | Applies to the shadow. | {} |
| 210 |
| 211 @group App Elements |
| 212 @element app-header |
| 213 @demo app-header/demo/blend-background-1.html Blend Background Image |
| 214 @demo app-header/demo/blend-background-2.html Blend 2 Background Images |
| 215 @demo app-header/demo/blend-background-3.html Blend Background Colors |
| 216 @demo app-header/demo/contacts.html Contacts Demo |
| 217 @demo app-header/demo/give.html Resize Snapped Title Demo |
| 218 @demo app-header/demo/music.html Reveals Demo |
| 219 @demo app-header/demo/no-effects.html Condenses and Reveals Demo |
| 220 @demo app-header/demo/notes.html Fixed with Dynamic Shadow Demo |
| 221 --> |
| 222 |
| 223 </head><body><dom-module id="app-header"> |
| 224 <template> |
| 225 <style> |
| 226 :host { |
| 227 position: relative; |
| 228 |
| 229 display: block; |
| 230 |
| 231 transition-timing-function: linear; |
| 232 transition-property: -webkit-transform; |
| 233 transition-property: transform; |
| 234 } |
| 235 |
| 236 :host::after { |
| 237 position: absolute; |
| 238 right: 0px; |
| 239 bottom: -5px; |
| 240 left: 0px; |
| 241 |
| 242 width: 100%; |
| 243 height: 5px; |
| 244 |
| 245 content: ""; |
| 246 transition: opacity 0.4s; |
| 247 pointer-events: none; |
| 248 |
| 249 opacity: 0; |
| 250 box-shadow: inset 0px 5px 6px -3px rgba(0, 0, 0, 0.4); |
| 251 |
| 252 will-change: opacity; |
| 253 |
| 254 @apply(--app-header-shadow); |
| 255 } |
| 256 |
| 257 :host([shadow])::after { |
| 258 opacity: 1; |
| 259 } |
| 260 |
| 261 #contentContainer > ::content [condensed-title] { |
| 262 -webkit-transform-origin: left top; |
| 263 transform-origin: left top; |
| 264 white-space: nowrap; |
| 265 |
| 266 opacity: 0; |
| 267 } |
| 268 |
| 269 #contentContainer > ::content [title] { |
| 270 -webkit-transform-origin: left top; |
| 271 transform-origin: left top; |
| 272 white-space: nowrap; |
| 273 } |
| 274 |
| 275 #background { |
| 276 @apply(--layout-fit); |
| 277 |
| 278 overflow: hidden; |
| 279 } |
| 280 |
| 281 #backgroundFrontLayer, |
| 282 #backgroundRearLayer { |
| 283 @apply(--layout-fit); |
| 284 |
| 285 height: 100%; |
| 286 |
| 287 pointer-events: none; |
| 288 |
| 289 background-size: cover; |
| 290 } |
| 291 |
| 292 #backgroundFrontLayer { |
| 293 @apply(--app-header-background-front-layer); |
| 294 } |
| 295 |
| 296 #backgroundRearLayer { |
| 297 opacity: 0; |
| 298 |
| 299 @apply(--app-header-background-rear-layer); |
| 300 } |
| 301 |
| 302 #contentContainer { |
| 303 position: relative; |
| 304 |
| 305 width: 100%; |
| 306 height: 100%; |
| 307 } |
| 308 |
| 309 :host([disabled]), |
| 310 :host([disabled])::after, |
| 311 :host([disabled]) #backgroundFrontLayer, |
| 312 :host([disabled]) #backgroundRearLayer, |
| 313 :host([disabled]) ::content > app-toolbar:first-of-type, |
| 314 :host([disabled]) ::content > [primary], |
| 315 /* Silent scrolling should not run CSS transitions */ |
| 316 :host-context(.app-layout-silent-scroll), |
| 317 :host-context(.app-layout-silent-scroll)::after, |
| 318 :host-context(.app-layout-silent-scroll) #backgroundFrontLayer, |
| 319 :host-context(.app-layout-silent-scroll) #backgroundRearLayer, |
| 320 :host-context(.app-layout-silent-scroll) ::content > app-toolbar:first-of-
type, |
| 321 :host-context(.app-layout-silent-scroll) ::content > [primary] { |
| 322 transition: none !important; |
| 323 } |
| 324 </style> |
| 325 |
| 326 <div id="background"> |
| 327 <div id="backgroundRearLayer"></div> |
| 328 <div id="backgroundFrontLayer"></div> |
| 329 </div> |
| 330 <div id="contentContainer"> |
| 331 <content id="content"></content> |
| 332 </div> |
| 333 </template> |
| 334 |
| 335 </dom-module> |
| 336 <script src="app-header-extracted.js"></script></body></html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 1984963002:
Roll Polymer elements (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master