third_party/polymer/v1_0/components-chromium/paper-header-panel/paper-header-panel.html

   1 <!--
   2 Copyright (c) 2015 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 --><html><head><link rel="import" href="../polymer/polymer.html">
   9 <link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
  10
  11 <!--
  12 `paper-header-panel` contains a header section and a content panel section.
  13
  14 __Important:__ The `paper-header-panel` will not display if its parent does not have a height.
  15
  16 Using layout classes, you can make the `paper-header-panel` fill the screen
  17
  18     <body class="fullbleed layout vertical">
  19       <paper-header-panel class="flex">
  20         <paper-toolbar>
  21           <div>Hello World!</div>
  22         </paper-toolbar>
  23       </paper-header-panel>
  24     </body>
  25
  26 Special support is provided for scrolling modes when one uses a paper-toolbar or equivalent for the
  27 header section.
  28
  29 Example:
  30
  31     <paper-header-panel>
  32       <paper-toolbar>Header</paper-toolbar>
  33       <div>Content goes here...</div>
  34     </paper-header-panel>
  35
  36 If you want to use other than `paper-toolbar` for the header, add `paper-header` class to that
  37 element.
  38
  39 Example:
  40
  41     <paper-header-panel>
  42       <div class="paper-header">Header</div>
  43       <div>Content goes here...</div>
  44     </paper-header-panel>
  45
  46 To have the content fit to the main area, use the `fit` class.
  47
  48     <paper-header-panel>
  49       <div class="paper-header">standard</div>
  50       <div class="fit">content fits 100% below the header</div>
  51     </paper-header-panel>
  52
  53 Modes
  54
  55 Controls header and scrolling behavior. Options are `standard`, `seamed`, `waterfall`, `waterfall-tall`, `scroll` and
  56 `cover`. Default is `standard`.
  57
  58 Mode | Description
  59 ----------------|-------------
  60 `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.
  61 `seamed` | The header is presented as seamed with the panel.
  62 `waterfall` | Similar to standard mode, but header is initially presented as seamed with panel, but then separates to form the step.
  63 `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).
  64 `scroll` | The header keeps its seam with the panel, and is pushed off screen.
  65 `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.
  66
  67 Example:
  68
  69     <paper-header-panel mode="waterfall">
  70       <div class="paper-header">standard</div>
  71       <div class="content fit">content fits 100% below the header</div>
  72     </paper-header-panel>
  73
  74
  75 Styling header panel:
  76
  77 To change the shadow that shows up underneath the header:
  78
  79     paper-header-panel {
  80       --paper-header-panel-shadow: {
  81           height: 6px;
  82           bottom: -6px;
  83           box-shadow: inset 0px 5px 6px -3px rgba(0, 0, 0, 0.4);
  84       };
  85     }
  86
  87 To change the panel container in different modes:
  88
  89     paper-slider {
  90       --paper-header-panel-standard-container: {
  91         border: 1px solid gray;
  92       };
  93
  94       --paper-header-panel-seamed-container: {
  95         border: 1px solid gray;
  96       };
  97
  98       --paper-header-panel-waterfall-container: {
  99         border: 1px solid gray;
 100       };
 101
 102       --paper-header-panel-waterfall-tall-container: {
 103         border: 1px solid gray;
 104       };
 105
 106       --paper-header-panel-scroll-container: {
 107         border: 1px solid gray;
 108       };
 109
 110       --paper-header-panel-cover-container: {
 111         border: 1px solid gray;
 112       };
 113     }
 114
 115 @group Paper Elements
 116 @element paper-header-panel
 117 @demo demo/index.html
 118 @hero hero.svg
 119 -->
 120
 121 </head><body><dom-module id="paper-header-panel">
 122
 123   <link rel="import" type="css" href="paper-header-panel.css">
 124
 125   <template>
 126     <content id="headerContent" select="paper-toolbar, .paper-header"></content>
 127
 128     <div id="mainPanel">
 129       <div id="mainContainer" class$="[[_computeMainContainerClass(mode)]]">
 130         <content id="mainContent" select="*"></content>
 131       </div>
 132       <div id="dropShadow"></div>
 133     </div>
 134   </template>
 135
 136 </dom-module>
 137
 138 <script src="paper-header-panel-extracted.js"></script></body></html>