Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(1077)

Unified Diff: polymer_1.2.3/bower_components/paper-header-panel/README.md

Issue 1581713003: [third_party] add polymer 1.2.3 (Closed) Base URL: https://chromium.googlesource.com/infra/third_party/npm_modules.git@master
Patch Set: 1.2.3 Created 4 years, 11 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
Index: polymer_1.2.3/bower_components/paper-header-panel/README.md
diff --git a/polymer_1.2.3/bower_components/paper-header-panel/README.md b/polymer_1.2.3/bower_components/paper-header-panel/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..af5959dc6b1362c91dfa24a55e6629fe92630d30
--- /dev/null
+++ b/polymer_1.2.3/bower_components/paper-header-panel/README.md
@@ -0,0 +1,123 @@
+
+<!---
+
+This README is automatically generated from the comments in these files:
+paper-header-panel.html
+
+Edit those files, and our readme bot will duplicate them over here!
+Edit this file, and the bot will squash your changes :)
+
+-->
+
+[![Build Status](https://travis-ci.org/PolymerElements/paper-header-panel.svg?branch=master)](https://travis-ci.org/PolymerElements/paper-header-panel)
+
+_[Demo and API Docs](https://elements.polymer-project.org/elements/paper-header-panel)_
+
+
+##&lt;paper-header-panel&gt;
+
+
+`paper-header-panel` contains a header section and a content panel section.
+
+__Important:__ The `paper-header-panel` will not display if its parent does not have a height.
+
+Using layout classes, you can make the `paper-header-panel` fill the screen
+
+ <body class="fullbleed layout vertical">
+ <paper-header-panel class="flex">
+ <paper-toolbar>
+ <div>Hello World!</div>
+ </paper-toolbar>
+ </paper-header-panel>
+ </body>
+
+Special support is provided for scrolling modes when one uses a paper-toolbar or equivalent for the
+header section.
+
+Example:
+
+ <paper-header-panel>
+ <paper-toolbar>Header</paper-toolbar>
+ <div>Content goes here...</div>
+ </paper-header-panel>
+
+If you want to use other than `paper-toolbar` for the header, add `paper-header` class to that
+element.
+
+Example:
+
+ <paper-header-panel>
+ <div class="paper-header">Header</div>
+ <div>Content goes here...</div>
+ </paper-header-panel>
+
+To have the content fit to the main area, use the `fit` class.
+
+ <paper-header-panel>
+ <div class="paper-header">standard</div>
+ <div class="fit">content fits 100% below the header</div>
+ </paper-header-panel>
+
+### Modes
+
+Controls header and scrolling behavior. Options are `standard`, `seamed`, `waterfall`, `waterfall-tall`, `scroll` and
+`cover`. Default is `standard`.
+
+Mode | Description
+----------------|-------------
+`standard` | The header is a step above the panel. The header will consume the panel at the point of entry, preventing it from passing through to the opposite side.
+`seamed` | The header is presented as seamed with the panel.
+`waterfall` | Similar to standard mode, but header is initially presented as seamed with panel, but then separates to form the step.
+`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 condensing (`tall` class is removed from the header).
+`scroll` | The header keeps its seam with the panel, and is pushed off screen.
+`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 covering the header.
+
+Example:
+
+ <paper-header-panel mode="waterfall">
+ <div class="paper-header">standard</div>
+ <div class="content fit">content fits 100% below the header</div>
+ </paper-header-panel>
+
+
+### Styling
+
+To change the shadow that shows up underneath the header:
+
+ paper-header-panel {
+ --paper-header-panel-shadow: {
+ height: 6px;
+ bottom: -6px;
+ box-shadow: inset 0px 5px 6px -3px rgba(0, 0, 0, 0.4);
+ };
+ }
+
+To change the panel container in different modes:
+
+ paper-header-panel {
+ --paper-header-panel-standard-container: {
+ border: 1px solid gray;
+ };
+
+ --paper-header-panel-seamed-container: {
+ border: 1px solid gray;
+ };
+
+ --paper-header-panel-waterfall-container: {
+ border: 1px solid gray;
+ };
+
+ --paper-header-panel-waterfall-tall-container: {
+ border: 1px solid gray;
+ };
+
+ --paper-header-panel-scroll-container: {
+ border: 1px solid gray;
+ };
+
+ --paper-header-panel-cover-container: {
+ border: 1px solid gray;
+ };
+ }
+
+

Powered by Google App Engine
This is Rietveld 408576698