third_party/polymer/components-chromium/core-scroll-header-panel/core-scroll-header-panel.html

   1 <!--
   2 Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
   3 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
   4 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
   5 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
   6 Code distributed by Google as part of the polymer project is also
   7 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
   8 -->
   9
  10 <!--
  11 `core-scroll-header-panel` contains a header section and a content section.  The
  12 header is initially on the top part of the view but it scrolls away with the
  13 rest of the scrollable content.  Upon scrolling slightly up at any point, the
  14 header scrolls back into view.  This saves screen space and allows users to
  15 access important controls by easily moving them back to the view.
  16
  17 __Important:__ The `core-scroll-header-panel` will not display if its parent does not have a height.
  18
  19 Using [layout attributes](http://www.polymer-project.org/docs/polymer/layout-attrs.html), you can easily make the `core-scroll-header-panel` fill the screen
  20
  21     <body fullbleed layout vertical>
  22       <core-scroll-header-panel flex>
  23         <core-toolbar>
  24           <div>Hello World!</div>
  25         </core-toolbar>
  26       </core-scroll-header-panel>
  27     </body>
  28
  29 or, if you would prefer to do it in CSS, just give `html`, `body`, and `core-scroll-header-panel` a height of 100%:
  30
  31     html, body {
  32       height: 100%;
  33       margin: 0;
  34     }
  35     core-scroll-header-panel {
  36       height: 100%;
  37     }
  38
  39 `core-scroll-header-panel` works well with `core-toolbar` but can use any element
  40 that represents a header by adding a `core-header` class to it.  Use the attribute
  41 or class `content` to delineate the content section.
  42
  43     <core-scroll-header-panel>
  44       <core-toolbar>Header</core-toolbar>
  45       <div content>Content goes here...</div>
  46     </core-scroll-header-panel>
  47
  48 @group Polymer Core Elements
  49 @element core-scroll-header-panel
  50 @homepage github.io
  51 -->
  52
  53 <link rel="import" href="../polymer/polymer.html">
  54
  55 <polymer-element name="core-scroll-header-panel" assetpath="">
  56 <template>
  57
  58   <link rel="stylesheet" href="core-scroll-header-panel.css">
  59
  60   <div id="mainContainer" on-scroll="{{scroll}}">
  61
  62     <content id="mainContent" select="[content], .content"></content>
  63
  64   </div>
  65
  66   <div id="headerContainer">
  67
  68     <div class="bg-container">
  69       <div id="condensedHeaderBg"></div>
  70       <div id="headerBg"></div>
  71     </div>
  72
  73     <content id="headerContent" select="core-toolbar, .core-header"></content>
  74
  75   </div>
  76
  77 </template>
  78
  79 </polymer-element>
  80 <script src="core-scroll-header-panel-extracted.js"></script>