A collection of elements, along with guidelines and templates that can be used to structure your app’s layout.
-
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:
-
Transform navigation: As more screen space is available, side navigation can transform into tabs. (Demo - Source)
-
Expand Card: Content cards may expand to take up more horizontal space. (Demo - Source)
-
Material Design Responsive Toolbar: Toolbar changes its height and padding to adapt mobile screen size. (Demo - Source)
Here are some web apps built with App Layout:
- Youtube Web
- Google I/O 2016
- Polymer project site
- Polymer summit
- Shop
- News
- webcomponents.org
- Chrome Status
- Project Fi
- NASA Open Source Software
See: Documentation, Demo.
npm install --save @polymer/app-layout <html> <head> <script type="module"> import '@polymer/app-layout/app-layout.js'; </script> </head> <body> <app-header reveals> <app-toolbar> <div main-title>My app</div> </app-toolbar> </app-header> <app-drawer id="drawer" swipe-open></app-drawer> </body> </html>import {PolymerElement, html} from '@polymer/polymer'; import '@polymer/app-layout/app-layout.js'; class SampleElement extends PolymerElement { static get template() { return html` <app-header reveals> <app-toolbar> <div main-title>My app</div> </app-toolbar> </app-header> <app-drawer id="drawer" swipe-open></app-drawer> `; } } customElements.define('sample-element', SampleElement);If you want to send a PR to this element, here are the instructions for running the tests and demo locally:
git clone https://github.com/PolymerElements/app-layout cd app-layout npm install npm install -g polymer-clipolymer serve --npm open http://127.0.0.1:<port>/demo/polymer test --npm