src/third_party/polymer/components-chromium/core-header-panel/core-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-header-panel` contains a header section and a content panel section.
  12
  13 __Important:__ The `core-header-panel` will not display if its parent does not have a height.
  14
  15 Using [layout attributes](http://www.polymer-project.org/docs/polymer/layout-attrs.html), you can easily make the `core-header-panel` fill the screen
  16
  17     <body fullbleed layout vertical>
  18       <core-header-panel flex>
  19         <core-toolbar>
  20           <div>Hello World!</div>
  21         </core-toolbar>
  22       </core-header-panel>
  23     </body>
  24
  25 or, if you would prefer to do it in CSS, just give `html`, `body`, and `core-header-panel` a height of 100%:
  26
  27     html, body {
  28       height: 100%;
  29       margin: 0;
  30     }
  31     core-header-panel {
  32       height: 100%;
  33     }
  34
  35 Special support is provided for scrolling modes when one uses a core-toolbar or equivalent
  36 for the header section.
  37
  38 Example:
  39
  40     <core-header-panel>
  41       <core-toolbar>Header</core-toolbar>
  42       <div>Content goes here...</div>
  43     </core-header-panel>
  44
  45 If you want to use other than `core-toolbar` for the header, add
  46 `core-header` class to that element.
  47
  48 Example:
  49
  50     <core-header-panel>
  51       <div class="core-header">Header</div>
  52       <div>Content goes here...</div>
  53     </core-header-panel>
  54
  55 To have the content fits to the main area, use `fit` attribute.
  56
  57     <core-header-panel>
  58       <div class="core-header">standard</div>
  59       <div class="content" fit>content fits 100% below the header</div>
  60     </core-header-panel>
  61
  62 Use `mode` to control the header and scrolling behavior.
  63
  64 @group Polymer Core Elements
  65 @element core-header-panel
  66 @homepage github.io
  67 -->
  68
  69 <link rel="import" href="../polymer/polymer.html">
  70
  71 <polymer-element name="core-header-panel" assetpath="">
  72 <template>
  73
  74   <link rel="stylesheet" href="core-header-panel.css">
  75
  76   <div id="outerContainer" on-scroll="{{scroll}}" vertical="" layout="">
  77
  78     <content id="headerContent" select="core-toolbar, .core-header"></content>
  79
  80     <div id="mainPanel" flex="" vertical="" layout="">
  81
  82       <div id="mainContainer" flex?="{{mode !== &apos;cover&apos;}}" on-scroll="{{scroll}}">
  83         <content id="mainContent" select="*"></content>
  84       </div>
  85
  86       <div id="dropShadow"></div>
  87
  88     </div>
  89
  90   </div>
  91
  92 </template>
  93
  94 </polymer-element>
  95 <script src="core-header-panel-extracted.js"></script>