A collection of elements, along with guidelines and templates that can be used to structure your app’s layout.
$ bower install PolymerElements/app-layout --save
What is inside
app-box - A container element that can have scroll effects - visual effects based on scroll position.
app-drawer - A navigation drawer that can slide in from the left or right.
app-drawer-layout - A wrapper element that positions an app-drawer and other content.
app-grid - A helper class useful for creating responsive, fluid grid layouts using custom properties.
app-header - A container element for app-toolbars at the top of the screen that can have scroll effects - visual effects based on scroll position.
app-header-layout - A wrapper element that positions an app-header and other content.
app-toolbar - A horizontal toolbar containing items that can be used for label, navigation, search and actions.
The templates are a means to define, illustrate and share best practices in App Layout. Pick a template and customize it:
Sample code for various UI patterns:
Here are some web apps built with App Layout:
- Youtube Web
- Google I/O 2016
- Polymer project site
- Polymer summit
- Chrome Status
- Project Fi
- NASA Open Source Software
Tools and References
Changes in App Layout 2.0
Distribution is now done with slots, so things have changed because of that,
##### app-drawer-layout 1.x
<app-drawer-layout> <app-drawer>...</app-drawer> <div>content</div> </app-drawer-layout>
<app-drawer-layout> <app-drawer slot="drawer">...</app-drawer> <div>content</div> </app-drawer-layout>
##### app-header-layout 1.x
<app-header-layout> <app-header>...</app-header> <div>content</div> </app-header-layout>
<app-header-layout> <app-header slot="header">...</app-header> <div>content</div> </app-header-layout>
##### app-box 1.x
<app-box effects="..."> <img background ...> </app-box>
<app-box effects="..."> <img slot="background" ...> </app-box>
drawer-toggleelement needs to be manually hidden when
app-drawer-layoutis not in narrow layout. To add this, add the following CSS rule where
app-drawer-layout, if you specify a value for
--app-drawer-width, that value must be accessible by both
app-drawer-layout. This can be done by defining the value on the
:hostthat contains (or
htmlif outside a shadow root):
app-scrollpos-controlhas been removed from App Layout in favor of using multiple scrolling regions to preserve the scroll position. In terms of UX,
document.rootScrolleris a new web platform API that will allow non-document scroll to hide the address bar on mobile.