third_party/polymer/v1_0/components/paper-header-panel/README.md - Issue 1269803005: Remove third_party/polymer from .gitignore

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

Issue 1269803005: Remove third_party/polymer from .gitignore (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master

Patch Set: Created 5 years, 4 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/paper-header-panel/.gitignore ('k') | third_party/polymer/v1_0/components/paper-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
	(Empty)
1 # paper-header-panel

2

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

4

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

6

7 Using [layout classes](http://www.polymer-project.org/docs/polymer/layout-attrs. html), you can make

8 the `paper-header-panel` fill the screen

9

10 ```html

11 <body class="fullbleed layout vertical">

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

13 <paper-toolbar>

14 <div>Hello World!</div>

15 </paper-toolbar>

16 </paper-header-panel>

17 </body>

18 ```

19

20 Special support is provided for scrolling modes when one uses a `paper-toolbar` or equivalent for the header section. For example:

21

22 ```html

23 <paper-header-panel>

24 <paper-toolbar>Header</paper-toolbar>

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

26 </paper-header-panel>

27 ```

28

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

30 element:

31

32 ```html

33 <paper-header-panel>

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

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

36 </paper-header-panel>

37 ```

38

39 To have the content fit to the main area, use the `fit` class:

40

41 ```html

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

53 Mode \| Description

54 ----------------\|-------------

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.

56 `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.

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).

59 `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.

61

62 Example:

63

64 ```html

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

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

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

68 </paper-header-panel>

69 ```

70

71 ### Styling header panel:

72

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

74

75 ```css

76 paper-header-panel {

77 --paper-header-panel-shadow: {

78 height: 6px;

79 bottom: -6px;

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

81 };

82 }

83 ```

84

85 To change the panel container:

86

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 ```

OLD	NEW