Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github Create CODEOWNERS Jan 24, 2018
app-box Fix markdown table in comments Jul 17, 2018
app-drawer-layout Remove dom=shadow tests Jul 17, 2018
app-drawer Remove dom=shadow tests Jul 17, 2018
app-grid Remove app-header condenses from examples where it wouldn't have effect Dec 7, 2018
app-header-layout Remove app-header condenses from examples where it wouldn't have effect Dec 7, 2018
app-header Remove app-header condenses from examples where it wouldn't have effect Dec 7, 2018
app-layout-behavior Avoid importing the same file twice Sep 7, 2018
app-scroll-effects Reset threshold-triggered on attached Nov 26, 2018
app-toolbar Remove dom=shadow tests Jul 17, 2018
demo Fix format Aug 16, 2018
helpers Remove dom=shadow tests Jul 17, 2018
patterns Remove `=""` from boolean attributes. Aug 7, 2018
templates Remove `=""` from boolean attributes. Aug 7, 2018
test Manual updates for 3.0 Jun 29, 2018
.gitignore Tedium automated v3 element updates. Aug 16, 2018
.npmignore Tedium automated v3 element updates. Aug 16, 2018
.travis.yml Only generate types once on Travis Sep 7, 2018
CONTRIBUTING.md [skip ci] Update contribution guide May 17, 2016
README.md Use full links to GH in README [fix #561] Oct 24, 2018
app-layout.js Manual updates for 3.0 Jun 29, 2018
bower.json Add `bower.json` so that webcomponents.org can read the repo. Sep 14, 2018
formatconfig.json Fix markdown table in comments Jul 17, 2018
gen-tsd.json Remove non-interesting files Mar 20, 2018
manifest.json auto-converted by polymer-modulizer Jun 23, 2018
package-lock.json v3.0.2 Nov 27, 2018
package.json v3.0.2 Nov 27, 2018
wct.conf.json Update WCT config May 23, 2018

README.md

Published on NPM Build status Published on webcomponents.org

App Layout

A collection of elements, along with guidelines and templates that can be used to structure your app’s layout.

What is inside

Elements

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

Templates

The templates are a means to define, illustrate and share best practices in App Layout. Pick a template and customize it:

Patterns

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)

Users

Here are some web apps built with App Layout:

See: Documentation, Demo.

Usage

Installation

npm install --save @polymer/app-layout

In an html file

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

In a Polymer 3 element

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

Contributing

If you want to send a PR to this element, here are the instructions for running the tests and demo locally:

Installation

git clone https://github.com/PolymerElements/app-layout
cd app-layout
npm install
npm install -g polymer-cli

Running the demo locally

polymer serve --npm
open http://127.0.0.1:<port>/demo/

Running the tests

polymer test --npm