third_party/polymer/v1_0/components-chromium/paper-scroll-header-panel/README.md - Issue 1187823002: Update Polymer components and re-run reproduce.sh

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

Issue 1187823002: Update Polymer components and re-run reproduce.sh (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master

Patch Set: Rebase 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-scroll-header-panel/.bower.json ('k') | third_party/polymer/v1_0/components-chromium/paper-scroll-header-panel/bower.json » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
1 paper-scroll-header-panel	1 paper-scroll-header-panel

2 ========================	2 ========================

3	3

4 `paper-scroll-header-panel` contains a header section and a content section. The header is initially on the top part of the view but it scrolls away with the re st of the scrollable content. Upon scrolling slightly up at any point, the heade r scrolls back into view. This saves screen space and allows users to access imp ortant controls by easily moving them back to the view.	4 `paper-scroll-header-panel` contains a header section and a content section. The header is initially on the top part of the view but it scrolls away with the re st of the scrollable content. Upon scrolling slightly up at any point, the heade r scrolls back into view. This saves screen space and allows users to access imp ortant controls by easily moving them back to the view.

5	5

6 Important: The `paper-scroll-header-panel` will not display if its parent does n ot have a height. Using layout classes, you can easily make the `paper-scroll-he ader-panel` fill the screen	6 Important: The `paper-scroll-header-panel` will not display if its parent does n ot have a height. Using layout classes, you can easily make the `paper-scroll-he ader-panel` fill the screen

7	7

8 ```html	8 ```html

9 <body class="fullbleed layout vertical">	9 <body class="fullbleed layout vertical">

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

11 <paper-toolbar>	11 <paper-toolbar>

12 Hello World!	12 Hello World!

13 </paper-toolbar>	13 </paper-toolbar>

14 </paper-scroll-header-panel>	14 </paper-scroll-header-panel>

15 </body>	15 </body>

16 ```	16 ```

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

18 ```css	18 ```css

19 html, body {	19 html, body {

20 height: 100%;	20 height: 100%;

21 margin: 0;	21 margin: 0;

22 }	22 }

23 paper-scroll-header-panel {	23 paper-scroll-header-panel {

24 height: 100%;	24 height: 100%;

25 }	25 }

26 ```	26 ```

27 `paper-scroll-header-panel` works well with `paper-toolbar` but can use any elem ent that represents a header by adding a core-header class to it.	27 `paper-scroll-header-panel` works well with `paper-toolbar` but can use any elem ent that represents a header by adding a `paper-header` class to it.

28	28

29 ```html	29 ```html

30 <paper-scroll-header-panel>	30 <paper-scroll-header-panel>

31 <paper-toolbar>Header</paper-toolbar>	31 <paper-toolbar>Header</paper-toolbar>

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

33 </paper-scroll-header-panel>	33 </paper-scroll-header-panel>

34 ```	34 ```

35	35

36 ### Styling scroll-header-panel:	36 ### Styling scroll-header-panel:

37	37

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

39	39

40 ```css	40 ```css

41 paper-scroll-header-panel {	41 paper-scroll-header-panel {

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

43 background-color: red;	43 background-color: red;

44 };	44 };

45 }	45 }

46 ```	46 ```

47	47

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

49	49

50 ```css	50 ```css

51 paper-scroll-header-panel {	51 paper-scroll-header-panel {

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

53 background-color: #f4b400;	53 background-color: #f4b400;

54 };	54 };

55 }	55 }

56 ```	56 ```

OLD	NEW