• Stars
    star
    598
  • Rank 74,853 (Top 2 %)
  • Language
    HTML
  • Created over 9 years ago
  • Updated about 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

App layout elements

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

More Repositories

1

iron-list

Element for a virtual, "infinite" list
JavaScript
219
star
2

app-route

A modular client-side router
HTML
146
star
3

neon-animation

Polymer + Web Animations
JavaScript
143
star
4

paper-button

A button à la Material Design
JavaScript
138
star
5

paper-input

A Material Design text field
JavaScript
130
star
6

iron-ajax

Easily make ajax requests
HTML
127
star
7

paper-styles

Shared styles for Material Design elements
JavaScript
107
star
8

iron-icons

A set of icons for use with iron-icon
HTML
105
star
9

paper-card

A Material Design piece of paper with unique related data
JavaScript
98
star
10

paper-elements

Material design UI elements implemented using Polymer
HTML
87
star
11

iron-flex-layout

Style mixins for cross-platform flex-box layouts
HTML
85
star
12

marked-element

Element wrapper for the marked library
HTML
84
star
13

generator-polymer-init-custom-build

A Polymer CLI generator for creating custom build processes with polymer-build
JavaScript
69
star
14

platinum-sw

Service Worker Polymer element
HTML
67
star
15

paper-tabs

Material Design tabs
HTML
65
star
16

iron-form

Custom form element
HTML
63
star
17

paper-dialog

A Material Design dialog
HTML
63
star
18

app-storage

Data-pipes and specialized services
JavaScript
61
star
19

app-media

Elements for accessing data from media input devices and visualizing that data for users
JavaScript
61
star
20

paper-dropdown-menu

A Material Design browser select element
JavaScript
61
star
21

paper-checkbox

A Material Design checkbox
HTML
58
star
22

paper-ripple

Adds a Material Design ripple effect to UI elements
JavaScript
57
star
23

paper-toast

A Material Design popup toast
HTML
53
star
24

app-pouchdb

Custom Elements for working with PouchDB.
HTML
49
star
25

app-localize-behavior

Polymer behaviour to help internationalize your application
HTML
48
star
26

iron-pages

Simple content switcher
HTML
48
star
27

iron-elements

Core elements
HTML
47
star
28

paper-slider

A Material Design slider
JavaScript
47
star
29

paper-icon-button

A Material Design icon button
JavaScript
42
star
30

paper-spinner

Material Design circular activity indicator
JavaScript
41
star
31

iron-overlay-behavior

Makes an element an overlay with an optional backdrop
HTML
41
star
32

paper-tooltip

A Material Design tooltip
HTML
40
star
33

paper-toolbar

A Material Design toolbar/appbar
JavaScript
40
star
34

iron-icon

Element that displays a single icon
HTML
40
star
35

paper-swatch-picker

A color picker with all the Material Design colours
JavaScript
39
star
36

iron-image

Image element with sizing and preloading options
HTML
37
star
37

iron-iconset-svg

Represents a source of icons expressed as a collection of inline SVGs
HTML
37
star
38

iron-component-page

A reusable landing page for elements
JavaScript
36
star
39

iron-dropdown

An unstyled element that works similarly to a native browser select
HTML
34
star
40

paper-item

Material Design list items
JavaScript
33
star
41

iron-input

An input with data binding
HTML
33
star
42

paper-fab

A material design floating action button
HTML
33
star
43

iron-selector

Manages a list of elements that can be selected
HTML
32
star
44

paper-progress

A Material Design progress
JavaScript
32
star
45

paper-badge

Material Design status descriptors for elements
HTML
31
star
46

iron-collapse

Adds collapsible behavior to a target element
HTML
27
star
47

paper-toggle-button

A Material Design toggle button
JavaScript
27
star
48

iron-test-helpers

Utility classes to make testing easier
JavaScript
26
star
49

iron-a11y-announcer

An element that helps with announcing text through screen readers.
JavaScript
26
star
50

iron-meta

Element for creating and accessing self-organizing meta-databases
HTML
25
star
51

iron-media-query

Data binding for a CSS Media Query
HTML
25
star
52

paper-drawer-panel

