CODEWITHSUNDEEP
polymerpolymer-1.0web-componentpaper-elements
costrouc
costrouc

Reputation: 3175

Clarification between Polymer app layout elements and similar paper elements

I have been working using many of the elements provided by the Polymer team. I have seen documentation that shows using app-layout elements and others that show the same thing achieved using paper elements.

For example paper-drawer-panel is very similar to app-drawer. The paper element appears to have more configuration options and allows for multiple paper-drawer-panel elements embedded within each other as opposed to the less flexible app-drawer.

<paper-drawer-panel>
    <div drawer> Drawer panel... </div>
    <div main> Main panel... </div>
</paper-drawer-panel>

vs.

<main>Main panel....</main>
<app-drawer>Drawer panel... </app-drawer>

Is there a reason to prefer app-layout elements over the similar yet more flexible paper elements?

Upvotes: 1

Views: 549

Answers (1)

akc42
akc42

Reputation: 5001

I think the <app-*> elements were developed later in response to requests for standard templates for apps. I suspect some of it is just name changing to make it easier to understand.

In particular I have been using 

<app-header-layout>
  <app-header
    fixed
    effects="waterfall">
    <app-toolbar>
    ...
    </app-toolbar>
 </app-header>
 ... my main content
</app-header-layout>

with great effect. You can actually add several toolbars and some of the effects allow fading from one toolbar to the other as the headers scroll up (including a background image that fades away).

My <app-toolbar> contains all sorts of things including drop down menus.

I also found it easier like this to understand how to make lazy loading work. In fact my content only contains a "session manager" element and a "pages" element, the latter of which is only lazily loaded after the session manager has successfully validated a user (via cookie or login). That pages element has an embedded <iron-pages> and <app-location> and <app-route> to do all management of the application post login.

Upvotes: 1

Related Questions