@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/iron-flex-layout @polymer/iron-media-query @polymer/iron-resizable-behavior @polymer/iron-scroll-target-behavior @polymer/polymer

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

5 years ago

5 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

7 years ago

7 years ago

7 years ago

7 years ago