app-header-layout

<app-header-layout>

app-header-layout is a wrapper element that positions an app-header and other content. This element uses the document scroll by default, but it can also define its own scrolling region.

Using the document scroll:

<app-header-layout>
  <app-header slot="header" fixed condenses effects="waterfall">
    <app-toolbar>
      <div main-title>App name</div>
    </app-toolbar>
  </app-header>
  <div>
    main content
  </div>
</app-header-layout>

Using an own scrolling region:

<app-header-layout has-scrolling-region style="width: 300px; height: 400px;">
  <app-header slot="header" fixed condenses effects="waterfall">
    <app-toolbar>
      <div main-title>App name</div>
    </app-toolbar>
  </app-header>
  <div>
    main content
  </div>
</app-header-layout>

Add the fullbleed attribute to app-header-layout to make it fit the size of its container:

<app-header-layout fullbleed>
 ...
</app-header-layout>