@polymer/app-layout NPM

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:

Getting started (Demo - Source)
Landing page (Demo - Source)
Publishing: Zuperkülblog (Demo - Source)
Shop: Shrine (Demo - Source)
Blog: Pesto (Demo - Source)
Scroll effects: Test drive (Demo - Source)

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

@polymer/polymer @polymer/iron-flex-layout @polymer/iron-media-query @polymer/iron-resizable-behavior @polymer/iron-scroll-target-behavior

zagenzagen-production playtwo-core-cms-sections @navigateconsulting/eva-bot zagen-zagen @teipublisher/pb-components7 @infinitebrahmanuniverse/nolb-_pol @everything-registry/sub-chunk-731 @boluabraham/fhir-navbar vowo-submenu-dialog @dorgtech/daosmind @cwmr/paper-search @anviltech/wuf-poly-paper-elements @anypoint-web-components/api-console @advanced-rest-client/arc-app-mixin unity-core-beta @feezal/feezal-element-app-layout @feezal/feezal-element-paper-app-layout @haxtheweb/outline-player @haxtheweb/paper-search @haxtheweb/simple-drawer @haxtheweb/lrnsys-comment @haxtheweb/lrnsys-layout @haxtheweb/haxcms-elements @haxtheweb/haxor-slevin @haxtheweb/learn-two-theme @flowingcode/fc-applayout @hatiolab/things-shell @heyokaysaturday/test-components @hydrofoil/hydrofoil-paper-shell @iconica/iconicaelements @l9/layout @l9/page @lrnwebcomponents/lrnsys-comment @lrnwebcomponents/lrnsys-layout @lrnwebcomponents/lrndesign-contentsequencer @lrnwebcomponents/lrndesign-drawer @lrnwebcomponents/lrnapp-book @lucentray/pine-web-components @lrnwebcomponents/haxcms-elements @lrnwebcomponents/haxor-slevin @lrnwebcomponents/game-show-quiz @lrnwebcomponents/eco-json-schema-form @lrnwebcomponents/learn-two-theme @lrnwebcomponents/contenta-polymer @longlost/app-header-overlay @longlost/app-overlays @longlost/app-shell @lrnwebcomponents/simple-drawer @lrnwebcomponents/paper-search @lrnwebcomponents/pdf-element @lrnwebcomponents/per-spec-tive @lrnwebcomponents/outline-player @navigateconsulting/web-channel @moduware/morph-sidebar @juanbeato/jb-layout @rwestlund/responsive-dialog @rammbulanz/lit-app-layout @polymer/app-elements @polymer/iron-component-page @polymer/polymer-starter-kit @nuskin/ns-dev-portal @nuskin/ns-app-elements @shifang2013/log-in @spriteful/app-header-overlay @spriteful/app-shell @spriteful/spriteful-app-shell @spriteful/spriteful-header-overlay @smyd/app-overlays @smyd/app-shell @silverlinkz/sl-gallery @sibley/myuw-app-bar @sdl-web/sdl-hello-vue mumaa-dialog micro-fabric-ux oe-studio sdl-hello-vue pwa-shell nodecg polymer-starter-kit polymer-starter-kit-publish-demo globular-mvc allianz-charts api-console homeassistant-frontend-raceland @teipublisher/pb-components @vowo/vowo-submenu-dialog @things-real/shell @things-shell/real-modeller @things-shell/board-modeller @wonkytech/wired-elements boo-color-selector fhir-navbar

6 years ago

6 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

8 years ago

8 years ago

8 years ago

8 years ago