third_party/polymer/v0_8/components-chromium/paper-scroll-header-panel/paper-scroll-header-panel.html - Issue 1162563004: Upgrade to 1.0 and switch clients to dom-repeat where needed.

Side by Side Diff: third_party/polymer/v0_8/components-chromium/paper-scroll-header-panel/paper-scroll-header-panel.html

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

Patch Set: Fix a layout import and remove the gzipped webanimation in reproduce.sh 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

« no previous file with comments | « third_party/polymer/v0_8/components-chromium/paper-scroll-header-panel/index.html ('k') | third_party/polymer/v0_8/components-chromium/paper-scroll-header-panel/paper-scroll-header-panel-extracted.js » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

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-resizable-behavior/iron-resizable-behavior.html ">

	11

	12 <!--

	13 `paper-scroll-header-panel` contains a header section and a content section. Th e

	14 header is initially on the top part of the view but it scrolls away with the

	15 rest of the scrollable content. Upon scrolling slightly up at any point, the

	16 header scrolls back into view. This saves screen space and allows users to

	17 access important controls by easily moving them back to the view.

	18

	19 __Important:__ The `paper-scroll-header-panel` will not display if its parent do es not have a height.

	20

	21 Using [layout attributes](http://www.polymer-project.org/docs/polymer/layout-att rs.html), you can easily make the `paper-scroll-header-panel` fill the screen

	22

	23 <body class="fullbleed layout vertical">

	24 <paper-scroll-header-panel class="flex">

	25 <paper-toolbar>

	26 <div>Hello World!</div>

	27 </paper-toolbar>

	28 </paper-scroll-header-panel>

	29 </body>

	30

	31 or, if you would prefer to do it in CSS, just give `html`, `body`, and `paper-sc roll-header-panel` a height of 100%:

	32

	33 html, body {

	34 height: 100%;

	35 margin: 0;

	36 }

	37 paper-scroll-header-panel {

	38 height: 100%;

	39 }

	40

	41 `paper-scroll-header-panel` works well with `paper-toolbar` but can use any elem ent

	42 that represents a header by adding a `core-header` class to it.

	43

	44 <paper-scroll-header-panel>

	45 <paper-toolbar>Header</paper-toolbar>

	46 <div>Content goes here...</div>

	47 </paper-scroll-header-panel>

	48

	49 Styling scroll-header-panel:

	50

	51 To change background for toolbar when it is at its full size:

	52

	53 paper-scroll-header-panel {

	54 --paper-scroll-header-panel-full-header: {

	55 background-color: red;

	56 };

	57 }

	58

	59 To change the background for toolbar when it is condensed:

	60

	61 paper-scroll-header-panel {

	62 --paper-scroll-header-panel-condensed-header: {

	63 background-color: #f4b400;

	64 };

	65 }

	66

	67 @group Paper Element

	68 @element paper-scrollheader-panel

	69 @demo demo/index.html

	70 @hero hero.svg

	71 -->

	72

	73 </head><body><dom-module id="paper-scroll-header-panel">

	74

	75 <style>

	76 :host {

	77 display: block;

	78 position: relative;

	79 overflow: hidden;

	80 }

	81

	82 #mainContainer {

	83 position: absolute;

	84 top: 0;

	85 right: 0;

	86 bottom: 0;

	87 left: 0;

	88 box-sizing: border-box;

	89 -moz-box-sizing: border-box;

	90 -webkit-overflow-scrolling: touch;

	91 overflow-x: hidden;

	92 overflow-_y: auto;

	93 -webkit-transform: translateZ(0);

	94 transform: translateZ(0);

	95 }

	96

	97 #headerContainer {

	98 position: absolute;

	99 top: 0;

	100 right: 0;

	101 left: 0;

	102 }

	103

	104 .bg-container {

	105 position: absolute;

	106 top: 0;

	107 left: 0;

	108 width: 100%;

	109 height: 100%;

	110 overflow: hidden;

	111 }

	112

	113 #headerBg {

	114 @apply(--paper-scroll-header-panel-full-header);

	115 }

	116

	117 #condensedHeaderBg {

	118 @apply(--paper-scroll-header-panel-condensed-header);

	119 }

	120

	121 #headerBg, #condensedHeaderBg {

	122 position: absolute;

	123 top: 0;

	124 left: 0;

	125 width: 100%;

	126 height: 100%;

	127 background-repeat: no-repeat;

	128 background-size: cover;

	129 background-position: center center;

	130 }

	131

	132 #condensedHeaderBg {

	133 opacity: 0;

	134 }

	135 </style>

	136 <template>

	137 <div id="mainContainer">

	138 <content id="mainContent" select=":not(paper-toolbar):not(.paper-header)"> </content>

	139 </div>

	140 <div id="headerContainer">

	141 <div class="bg-container">

	142 <div id="condensedHeaderBg"></div>

	143 <div id="headerBg"></div>

	144 </div>

	145 <content id="headerContent" select="paper-toolbar, .paper-header"></conten t>

	146 </div>

	147 </template>

	148 </dom-module>

	149

	150 <script src="paper-scroll-header-panel-extracted.js"></script></body></html>

OLD	NEW