OLD | NEW |
| (Empty) |
1 | |
2 <!--- | |
3 | |
4 This README is automatically generated from the comments in these files: | |
5 paper-header-panel.html | |
6 | |
7 Edit those files, and our readme bot will duplicate them over here! | |
8 Edit this file, and the bot will squash your changes :) | |
9 | |
10 The bot does some handling of markdown. Please file a bug if it does the wrong | |
11 thing! https://github.com/PolymerLabs/tedium/issues | |
12 | |
13 --> | |
14 | |
15 [![Build status](https://travis-ci.org/PolymerElements/paper-header-panel.svg?br
anch=master)](https://travis-ci.org/PolymerElements/paper-header-panel) | |
16 | |
17 _[Demo and API docs](https://elements.polymer-project.org/elements/paper-header-
panel)_ | |
18 | |
19 | |
20 ##<paper-header-panel> | |
21 | |
22 `paper-header-panel` contains a header section and a content panel section. | |
23 | |
24 __Important:__ The `paper-header-panel` will not display if its parent does not
have a height. | |
25 | |
26 Using layout classes, you can make the `paper-header-panel` fill the screen | |
27 | |
28 ```html | |
29 <body class="fullbleed layout vertical"> | |
30 <paper-header-panel class="flex"> | |
31 <paper-toolbar> | |
32 <div>Hello World!</div> | |
33 </paper-toolbar> | |
34 </paper-header-panel> | |
35 </body> | |
36 ``` | |
37 | |
38 Special support is provided for scrolling modes when one uses a paper-toolbar or
equivalent for the | |
39 header section. | |
40 | |
41 Example: | |
42 | |
43 ```html | |
44 <paper-header-panel> | |
45 <paper-toolbar>Header</paper-toolbar> | |
46 <div>Content goes here...</div> | |
47 </paper-header-panel> | |
48 ``` | |
49 | |
50 If you want to use other than `paper-toolbar` for the header, add `paper-header`
class to that | |
51 element. | |
52 | |
53 Example: | |
54 | |
55 ```html | |
56 <paper-header-panel> | |
57 <div class="paper-header">Header</div> | |
58 <div>Content goes here...</div> | |
59 </paper-header-panel> | |
60 ``` | |
61 | |
62 To have the content fit to the main area, use the `fit` class. | |
63 | |
64 ```html | |
65 <paper-header-panel> | |
66 <div class="paper-header">standard</div> | |
67 <div class="fit">content fits 100% below the header</div> | |
68 </paper-header-panel> | |
69 ``` | |
70 | |
71 ### Modes | |
72 | |
73 Controls header and scrolling behavior. Options are `standard`, `seamed`, `water
fall`, `waterfall-tall`, `scroll` and | |
74 `cover`. Default is `standard`. | |
75 | |
76 | Mode | Description | | |
77 | --- | --- | | |
78 | `standard` | The header is a step above the panel. The header will consume the
panel at the point of entry, preventing it from passing through to the opposite
side. | | |
79 | `seamed` | The header is presented as seamed with the panel. | | |
80 | `waterfall` | Similar to standard mode, but header is initially presented as s
eamed with panel, but then separates to form the step. | | |
81 | `waterfall-tall` | The header is initially taller (`tall` class is added to th
e header). As the user scrolls, the header separates (forming an edge) while con
densing (`tall` class is removed from the header). | | |
82 | `scroll` | The header keeps its seam with the panel, and is pushed off screen.
| | |
83 | `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
covering the header. | | |
84 | |
85 Example: | |
86 | |
87 ```html | |
88 <paper-header-panel mode="waterfall"> | |
89 <div class="paper-header">standard</div> | |
90 <div class="content fit">content fits 100% below the header</div> | |
91 </paper-header-panel> | |
92 ``` | |
93 | |
94 ### Styling | |
95 | |
96 To change the shadow that shows up underneath the header: | |
97 | |
98 ```css | |
99 paper-header-panel { | |
100 --paper-header-panel-shadow: { | |
101 height: 6px; | |
102 bottom: -6px; | |
103 box-shadow: inset 0px 5px 6px -3px rgba(0, 0, 0, 0.4); | |
104 }; | |
105 } | |
106 ``` | |
107 | |
108 To change the panel container in different modes: | |
109 | |
110 ```css | |
111 paper-header-panel { | |
112 --paper-header-panel-standard-container: { | |
113 border: 1px solid gray; | |
114 }; | |
115 | |
116 --paper-header-panel-seamed-container: { | |
117 border: 1px solid gray; | |
118 }; | |
119 | |
120 --paper-header-panel-waterfall-container: { | |
121 border: 1px solid gray; | |
122 }; | |
123 | |
124 --paper-header-panel-waterfall-tall-container: { | |
125 border: 1px solid gray; | |
126 }; | |
127 | |
128 --paper-header-panel-scroll-container: { | |
129 border: 1px solid gray; | |
130 }; | |
131 | |
132 --paper-header-panel-cover-container: { | |
133 border: 1px solid gray; | |
134 }; | |
135 } | |
136 ``` | |
137 | |
138 The following custom properties and mixins are available for styling: | |
139 | |
140 | Custom property | Description | Default | | |
141 | --- | --- | --- | | |
142 | `--paper-header-panel` | Mixin applied to the element | `{}` | | |
143 | `--paper-header-panel-body` | Mixin applied to the element's body (i.e. everyt
hing below the toolbar) | `{}` | | |
144 | `--paper-header-panel-scroll-container` | Mixin applied to the container when
in scroll mode | `{}` | | |
145 | `--paper-header-panel-cover-container` | Mixin applied to the container when i
n cover mode | `{}` | | |
146 | `--paper-header-panel-standard-container` | Mixin applied to the container whe
n in standard mode | `{}` | | |
147 | `--paper-header-panel-seamed-container` | Mixin applied to the container when
in seamed mode | `{}` | | |
148 | `--paper-header-panel-waterfall-container` | Mixin applied to the container wh
en in waterfall mode | `{}` | | |
149 | `--paper-header-panel-waterfall-tall-container` | Mixin applied to the contain
er when in tall waterfall mode | `{}` | | |
150 | |
151 | |
OLD | NEW |