Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(169)

Issues Search
    My Issues | Starred     Open | Closed | All

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

Issue 1336623003: [MD settings] updating polymer to 1.1.13 (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: changed Polymer.IronCheckedElementBehavior name Created 5 years, 3 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/.bower.json ('k') | third_party/polymer/v1_0/components-chromium/paper-header-panel/bower.json » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 # paper-header-panel 1 # paper-header-panel
2 2
3 `paper-header-panel` contains a header section and a content panel section. 3 `paper-header-panel` contains a header section and a content panel section.
4 4
5 __Important:__ The `paper-header-panel` will not display if its parent does not have a height. 5 __Important:__ The `paper-header-panel` will not display if its parent does not have a height.
6 6
7 Using [layout classes](http://www.polymer-project.org/docs/polymer/layout-attrs. html), you can make 7 Using layout classes, you can make the `paper-header-panel` fill the screen
8 the `paper-header-panel` fill the screen
9 8
10 ```html 9 <body class="fullbleed layout vertical">
11 <body class="fullbleed layout vertical"> 10 <paper-header-panel class="flex">
12 <paper-header-panel class="flex"> 11 <paper-toolbar>
13 <paper-toolbar> 12 <div>Hello World!</div>
14 <div>Hello World!</div> 13 </paper-toolbar>
15 </paper-toolbar> 14 </paper-header-panel>
16 </paper-header-panel> 15 </body>
17 </body> 16
18 ``` 17 Special support is provided for scrolling modes when one uses a paper-toolbar or equivalent for the
18 header section.
19 19
20 Special support is provided for scrolling modes when one uses a `paper-toolbar` or equivalent for the header section. For example: 20 Example:
21 21
22 ```html 22 <paper-header-panel>
23 <paper-header-panel> 23 <paper-toolbar>Header</paper-toolbar>
24 <paper-toolbar>Header</paper-toolbar> 24 <div>Content goes here...</div>
25 <div>Content goes here...</div> 25 </paper-header-panel>
26 </paper-header-panel> 26
27 ``` 27
28 If you want to use other than `paper-toolbar` for the header, add `paper-header` class to that
29 element.
28 30
29 If you want to use other than `paper-toolbar` for the header, add `paper-header` class to that 31 Example:
30 element:
31 32
32 ```html 33 <paper-header-panel>
33 <paper-header-panel> 34 <div class="paper-header">Header</div>
34 <div class="paper-header">Header</div> 35 <div>Content goes here...</div>
35 <div>Content goes here...</div> 36 </paper-header-panel>
36 </paper-header-panel> 37
37 ``` 38 To have the content fit to the main area, use the `fit` class.
38 39
39 To have the content fit to the main area, use the `fit` class: 40 <paper-header-panel>
41 <div class="paper-header">standard</div>
42 <div class="fit">content fits 100% below the header</div>
43 </paper-header-panel>
44
45 ## Modes
40 46
41 ```html 47 Controls header and scrolling behavior. Options are `standard`, `seamed`, `water fall`, `waterfall-tall`, `scroll` and `cover`. Default is `standard`.
42 <paper-header-panel>
43 <div class="paper-header">standard</div>
44 <div class="content fit">content fits 100% below the header</div>
45 </paper-header-panel>
46 ```
47
48 ### Mode
49
50 Controls header and scrolling behavior. Options are `standard`, `seamed`, `water fall`, `waterfall-tall`, `scroll` and
51 `cover`. Default is `standard`.
52 48
53 Mode | Description 49 Mode | Description
54 ----------------|------------- 50 ----------------|-------------
55 `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. 51 `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.
56 `seamed` | The header is presented as seamed with the panel. 52 `seamed` | The header is presented as seamed with the panel.
57 `waterfall` | Similar to standard mode, but header is initially presented as sea med with panel, but then separates to form the step. 53 `waterfall` | Similar to standard mode, but header is initially presented as sea med with panel, but then separates to form the step.
58 `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). 54 `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).
59 `scroll` | The header keeps its seam with the panel, and is pushed off screen. 55 `scroll` | The header keeps its seam with the panel, and is pushed off screen.
60 `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. 56 `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.
61 57
62 Example: 58 Example:
63 59
64 ```html 60 <paper-header-panel mode="waterfall">
65 <paper-header-panel mode="waterfall"> 61 <div class="paper-header">standard</div>
66 <div class="paper-header">standard</div> 62 <div class="content fit">content fits 100% below the header</div>
67 <div class="content fit">content fits 100% below the header</div> 63 </paper-header-panel>
68 </paper-header-panel> 64
69 ``` 65 ## Styling header panel:
70
71 ### Styling header panel:
72 66
73 To change the shadow that shows up underneath the header: 67 To change the shadow that shows up underneath the header:
74 68
75 ```css 69 paper-header-panel {
76 paper-header-panel { 70 --paper-header-panel-shadow: {
77 --paper-header-panel-shadow: { 71 height: 6px;
78 height: 6px; 72 bottom: -6px;
79 bottom: -6px; 73 box-shadow: inset 0px 5px 6px -3px rgba(0, 0, 0, 0.4);
80 box-shadow: inset 0px 5px 6px -3px rgba(0, 0, 0, 0.4); 74 };
81 }; 75 }
82 } 76 To change the panel container in different modes:
83 ```
84 77
85 To change the panel container: 78 paper-slider {
79 --paper-header-panel-standard-container: {
80 border: 1px solid gray;
81 };
82 --paper-header-panel-seamed-container: {
83 border: 1px solid gray;
84 };
85 --paper-header-panel-waterfall-container: {
86 border: 1px solid gray;
87 };
88 --paper-header-panel-waterfall-tall-container: {
89 border: 1px solid gray;
90 };
91 --paper-header-panel-scroll-container: {
92 border: 1px solid gray;
93 };
94 --paper-header-panel-cover-container: {
95 border: 1px solid gray;
96 };
97 }
86 98
87 ```css
88 paper-slider {
89 --paper-header-panel-standard-container: {
90 border: 1px solid gray;
91 };
92
93 --paper-header-panel-cover-container: {
94 border: 1px solid gray;
95 };
96
97 --paper-header-panel-waterfall-container: {
98 border: 1px solid gray;
99 };
100
101 --paper-header-panel-waterfall-tall-container: {
102 border: 1px solid gray;
103 };
104 }
105 ```
OLDNEW
« no previous file with comments | « third_party/polymer/v1_0/components-chromium/paper-header-panel/.bower.json ('k') | third_party/polymer/v1_0/components-chromium/paper-header-panel/bower.json » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698