~didrocks/+junk/face-detection-15.04

[![Build status](https://travis-ci.org/PolymerElements/paper-header-panel.svg?branch=master)](https://travis-ci.org/PolymerElements/paper-header-panel)

_[Demo and API docs](https://elements.polymer-project.org/elements/paper-header-panel)_

##<paper-header-panel>

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

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

Using layout classes, you can make the `paper-header-panel` fill the screen

```html

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

<paper-toolbar>

<div>Hello World!</div>

</paper-toolbar>

</paper-header-panel>

</body>

```

Special support is provided for scrolling modes when one uses a paper-toolbar or equivalent for the

header section.

Example:

```html

<paper-header-panel>

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

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

</paper-header-panel>

```

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

element.

Example:

```html

<paper-header-panel>

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

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

</paper-header-panel>

```

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

```html

<paper-header-panel>

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

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

</paper-header-panel>

```

### Modes

Controls header and scrolling behavior. Options are `standard`, `seamed`, `waterfall`, `waterfall-tall`, `scroll` and

`cover`. Default is `standard`.

| Mode | Description |

| --- | --- |

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

| `seamed` | The header is presented as seamed with the panel. |

| `waterfall` | Similar to standard mode, but header is initially presented as seamed with panel, but then separates to form the step. |

| `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 condensing (`tall` class is removed from the header). |

| `scroll` | The header keeps its seam with the panel, and is pushed off screen. |

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

Example:

```html

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

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

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

</paper-header-panel>

```

### Styling

To change the shadow that shows up underneath the header:

```css

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. everything 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 in cover mode | `{}` |

146

| `--paper-header-panel-standard-container` | Mixin applied to the container when 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 when in waterfall mode | `{}` |

149

| `--paper-header-panel-waterfall-tall-container` | Mixin applied to the container when in tall waterfall mode | `{}` |

150

151

Older »