third_party/polymer/v1_0/components-chromium/paper-header-panel/README.md - Issue 1834313003: Remove unneeded files from third_party/polymer.

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

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

Patch Set: Restore bower.json files. Created 4 years, 8 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/CONTRIBUTING.md ('k') | third_party/polymer/v1_0/components-chromium/paper-header-panel/hero.svg » ('j') | third_party/polymer/v1_0/extract_inline_scripts.sh » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

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