Name: paper-header-panel
Owner: PolymerElements
Description: A Material Design panel with top and bottom panes
Created: 2015-04-16 19:28:20.0
Updated: 2018-04-10 23:12:58.0
Pushed: 2018-05-23 02:35:58.0
Size: 227
Language: HTML
GitHub Committers
| User | Most Recent Commit | # Commits |
|---|
Other Committers
| User | Most Recent Commit | # Commits |
|---|
This element has been deprecated in favor of app-layout.
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
<body class="fullbleed layout vertical">
<paper-header-panel class="flex">
<paper-toolbar slot="header">
<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:
<paper-header-panel>
<paper-toolbar slot="header">Header</paper-toolbar>
<div>Content goes here...</div>
</paper-header-panel>
To have the content fit to the main area, use the fit class.
Example:
<paper-header-panel>
<div slot="header">standard</div>
<div class="fit">content fits 100% below the header</div>
</paper-header-panel>
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.
To change the shadow that shows up underneath the header:
paper-header-panel {
--paper-header-panel-shadow: {
height: 6px;
bottom: -6px;
box-shadow: inset 0px 5px 6px -3px rgba(0, 0, 0, 0.4);
};
}
To change the panel container:
paper-header-panel {
--paper-header-panel-container: {
border: 1px solid gray;
};
To change the panel container in different modes:
paper-header-panel {
--paper-header-panel-standard-container: {
border: 1px solid gray;
};
--paper-header-panel-seamed-container: {
border: 1px solid gray;
};
--paper-header-panel-waterfall-container: {
border: 1px solid gray;
};
--paper-header-panel-waterfall-tall-container: {
border: 1px solid gray;
};
--paper-header-panel-scroll-container: {
border: 1px solid gray;
};
--paper-header-panel-cover-container: {
border: 1px solid gray;
};
}
The following custom properties and mixins are available for styling:
Custom property | Description | Default
—————-|————-|———-
--paper-header-panel | Mixin applied to the element | {}
--paper-header-panel-body | Mixin applied to the element's body (i.e. everything below the toolbar) | {}
--paper-header-panel-container | Mixin applied to the container in any mode | {}
--paper-header-panel-scroll-container | Mixin applied to the container when in scroll mode | {}
--paper-header-panel-cover-container | Mixin applied to the container when in cover mode | {}
--paper-header-panel-standard-container | Mixin applied to the container when in standard mode | {}
--paper-header-panel-seamed-container | Mixin applied to the container when in seamed mode | {}
--paper-header-panel-waterfall-container | Mixin applied to the container when in waterfall mode | {}
--paper-header-panel-waterfall-tall-container | Mixin applied to the container when in tall waterfall mode | {}
--paper-header-panel-shadow | Mixin applied to the waterfall shadow | {}
Distribution of the header is now done with slot="header" attribute (previously, paper-toolbar or another element with the .paper-header class would be distributed):
<paper-header-panel>
<paper-toolbar slot="header">Header</paper-toolbar>
<div>Content goes here...</div>
</paper-header-panel>