A Material Design two-section responsive panel
JavaScript
25
star
53

iron-swipeable-container

A container that allows any of its nested children to be swiped away.
HTML
25
star
54

paper-scroll-header-panel

Fancy scrolling effects where the header animates between tall and condensed states
JavaScript
24
star
55

paper-menu-button

An element that allows composing a trigger and content as a dropdown menu.
JavaScript
24
star
56

iron-a11y-keys-behavior

A behavior that enables keybindings for greater a11y
HTML
24
star
57

paper-header-panel

A Material Design panel with top and bottom panes
JavaScript
23
star
58

iron-location

A Polymer element that manages binding to the page's URL.
HTML
22
star
59

iron-scroll-threshold

Polymer element for triggering an event when nearing the beginning or end of a scrollable element
HTML
21
star
60

test-fixture

JavaScript
21
star
61

paper-listbox

HTML
21
star
62

paper-behaviors

Common behaviors used across paper-* elements.
HTML
19
star
63

paper-radio-button

A Material Design radio button
HTML
19
star
64

iron-autogrow-textarea

Textarea that grows in height as more lines of input are entered
JavaScript
19
star
65

iron-a11y-keys

A basic element implementation of iron-a11y-keys-behavior
JavaScript
19
star
66

paper-material

A Material Design container that looks like a lifted piece of paper
HTML
19
star
67

paper-radio-group

A group of Material Design radio buttons
HTML
19
star
68

iron-menu-behavior

Accessible menu behavior
HTML
18
star
69

paper-dialog-behavior

Makes an element a Material Design dialog
HTML
18
star
70

prism-element

Prism-based syntax highlighting
JavaScript
17
star
71

iron-fit-behavior

Fits an element into another element
HTML
17
star
72

gold-email-input

An input element that only allows emails
HTML
17
star
73

iron-doc-viewer

Polymer documentation viewer elements
JavaScript
17
star
74

font-roboto-local

JavaScript
16
star
75

iron-demo-helpers

Utility classes to make building demo pages easier
JavaScript
16
star
76

paper-dialog-scrollable

A scrollable area used in a Material Design dialog
HTML
15
star
77

iron-resizable-behavior

HTML
14
star
78

iron-jsonp-library

Loads jsonp libraries.
JavaScript
14
star
79

iron-behaviors

Behaviors that manage control states like 'focused', 'disabled', and 'active'
HTML
14
star
80

iron-iconset

Represents a source of icons expressed as a raster sprite sheet
JavaScript
13
star
81

gold-phone-input

An input element that only allows phone numbers
HTML
13
star
82

gold-cc-input

An input element that only allows credit card numbers
JavaScript
13
star
83

iron-localstorage

Access to localStorage
HTML
11
star
84

iron-validator-behavior

Implements a custom input or form validator
HTML
11
star
85

gold-elements

Business elements
9
star
86

neon-elements

Elements that implement special effects
9
star
87

iron-form-element-behavior

Behavior that enables an element to be included in an iron-form
JavaScript
9
star
88

iron-scroll-target-behavior

Polymer behavior that allows to define a scroller target
HTML
8
star
89

iron-range-behavior

Managing a numeric value within a given range
HTML
8
star
90

gold-cc-cvc-input

An input element that only allows cvc codes
HTML
8
star
91

iron-validatable-behavior

Implements an element validated with Polymer.IronValidatorBehavior
JavaScript
7
star
92

iron-label

A version of the <label> element that works with Custom Elements as well as native elements.
HTML
7
star
93

gold-cc-expiration-input

An input element that only allows credit card expiration dates
JavaScript
6
star
94

iron-checked-element-behavior

Implements an element that has a checked attribute and can be added to a form
HTML
5
star
95

app-elements

Application level elements
HTML
5
star
96

font-roboto

Loads the Roboto family of fonts from Google Fonts.
JavaScript
5
star
97

gold-zip-input

An input element that only allows US zip codes
JavaScript
5
star
98

platinum-elements

push notifications, offline usage, bluetooth and more.
4
star
99

paper-ui-elements

A collection of Material Design UI components
2
star
100

ContributionGuide

Canonical repo for the Polymer Elements contribution guide.
1
star