third_party/polymer/v1_0/components-chromium/paper-header-panel/paper-header-panel.html - Issue 1162963002: Revert "Rename polymer and cr_elements v0_8 to v1_0"

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

Issue 1162963002: Revert "Rename polymer and cr_elements v0_8 to v1_0" (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master

Patch Set: 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/v1_0/components-chromium/paper-header-panel/index.html ('k') | third_party/polymer/v1_0/components-chromium/paper-header-panel/paper-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) 2015 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 --><html><head><link rel="import" href="../polymer/polymer.html">

9 <link rel="import" href="../iron-flex-layout/iron-flex-layout.html">

10

11 <!--

12 `paper-header-panel` contains a header section and a content panel section.

13

14 __Important:__ The `paper-header-panel` will not display if its parent does not have a height.

15

16 Using layout classes, you can make the `paper-header-panel` fill the screen

17

18 <body class="fullbleed layout vertical">

19 <paper-header-panel class="flex">

20 <paper-toolbar>

21 <div>Hello World!</div>

22 </paper-toolbar>

23 </paper-header-panel>

24 </body>

25

26 Special support is provided for scrolling modes when one uses a paper-toolbar or equivalent for the

27 header section.

28

29 Example:

30

31 <paper-header-panel>

32 <paper-toolbar>Header</paper-toolbar>

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

34 </paper-header-panel>

35

36 If you want to use other than `paper-toolbar` for the header, add `paper-header` class to that

37 element.

38

39 Example:

40

41 <paper-header-panel>

42 <div class="paper-header">Header</div>

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

44 </paper-header-panel>

45

46 To have the content fit to the main area, use the `fit` class.

47

48 <paper-header-panel>

49 <div class="paper-header">standard</div>

50 <div class="fit">content fits 100% below the header</div>

51 </paper-header-panel>

52

53 Modes

54

55 Controls header and scrolling behavior. Options are `standard`, `seamed`, `water fall`, `waterfall-tall`, `scroll` and

56 `cover`. Default is `standard`.

57

58 Mode \| Description

59 ----------------\|-------------

60 `standard` \| The header is a step above the panel. The header will consume the p anel at the point of entry, preventing it from passing through to the opposite s ide.

61 `seamed` \| The header is presented as seamed with the panel.

62 `waterfall` \| Similar to standard mode, but header is initially presented as sea med with panel, but then separates to form the step.

63 `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 conde nsing (`tall` class is removed from the header).

64 `scroll` \| The header keeps its seam with the panel, and is pushed off screen.

65 `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 co vering the header.

66

67 Example:

68

69 <paper-header-panel mode="waterfall">

70 <div class="paper-header">standard</div>

71 <div class="content fit">content fits 100% below the header</div>

72 </paper-header-panel>

73

74

75 Styling header panel:

76

77 To change the shadow that shows up underneath the header:

78

79 paper-header-panel {

80 --paper-header-panel-shadow: {

81 height: 6px;

82 bottom: -6px;

83 box-shadow: inset 0px 5px 6px -3px rgba(0, 0, 0, 0.4);

84 };

85 }

86

87 To change the panel container in different modes:

88

89 paper-slider {

90 --paper-header-panel-standard-container: {

91 border: 1px solid gray;

92 };

93

94 --paper-header-panel-cover-container: {

95 border: 1px solid gray;

96 };

97

98 --paper-header-panel-waterfall-container: {

99 border: 1px solid gray;

100 };

101

102 --paper-header-panel-waterfall-tall-container: {

103 border: 1px solid gray;

104 };

105 }

106

107 @group Paper Elements

108 @element paper-header-panel

109 @demo demo/index.html

110 @hero hero.svg

111 -->

112

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

114

115 <style>

116 :host {

117 @apply(--layout);

118 @apply(--layout-vertical);

119

120 display: block;

121 position: relative;

122 height: 100%;

123

124 /* Create a stack context, we will need it for the shadow*/

125 z-index: 0;

126 }

127

128 #mainContainer {

129 @apply(--layout-flex);

130

131 position: relative;

132 overflow-y: auto;

133 overflow-x: hidden;

134 -webkit-overflow-scrolling: touch;

135 flex-basis: 0.0001px;

136 }

137

138 /*

139 * mode: scroll

140 */

141 :host([mode=scroll]) #mainContainer {

142 @apply(--paper-header-panel-scroll-container);

143 overflow: visible;

144 }

145

146 :host([mode=scroll]) {

147 overflow-y: auto;

148 overflow-x: hidden;

149 -webkit-overflow-scrolling: touch;

150 }

151

152 /*

153 * mode: cover

154 */

155 :host([mode=cover]) #mainContainer {

156 @apply(--paper-header-panel-cover-container);

157 position: absolute;

158 top: 0;

159 right: 0;

160 bottom: 0;

161 left: 0;

162 }

163

164 /*

165 * mode: standard

166 */

167 :host([mode=standard]) #mainContainer {

168 @apply(--paper-header-panel-standard-container);

169 }

170

171 /*

172 * mode: waterfall

173 */

174 :host([mode=waterfall]) #mainContainer {

175 @apply(--paper-header-panel-waterfall-container);

176 }

177

178 /*

179 * mode: waterfall-tall

180 */

181 :host([mode=waterfall-tall]) #mainContainer {

182 @apply(--paper-header-panel-waterfall-tall-container);

183 }

184

185 :host ::content paper-toolbar,

186 :host ::content .paper-header {

187 position: relative;

188 overflow: visible !important;

189 }

190

191 :host ::content paper-toolbar:after,

192 :host ::content .paper-header:after {

193 @apply(--paper-header-panel-shadow);

194

195 -webkit-transition: opacity 0.5s, -webkit-transform 0.5s;

196 transition: opacity 0.5s, transform 0.5s;

197

198 opacity: 0;

199 content: "";

200

201 width: 100%;

202 position: absolute;

203 left: 0px;

204 right: 0px;

205 z-index: 1;

206

207 -webkit-transform: scale3d(1, 0, 1);

208 -webkit-transform-origin: 0% 0%;

209

210 transform: scale3d(1, 0, 1);

211 transform-origin: 0% 0%;

212 }

213

214 :host ::content paper-toolbar.has-shadow:after,

215 :host ::content .paper-header.has-shadow:after {

216 opacity: 1;

217 -webkit-transform: scale3d(1, 1, 1);

218 transform: scale3d(1, 1, 1);

219 }

220 </style>

221

222 <template>

223 <content id="headerContent" select="paper-toolbar, .paper-header"></content>

224 <div id="mainContainer" class$="[[_computeMainContainerClass(mode)]]">

225 <content id="mainContent" select="*"></content>

226 </div>

227 </template>

228

229 </dom-module>

230

231 <style is="custom-style">

232 :root {

233 /**

234 * Default paper header panel shadow

235 */

236 --paper-header-panel-shadow: {

237 height: 6px;

238 bottom: -6px;

239 box-shadow: inset 0px 5px 6px -3px rgba(0, 0, 0, 0.4);

240 };

241 }

242 </style>

243

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

OLD	NEW