<app-drawer-layout>¶ ↑
app-drawer-layout is a wrapper element that positions an app-drawer and other content. When the viewport width is smaller than responsiveWidth
, this element changes to narrow layout. In narrow layout, the drawer will be stacked on top of the main content. The drawer will slide in/out to hide/reveal the main content.
By default the drawer is aligned to the start, which is left in LTR layouts:
<app-drawer-layout> <app-drawer> drawer content </app-drawer> <div> main content </div> </app-drawer-layout>
Align the drawer at the end:
<app-drawer-layout> <app-drawer align="end"> drawer content </app-drawer> <div> main content </div> </app-drawer-layout>
With an app-header-layout:
<app-drawer-layout> <app-drawer> drawer-content </app-drawer> <app-header-layout> <app-header> <app-toolbar> <div main-title>App name</div> </app-toolbar> </app-header> main content </app-header-layout> </app-drawer-layout>
Add the drawer-toggle
attribute to elements inside app-drawer-layout
that toggle the drawer on tap events:
<app-drawer-layout> <app-drawer> drawer-content </app-drawer> <app-header-layout> <app-header> <app-toolbar> <paper-icon-button icon="menu" drawer-toggle></paper-icon-button> <div main-title>App name</div> </app-toolbar> </app-header> main content </app-header-layout> </app-drawer-layout>
Add the fullbleed
attribute to app-drawer-layout to make it fit the size of its container:
<app-drawer-layout fullbleed> <app-drawer> drawer content </app-drawer> <div> main content </div> </app-drawer-layout>
Styling¶ ↑
Custom property | Description | Default —————————————–|————————————–|——— --app-drawer-layout-content-transition
| Transition for the content container | none