App Layout

http://polymerlabs.github.io/app-layout/

It's a set of experimental layout elements for your app. It includes:

• app-toolbar
• app-header
• app-header-layout
• app-drawer
• app-drawer-layout
• app-scrim

$ bower install PolymerLabs/app-layout --save

app-toolbar is a horizontal bar containing items that can be used for label, navigation, search and actions.

Add a title to the toolbar

<app-toolbar>
  <div title>App name</div>
</app-toolbar>

Add a button in the left and right side of the toolbar

<app-toolbar>
  <paper-icon-button icon="menu"></paper-icon-button>
  <div title class="flex">App name</div>
  <paper-icon-button icon="search"></paper-icon-button>
</app-toolbar>

You can use the attributes top-item or bottom-item to completely fit an element to the top or bottom of the toolbar respectively.

The following custom properties available for styling:

app-header is a container for app-toolbar. It can add effects to the toolbars based on the scroll position.

Condense the header when the user scrolls

<app-header condenses>
  <app-toolbar>
    <div title>App name</div>
  </app-toolbar>
</app-drawer>

app-header-layout is a layout element that contains a header and a content. This layout element uses the document scroll by default, but this element can also define its own scrolling region.

Using the document scroll

<app-header-layout>
  <app-header condenses waterfall>
    <app-toolbar>
      <div title>App name</div>
    </app-toolbar>
  </app-header>
  <div>
    <!-- content goes here -->
  </div>
</app-header-layout>

Using an own scrolling region

<app-header-layout has-scrolling-region class="fit">
  <app-header condenses waterfall>
    <app-toolbar>
      <div title>App name</div>
    </app-toolbar>
  </app-header>
  <div>
    <!-- content goes here -->
  </div>
</app-header-layout>

app-drawer is a navigation drawers that can slide in from the left, right, bottom or top.

Add a drawer in the left side of the screen

<app-drawer position="left" opened></app-drawer>

Add a drawer in the right side of the screen

<app-drawer position="right" opened></app-drawer>

app-drawer has the following custom properties for styling:

app-drawer-layout is a layout element that contains a drawer and a main 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 in the left side of the screen

<app-drawer-layout>
    <div drawer>
        <!-- drawer content -->
    </div>
    <div main>
        <!-- main content -->
    </div>
</app-drawer-layout>

app-scrim is a transparent layer behind overlays that helps to create focus on the content.

<app-scrim visible></app-toolbar>

app-scrim has the following custom properties for styling: