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