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-cover-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
 107 @group Paper Elements
 108 @element paper-header-panel
 109 @demo demo/index.html
 110 @hero hero.svg
 111 -->
 112
 113 </head><body><dom-module id="paper-header-panel">
 114
 115   <style>
 116     :host {
 117       @apply(--layout);
 118       @apply(--layout-vertical);
 119
 120       display: block;
 121       position: relative;
 122       height: 100%;
 123
 124       /* Create a stack context, we will need it for the shadow*/
 125       z-index: 0;
 126     }
 127
 128     :root {
 129       /**
 130        * Default paper header panel shadow
 131        */
 132       --paper-header-panel-shadow: {
 133         height: 6px;
 134         bottom: -6px;
 135         box-shadow: inset 0px 5px 6px -3px rgba(0, 0, 0, 0.4);
 136       };
 137     }
 138
 139     #mainContainer {
 140       @apply(--layout-flex);
 141
 142       position: relative;
 143       overflow-y: auto;
 144       overflow-x: hidden;
 145       -webkit-overflow-scrolling: touch;
 146       flex-basis: 0.0001px;
 147     }
 148
 149     /*
 150      * mode: scroll
 151      */
 152     :host([mode=scroll]) #mainContainer {
 153       @apply(--paper-header-panel-scroll-container);
 154       overflow: visible;
 155     }
 156
 157     :host([mode=scroll]) {
 158       overflow-y: auto;
 159       overflow-x: hidden;
 160       -webkit-overflow-scrolling: touch;
 161     }
 162
 163     /*
 164      * mode: cover
 165      */
 166     :host([mode=cover]) #mainContainer {
 167       @apply(--paper-header-panel-cover-container);
 168       position: absolute;
 169       top: 0;
 170       right: 0;
 171       bottom: 0;
 172       left: 0;
 173     }
 174
 175     /*
 176      * mode: standard
 177      */
 178     :host([mode=standard]) #mainContainer {
 179       @apply(--paper-header-panel-standard-container);
 180     }
 181
 182     /*
 183      * mode: waterfall
 184      */
 185     :host([mode=waterfall]) #mainContainer {
 186       @apply(--paper-header-panel-waterfall-container);
 187     }
 188
 189     /*
 190      * mode: waterfall-tall
 191      */
 192     :host([mode=waterfall-tall]) #mainContainer {
 193       @apply(--paper-header-panel-waterfall-tall-container);
 194     }
 195
 196     :host ::content paper-toolbar,
 197     :host ::content .paper-header {
 198       position: relative;
 199       overflow: visible !important;
 200     }
 201
 202     :host ::content paper-toolbar:after,
 203     :host ::content .paper-header:after {
 204       @apply(--paper-header-panel-shadow);
 205
 206       -webkit-transition: opacity 0.5s, -webkit-transform 0.5s;
 207       transition: opacity 0.5s, transform 0.5s;
 208
 209       opacity: 0;
 210       content: "";
 211
 212       width: 100%;
 213       position: absolute;
 214       left: 0px;
 215       right: 0px;
 216       z-index: 1;
 217
 218       -webkit-transform: scale3d(1, 0, 1);
 219       -webkit-transform-origin: 0% 0%;
 220
 221       transform: scale3d(1, 0, 1);
 222       transform-origin: 0% 0%;
 223     }
 224
 225     :host ::content paper-toolbar.has-shadow:after,
 226     :host ::content .paper-header.has-shadow:after {
 227       opacity: 1;
 228       -webkit-transform: scale3d(1, 1, 1);
 229       transform: scale3d(1, 1, 1);
 230     }
 231   </style>
 232
 233   <template>
 234     <content id="headerContent" select="paper-toolbar, .paper-header"></content>
 235     <div id="mainContainer" class$="[[_computeMainContainerClass(mode)]]">
 236       <content id="mainContent" select="*"></content>
 237     </div>
 238   </template>
 239
 240 </dom-module>
 241
 242 <script src="paper-header-panel-extracted.js"></script></body></html>