third_party/polymer/components-chromium/core-header-panel/core-header-panel.html - Issue 592593002: Inline scripts were extracted from Polymer elements.

Side by Side Diff: third_party/polymer/components-chromium/core-header-panel/core-header-panel.html

Issue 592593002: Inline scripts were extracted from Polymer elements. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master

Patch Set: s/echo ""/echo/ Created 6 years, 2 months ago

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Jump to:

View unified diff | Download patch

« no previous file with comments | « third_party/polymer/components-chromium/core-header-panel/core-header-panel.css ('k') | third_party/polymer/components-chromium/core-header-panel/core-header-panel-extracted.js » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
(Empty)
	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.g ithub.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/CONTRI BUTORS.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/PATEN TS.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 h ave a height.

	14

	15 Using [layout attributes](http://www.polymer-project.org/docs/polymer/layout-att rs.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-hea der-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 !== 'cover'}}" 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>

OLD	NEW