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