third_party/polymer/v1_0/components/paper-header-panel/README.md

   1 # paper-header-panel
   2
   3 `paper-header-panel` contains a header section and a content panel section.
   4
   5 __Important:__ The `paper-header-panel` will not display if its parent does not have a height.
   6
   7 Using [layout classes](http://www.polymer-project.org/docs/polymer/layout-attrs.html), you can make
   8 the `paper-header-panel` fill the screen
   9
  10 ```html
  11 <body class="fullbleed layout vertical">
  12   <paper-header-panel class="flex">
  13     <paper-toolbar>
  14       <div>Hello World!</div>
  15     </paper-toolbar>
  16   </paper-header-panel>
  17 </body>
  18 ```
  19
  20 Special support is provided for scrolling modes when one uses a `paper-toolbar` or equivalent for the header section. For example:
  21
  22 ```html
  23 <paper-header-panel>
  24   <paper-toolbar>Header</paper-toolbar>
  25   <div>Content goes here...</div>
  26 </paper-header-panel>
  27 ```
  28
  29 If you want to use other than `paper-toolbar` for the header, add `paper-header` class to that
  30 element:
  31
  32 ```html
  33 <paper-header-panel>
  34   <div class="paper-header">Header</div>
  35   <div>Content goes here...</div>
  36 </paper-header-panel>
  37 ```
  38
  39 To have the content fit to the main area, use the `fit` class:
  40
  41 ```html
  42 <paper-header-panel>
  43   <div class="paper-header">standard</div>
  44   <div class="content fit">content fits 100% below the header</div>
  45 </paper-header-panel>
  46 ```
  47
  48 ### Mode
  49
  50 Controls header and scrolling behavior. Options are `standard`, `seamed`, `waterfall`, `waterfall-tall`, `scroll` and
  51 `cover`. Default is `standard`.
  52
  53 Mode | Description
  54 ----------------|-------------
  55 `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.
  56 `seamed` | The header is presented as seamed with the panel.
  57 `waterfall` | Similar to standard mode, but header is initially presented as seamed with panel, but then separates to form the step.
  58 `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).
  59 `scroll` | The header keeps its seam with the panel, and is pushed off screen.
  60 `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.
  61
  62 Example:
  63
  64 ```html
  65 <paper-header-panel mode="waterfall">
  66   <div class="paper-header">standard</div>
  67   <div class="content fit">content fits 100% below the header</div>
  68 </paper-header-panel>
  69 ```
  70
  71 ### Styling header panel:
  72
  73 To change the shadow that shows up underneath the header:
  74
  75 ```css
  76 paper-header-panel {
  77   --paper-header-panel-shadow: {
  78       height: 6px;
  79       bottom: -6px;
  80       box-shadow: inset 0px 5px 6px -3px rgba(0, 0, 0, 0.4);
  81   };
  82 }
  83 ```
  84
  85 To change the panel container:
  86
  87 ```css
  88 paper-slider {
  89   --paper-header-panel-standard-container: {
  90     border: 1px solid gray;
  91   };
  92
  93   --paper-header-panel-cover-container: {
  94     border: 1px solid gray;
  95   };
  96
  97   --paper-header-panel-waterfall-container: {
  98     border: 1px solid gray;
  99   };
 100
 101   --paper-header-panel-waterfall-tall-container: {
 102     border: 1px solid gray;
 103   };
 104 }
 105 ```