third_party/polymer/v0_8/components-chromium/paper-scroll-header-panel/paper-scroll-header-panel.html - Issue 1155683008: Rename polymer and cr_elements v0_8 to v1_0

Side by Side Diff: third_party/polymer/v0_8/components-chromium/paper-scroll-header-panel/paper-scroll-header-panel.html

Issue 1155683008: Rename polymer and cr_elements v0_8 to v1_0 (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@v1

Patch Set: fix a merge mistake Created 5 years, 6 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/v0_8/components-chromium/paper-scroll-header-panel/index.html ('k') | third_party/polymer/v0_8/components-chromium/paper-scroll-header-panel/paper-scroll-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 @license

3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.

4 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE.txt

5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt

6 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS.txt

7 Code distributed by Google as part of the polymer project is also

8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt

9 --><html><head><link rel="import" href="../polymer/polymer.html">

10 <link rel="import" href="../iron-resizable-behavior/iron-resizable-behavior.html ">

11

12 <!--

13 `paper-scroll-header-panel` contains a header section and a content section. Th e

14 header is initially on the top part of the view but it scrolls away with the

15 rest of the scrollable content. Upon scrolling slightly up at any point, the

16 header scrolls back into view. This saves screen space and allows users to

17 access important controls by easily moving them back to the view.

18

19 __Important:__ The `paper-scroll-header-panel` will not display if its parent do es not have a height.

20

21 Using [layout attributes](http://www.polymer-project.org/docs/polymer/layout-att rs.html), you can easily make the `paper-scroll-header-panel` fill the screen

22

23 <body class="fullbleed layout vertical">

24 <paper-scroll-header-panel class="flex">

25 <paper-toolbar>

26 <div>Hello World!</div>

27 </paper-toolbar>

28 </paper-scroll-header-panel>

29 </body>

30

31 or, if you would prefer to do it in CSS, just give `html`, `body`, and `paper-sc roll-header-panel` a height of 100%:

32

33 html, body {

34 height: 100%;

35 margin: 0;

36 }

37 paper-scroll-header-panel {

38 height: 100%;

39 }

40

41 `paper-scroll-header-panel` works well with `paper-toolbar` but can use any elem ent

42 that represents a header by adding a `core-header` class to it.

43

44 <paper-scroll-header-panel>

45 <paper-toolbar>Header</paper-toolbar>

46 <div>Content goes here...</div>

47 </paper-scroll-header-panel>

48

49 Styling scroll-header-panel:

50

51 To change background for toolbar when it is at its full size:

52

53 paper-scroll-header-panel {

54 --paper-scroll-header-panel-full-header: {

55 background-color: red;

56 };

57 }

58

59 To change the background for toolbar when it is condensed:

60

61 paper-scroll-header-panel {

62 --paper-scroll-header-panel-condensed-header: {

63 background-color: #f4b400;

64 };

65 }

66

67 @group Paper Element

68 @element paper-scrollheader-panel

69 @demo demo/index.html

70 @hero hero.svg

71 -->

72

73 </head><body><dom-module id="paper-scroll-header-panel">

74

75 <style>

76 :host {

77 display: block;

78 position: relative;

79 overflow: hidden;

80 }

81

82 #mainContainer {

83 position: absolute;

84 top: 0;

85 right: 0;

86 bottom: 0;

87 left: 0;

88 box-sizing: border-box;

89 -moz-box-sizing: border-box;

90 -webkit-overflow-scrolling: touch;

91 overflow-x: hidden;

92 overflow-_y: auto;

93 -webkit-transform: translateZ(0);

94 transform: translateZ(0);

95 }

96

97 #headerContainer {

98 position: absolute;

99 top: 0;

100 right: 0;

101 left: 0;

102 }

103

104 .bg-container {

105 position: absolute;

106 top: 0;

107 left: 0;

108 width: 100%;

109 height: 100%;

110 overflow: hidden;

111 }

112

113 #headerBg {

114 @apply(--paper-scroll-header-panel-full-header);

115 }

116

117 #condensedHeaderBg {

118 @apply(--paper-scroll-header-panel-condensed-header);

119 }

120

121 #headerBg, #condensedHeaderBg {

122 position: absolute;

123 top: 0;

124 left: 0;

125 width: 100%;

126 height: 100%;

127 background-repeat: no-repeat;

128 background-size: cover;

129 background-position: center center;

130 }

131

132 #condensedHeaderBg {

133 opacity: 0;

134 }

135 </style>

136 <template>

137 <div id="mainContainer">

138 <content id="mainContent" select=":not(paper-toolbar):not(.paper-header)"> </content>

139 </div>

140 <div id="headerContainer">

141 <div class="bg-container">

142 <div id="condensedHeaderBg"></div>

143 <div id="headerBg"></div>

144 </div>

145 <content id="headerContent" select="paper-toolbar, .paper-header"></conten t>

146 </div>

147 </template>

148 </dom-module>

149

150 <script src="paper-scroll-header-panel-extracted.js"></script></body></html>

OLD	NEW