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

Keyboard Shortcuts

	File
u :	up to issue
j / k :	jump to file after / before current file
J / K :	jump to next file with a comment after / before current file
	Side-by-side diff
i :	toggle intra-line diffs
e :	expand all comments
c :	collapse all comments
s :	toggle showing all comments
n / p :	next / previous diff chunk or comment
N / P :	next / previous comment
<Up> / <Down> :	next / previous line

	Issue
u :	up to list of issues
j / k :	jump to patch after / before current patch
o / <Enter> :	open current patch in side-by-side view
i :	open current patch in unified diff view

	Issue List
j / k :	jump to issue after / before current issue
o / <Enter> :	open current issue

Unified Diff: third_party/polymer/v0_8/components/paper-scroll-header-panel/README.md

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, 7 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 side-by-side diff with in-line comments

Download patch

« no previous file with comments | « third_party/polymer/v0_8/components/paper-scroll-header-panel/.gitignore ('k') | third_party/polymer/v0_8/components/paper-scroll-header-panel/bower.json » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

Index: third_party/polymer/v0_8/components/paper-scroll-header-panel/README.md

diff --git a/third_party/polymer/v0_8/components/paper-scroll-header-panel/README.md b/third_party/polymer/v0_8/components/paper-scroll-header-panel/README.md

new file mode 100644

index 0000000000000000000000000000000000000000..ac1be0c61bac87e14e212365f3a760497ed85e6b

--- /dev/null

+++ b/third_party/polymer/v0_8/components/paper-scroll-header-panel/README.md

@@ -0,0 +1,56 @@

+paper-scroll-header-panel

+========================

+`paper-scroll-header-panel` contains a header section and a content section. The header is initially on the top part of the view but it scrolls away with the rest of the scrollable content. Upon scrolling slightly up at any point, the header scrolls back into view. This saves screen space and allows users to access important controls by easily moving them back to the view.

+Important: The `paper-scroll-header-panel` will not display if its parent does not have a height. Using layout classes, you can easily make the `paper-scroll-header-panel` fill the screen

+```html

+<body class="fullbleed layout vertical">

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

+ <paper-toolbar>

+ Hello World!

+ </paper-toolbar>

+ </paper-scroll-header-panel>

+</body>

+```

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

+```css

+html, body {

+ height: 100%;

+ margin: 0;

+paper-scroll-header-panel {

+ height: 100%;

+```

+`paper-scroll-header-panel` works well with `paper-toolbar` but can use any element that represents a header by adding a core-header class to it.

+```html

+<paper-scroll-header-panel>

+ <paper-toolbar>Header</paper-toolbar>

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

+</paper-scroll-header-panel>

+```

+### Styling scroll-header-panel:

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

+```css

+paper-scroll-header-panel {

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

+ background-color: red;

+ };

+```

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

+```css

+paper-scroll-header-panel {

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

+ background-color: #f4b400;

+ };

+```