docs and more demos

googlearchive · Jun 4, 2014 · 05ad359 · 05ad359
1 parent e904cc0
commit 05ad359
Show file tree

Hide file tree

Showing 4 changed files with 101 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -1,2 +1,4 @@
 core-scroll-header-panel
 ========================
+
+See the [component page](http://polymer.github.io/core-scroll-header-panel) for more information.
diff --git a/core-scroll-header-panel.html b/core-scroll-header-panel.html
@@ -8,7 +8,21 @@
 -->
 
 <!--
-`core-scroll-header-panel`
+`core-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 is useful for saving screen space 
+and allows users to access important controls by easily moving them back to the 
+view.
+
+`core-scroll-header-panel` works well with `core-toolbar` but can use any element 
+that represents a header by adding a `core-header` class to it.  And use attribute 
+`content` to indicate it's a content section.
+
+    <core-scroll-header-panel>
+      <core-toolbar>Header</core-toolbar>
+      <div content>Content goes here...</div>
+    </core-scroll-header-panel>
 
 @group Polymer Core Elements
 @element core-scroll-header-panel

diff --git a/demo.html b/demo.html
@@ -26,6 +26,7 @@
     <a href="demos/demo6.html">Demo6</a><br><br>
     <a href="demos/demo7.html">Demo7</a><br><br>
     <a href="demos/demo8.html">Demo8</a><br><br>
+    <a href="demos/demo9.html">Demo9</a><br><br>
 
 </body>
 </html>
diff --git a/demos/demo9.html b/demos/demo9.html
@@ -0,0 +1,83 @@
+<!doctype html>
+<!--
+Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+<html>
+<head>
+  <title>core-scroll-header-panel: demo9</title>
+
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
+  <meta name="mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-capable" content="yes">
+
+  <script src="../../platform/platform.js"></script>
+
+  <link rel="import" href="../core-scroll-header-panel.html">
+  <link rel="import" href="lorem-ipsum.html">
+  <link rel="import" href="../../core-toolbar/core-toolbar.html">
+  <link rel="import" href="../../core-icon-button/core-icon-button.html">
+
+  <style shim-shadowdom>
+
+    body {
+      font-family: sans-serif;
+      color: #333;
+    }
+
+    core-scroll-header-panel {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+    }
+
+    core-toolbar {
+      background-color: #4285f4;
+      color: #f1f1f1;
+      fill: #f1f1f1;
+    }
+
+    input {
+      height: 40px;
+      border: 0;
+      font-size: 18px;
+    }
+
+    .content {
+      padding: 10px 30px;
+    }
+
+  </style>
+
+</head>
+<body unresolved>
+
+  <core-scroll-header-panel condensed keepCondensedHeader condensedHeaderHeight="64" noReveal>
+
+    <core-toolbar class="medium-tall">
+
+      <input flex>
+
+      <div class="bottom">Title</div>
+      <div class="bottom" flex></div>
+      <core-icon-button class="bottom" icon="thumb-up"></core-icon-button>
+      <core-icon-button class="bottom" icon="mail"></core-icon-button>
+
+    </core-toolbar>
+
+    <div class="content">
+
+      <lorem-ipsum paragraphs="100"></lorem-ipsum>
+
+    </div>
+
+  </core-scroll-header-panel>
+
+</body>
+</html>