Nonstick Pancake Maker

    @polymer/app-layout
    TypeScript icon, indicating that this package has built-in type declarations

    3.1.0 • Public • Published

    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

    Keywords

    none

    Install

    npm i @polymer/app-layout

    DownloadsWeekly Downloads

    5,931

    Version

    3.1.0

    License

    BSD-3-Clause

    Unpacked Size

    1.53 MB

    Total Files

    158

    Last publish

    Collaborators

    • aomarks
    • emarquez
    • sorvell
    • bicknellr
    • usergenic
    • polymer-devs
    • azakus
    • kevinpschaaf
    • justinfagnani