paper-scroll-header-panel - Vaadin Add-on Directory

Name: paper-scroll-header-panel
Availability: InStock
Author: PolymerElements

Fancy scrolling effects where the header animates between tall and condensed states

[![Published on NPM](https://img.shields.io/npm/v/@polymer/paper-scroll-header-panel.svg)](https://www.npmjs.com/package/@polymer/paper-scroll-header-panel) [![Build status](https://travis-ci.org/PolymerElements/paper-scroll-header-panel.svg?branch=master)](https://travis-ci.org/PolymerElements/paper-scroll-header-panel) [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://webcomponents.org/element/@polymer/paper-scroll-header-panel) ## <paper-scroll-header-panel> **This element has been deprecated in favor of [app-layout](https://github.com/PolymerElements/app-layout).** `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. `paper-scroll-header-panel` works well with `paper-toolbar` but can use any element that represents a header by adding a `paper-header` class to it. Note: If the class `paper-header` is used, the header must be positioned relative or absolute. e.g. ```css .paper-header { position: relative; } ``` ```html

Header

Content goes here...

``` ### Styling ======= The following custom properties and mixins are available for styling: | Custom property | Description | Default | | --- | --- | --- | | --paper-scroll-header-panel-full-header | To change background for toolbar when it is at its full size | {} | | --paper-scroll-header-panel-condensed-header | To change the background for toolbar when it is condensed | {} | | --paper-scroll-header-panel-container | To override or add container styles | {} | | --paper-scroll-header-panel-header-container | To override or add header styles | {} | See: [Documentation](https://www.webcomponents.org/element/@polymer/paper-scroll-header-panel), [Demo](https://www.webcomponents.org/element/@polymer/paper-scroll-header-panel/demo/demo/index.html). ## Usage ### Installation ``` npm install --save @polymer/paper-scroll-header-panel ``` ### In an html file ```html

Hello World!

Content goes here...

``` ### In a Polymer 3 element ```js import {PolymerElement, html} from '@polymer/polymer'; import '@polymer/paper-scroll-header-panel/paper-scroll-header-panel.js'; import '@polymer/paper-toolbar/paper-toolbar.js'; class SampleElement extends PolymerElement { static get template() { return html`

Hello World!

Content goes here...

`; } } customElements.define('sample-element', SampleElement); ``` ## Contributing If you want to send a PR to this element, here are the instructions for running the tests and demo locally: ### Installation ```sh git clone https://github.com/PolymerElements/paper-scroll-header-panel cd paper-scroll-header-panel npm install npm install -g polymer-cli ``` ### Running the demo locally ```sh polymer serve --npm open http://127.0.0.1:/demo/ ``` ### Running the tests ```sh polymer test --npm ```

License
View on NPM
View on GitHub

paper-scroll-header-panel version 1.0.0
### Dependencies * polymer#Polymer/polymer#^1.0.0 * paper-toolbar#PolymerElements/paper-toolbar#^1.0.0 * iron-resizable-behavior#PolymerElements/iron-resizable-behavior#^1.0.0

paper-scroll-header-panel version 1.0.1
### Dependencies * polymer#Polymer/polymer#^1.0.0 * paper-toolbar#PolymerElements/paper-toolbar#^1.0.0 * iron-resizable-behavior#PolymerElements/iron-resizable-behavior#^1.0.0

paper-scroll-header-panel version 1.0.2
### Dependencies * polymer#Polymer/polymer#^1.0.0 * paper-toolbar#PolymerElements/paper-toolbar#^1.0.0 * iron-resizable-behavior#PolymerElements/iron-resizable-behavior#^1.0.0

paper-scroll-header-panel version 1.0.3
### Dependencies * polymer#Polymer/polymer#^1.0.0 * paper-toolbar#PolymerElements/paper-toolbar#^1.0.0 * iron-resizable-behavior#PolymerElements/iron-resizable-behavior#^1.0.0

paper-scroll-header-panel version 1.0.4
### Dependencies * polymer#Polymer/polymer#^1.0.0 * paper-toolbar#PolymerElements/paper-toolbar#^1.0.0 * iron-resizable-behavior#PolymerElements/iron-resizable-behavior#^1.0.0

paper-scroll-header-panel version 1.0.5
### Dependencies * polymer#Polymer/polymer#^1.0.0 * paper-toolbar#PolymerElements/paper-toolbar#^1.0.0 * iron-resizable-behavior#PolymerElements/iron-resizable-behavior#^1.0.0

paper-scroll-header-panel version 1.0.6
### Dependencies * polymer#Polymer/polymer#^1.0.0 * paper-toolbar#PolymerElements/paper-toolbar#^1.0.0 * iron-resizable-behavior#PolymerElements/iron-resizable-behavior#^1.0.0

paper-scroll-header-panel version 1.0.7
### Dependencies * polymer#Polymer/polymer#^1.0.0 * paper-toolbar#PolymerElements/paper-toolbar#^1.0.0 * iron-resizable-behavior#PolymerElements/iron-resizable-behavior#^1.0.0

paper-scroll-header-panel version 1.0.8
### Dependencies * polymer#Polymer/polymer#^1.0.0 * paper-toolbar#PolymerElements/paper-toolbar#^1.0.0 * iron-resizable-behavior#PolymerElements/iron-resizable-behavior#^1.0.0

paper-scroll-header-panel version 1.0.9
### Dependencies * polymer#Polymer/polymer#^1.0.0 * paper-toolbar#PolymerElements/paper-toolbar#^1.0.0 * iron-resizable-behavior#PolymerElements/iron-resizable-behavior#^1.0.0

paper-scroll-header-panel version 1.0.10
### Dependencies * polymer#Polymer/polymer#^1.0.0 * paper-toolbar#PolymerElements/paper-toolbar#^1.0.0 * iron-resizable-behavior#PolymerElements/iron-resizable-behavior#^1.0.0

paper-scroll-header-panel version 1.0.11
### Dependencies * polymer#Polymer/polymer#^1.0.0 * paper-toolbar#PolymerElements/paper-toolbar#^1.0.0 * iron-resizable-behavior#PolymerElements/iron-resizable-behavior#^1.0.0

paper-scroll-header-panel version 1.0.12
### Dependencies * polymer#Polymer/polymer#^1.0.0 * iron-resizable-behavior#PolymerElements/iron-resizable-behavior#^1.0.0

paper-scroll-header-panel version 1.0.13
### Dependencies * polymer#Polymer/polymer#^1.0.0 * iron-resizable-behavior#PolymerElements/iron-resizable-behavior#^1.0.0

paper-scroll-header-panel version 1.0.14
### Dependencies * polymer#Polymer/polymer#^1.0.0 * iron-resizable-behavior#PolymerElements/iron-resizable-behavior#^1.0.0

paper-scroll-header-panel version 0.0.1
### Dependencies * @polymer/polymer#^1.2.5-npm-test.2 * @polymer/iron-resizable-behavior#^0.0.1

paper-scroll-header-panel version 0.0.3
### Dependencies * @polymer/polymer#^1.2.5-npm-test.2 * @polymer/iron-resizable-behavior#^0.0.3

paper-scroll-header-panel version 1.0.15
### Dependencies * polymer#Polymer/polymer#^1.0.0 * iron-resizable-behavior#PolymerElements/iron-resizable-behavior#^1.0.0

paper-scroll-header-panel version 1.0.16
### Dependencies * polymer#Polymer/polymer#^1.1.0 * iron-resizable-behavior#PolymerElements/iron-resizable-behavior#^1.0.0

paper-scroll-header-panel version 2.0.0
### Dependencies * polymer#Polymer/polymer#1.9 - 2 * iron-resizable-behavior#PolymerElements/iron-resizable-behavior#1 - 2

paper-scroll-header-panel version 3.0.0-pre.1
### Dependencies * @polymer/polymer#^3.0.0-pre.1 * @polymer/iron-resizable-behavior#^3.0.0-pre.1

paper-scroll-header-panel version 3.0.0-pre.2
### Dependencies * @polymer/polymer#^3.0.0-pre.1 * @polymer/iron-resizable-behavior#^3.0.0-pre.1

paper-scroll-header-panel version 3.0.0-pre.3
### Dependencies * @polymer/polymer#^3.0.0-pre.3 * @polymer/iron-resizable-behavior#^3.0.0-pre.3

paper-scroll-header-panel version 3.0.0-pre.4
### Dependencies * @polymer/polymer#^3.0.0-pre.4 * @polymer/iron-resizable-behavior#^3.0.0-pre.4

paper-scroll-header-panel version 3.0.0-pre.6
### Dependencies * @polymer/polymer#^3.0.0-pre.6 * @polymer/iron-resizable-behavior#^3.0.0-pre.6

paper-scroll-header-panel version 3.0.0-pre.7
### Dependencies * @polymer/polymer#^3.0.0-pre.7 * @polymer/iron-resizable-behavior#^3.0.0-pre.7

paper-scroll-header-panel version 3.0.0-pre.8
### Dependencies * @polymer/polymer#^3.0.0-pre.7 * @polymer/iron-resizable-behavior#^3.0.0-pre.7

paper-scroll-header-panel version 3.0.0-pre.10
### Dependencies * @polymer/polymer#^3.0.0-pre.10 * @polymer/iron-resizable-behavior#^3.0.0-pre.10

paper-scroll-header-panel version 3.0.0-pre.11
### Dependencies * @polymer/polymer#^3.0.0-pre.10 * @polymer/iron-resizable-behavior#^3.0.0-pre.10

paper-scroll-header-panel version 3.0.0-pre.12
### Dependencies * @polymer/polymer#3.0.0-pre.12 * @polymer/iron-resizable-behavior#3.0.0-pre.12

paper-scroll-header-panel version 3.0.0-pre.13
### Dependencies * @polymer/polymer#^3.0.0-pre.13 * @polymer/iron-resizable-behavior#^3.0.0-pre.13

paper-scroll-header-panel version 3.0.0-pre.14
### Dependencies * @polymer/polymer#^3.0.0-pre.13 * @polymer/iron-resizable-behavior#^3.0.0-pre.14

paper-scroll-header-panel version 3.0.0-pre.15
### Dependencies * @polymer/polymer#^3.0.0-pre.13 * @polymer/iron-resizable-behavior#^3.0.0-pre.15

paper-scroll-header-panel version 3.0.0-pre.16
### Dependencies * @polymer/polymer#^3.0.0-pre.13 * @polymer/iron-resizable-behavior#^3.0.0-pre.16

paper-scroll-header-panel version 3.0.0-pre.17
### Dependencies * @polymer/polymer#^3.0.0-pre.13 * @polymer/iron-resizable-behavior#^3.0.0-pre.17

paper-scroll-header-panel version 3.0.0-pre.18
### Dependencies * @polymer/polymer#^3.0.0 * @polymer/iron-resizable-behavior#^3.0.0-pre.18

paper-scroll-header-panel version 3.0.0-pre.19
### Dependencies * @polymer/polymer#^3.0.0 * @polymer/iron-resizable-behavior#^3.0.0-pre.19

paper-scroll-header-panel version 3.0.0-pre.20
### Dependencies * @polymer/polymer#^3.0.0 * @polymer/iron-resizable-behavior#^3.0.0-pre.20

paper-scroll-header-panel version 3.0.0-pre.21
### Dependencies * @polymer/polymer#^3.0.0 * @polymer/iron-resizable-behavior#^3.0.0-pre.21

paper-scroll-header-panel version 3.0.0-pre.22
### Dependencies * @polymer/polymer#^3.0.0 * @polymer/iron-resizable-behavior#^3.0.0-pre.20

paper-scroll-header-panel version 3.0.0-pre.23
### Dependencies * @polymer/polymer#^3.0.0 * @polymer/iron-resizable-behavior#^3.0.0-pre.22

paper-scroll-header-panel version 3.0.0-pre.24
### Dependencies * @polymer/polymer#^3.0.0 * @polymer/iron-resizable-behavior#^3.0.0-pre.22

paper-scroll-header-panel version 3.0.0-pre.25
### Dependencies * @polymer/polymer#^3.0.0 * @polymer/iron-resizable-behavior#^3.0.0-pre.24

paper-scroll-header-panel version 3.0.0-pre.26
### Dependencies * @polymer/polymer#^3.0.0 * @polymer/iron-resizable-behavior#^3.0.0-pre.25

paper-scroll-header-panel version 3.0.0
### Dependencies * @polymer/polymer#^3.0.0 * @polymer/iron-resizable-behavior#^3.0.0-pre.26

paper-scroll-header-panel version 3.0.1
### Dependencies * @polymer/polymer#^3.0.0 * @polymer/iron-resizable-behavior#^3.0.0-pre.26