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