Skip to content

cbiesinger/paper-header-panel

 
 

Repository files navigation

Build Status

Demo and API Docs

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

<body class="fullbleed layout vertical">
  <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:

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

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

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

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

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 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;
  };
}

About

A Material Design panel with top and bottom panes

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages

  • HTML 100.0%