Polymer app-layout Elements

Looking at the Polymer app-layout elements I have to say these are pretty cool! Some of it is old news because it was/is supported via the paper-drawer-panel, paper-header and paper-toolbar elements. However by taking the lessons learned with those elements and creating their “app” siblings I think it makes for a much nicer implementation.

The basic use of the app-layout elements would look something like this:

<app-drawer-layout id="layout" narrow="{{drawerClosed}}" fullbleed>
  <!-- Drawer content -->
  <app-drawer id="drawer">
    <app-toolbar>
      <a href="/view1" top-item>
        <img src="../images/Logo.png" />
      </a>
    </app-toolbar>
    <div class="drawerContent content">
      <!-- drawer content goes here -->
    </div>
  </app-drawer>

  <!-- Main content -->
  <app-header-layout>
    <app-header
      scroll-target="content">
      <app-toolbar>
        <paper-icon-button icon="menu" drawer-toggle></paper-icon-button>
        <div class="flex" title>[[contentTitle]]</div>
        <paper-icon-button icon="search" on-tap="openSearch"></paper-icon-button>
      </app-toolbar>
    </app-header>
    <div id="content" class="mainContent">
      <!-- Main content goes here -->
    </div>
  </app-header-layout>
</app-drawer-layout>

So we now have a basic layout with a drawer that’s responsive and a main content area with a header. Notice that the app-header has an attribute called scroll-target. You make that the ID of the element where you want all the scrolling to occur. It will make sure that div is where all the scrolling occurs, which is cool in and of itself. But, you don’t have to do anything really, that container will just scroll as you would expect.

Now, normally there will be an iron-pages or neon-animated-pages in the main content area with a data binding to a variable (we’ll call ours ‘page’) for the selected page. Let’s say one of those pages (people) has a large list (like a notes view or something) that the user can scroll through. They then click on one of the items in the list and they are taken to a different page. However, when they navigate back to the people list, they’re at the top of the list again. That sucks and it’s a really bad user experience. Now of course you can use A LOT of javascript to build your own scrolling controller, but why would you do that?

Of particular coolness is the app-scrollpos-control. You set it’s selected property to whatever page the route is for. This control will then keep track of the scroll position of our header scroll target for us. Which is really cool. We don’t have to do anything special, just define the selected attribute and set it to our ‘page’ variable. That’s it, you’re done. So now we should end up with something like:

<app-scrollpos-control selected="{{page}}"></app-scrollpos-control>
<app-drawer-layout id="layout" narrow="{{drawerClosed}}" fullbleed>
  <!-- Drawer content -->
  <app-drawer id="drawer">
    <app-toolbar>
      <a href="/view1" top-item>
        <img src="../images/Logo.png" />
      </a>
    </app-toolbar>
    <div class="drawerContent content">
      <!-- drawer content goes here -->
    </div>
  </app-drawer>

  <!-- Main content -->
  <app-header-layout>
    <app-header
      scroll-target="content">
      <app-toolbar>
        <paper-icon-button icon="menu" drawer-toggle></paper-icon-button>
        <div class="flex" title>[[contentTitle]]</div>
        <paper-icon-button icon="search" on-tap="openSearch"></paper-icon-button>
      </app-toolbar>
    </app-header>
    <div id="content" class="mainContent">
      <!-- Main content goes here -->
    </div>
  </app-header-layout>
</app-drawer-layout>

Notice now we’ve added our app-scrollpos-control. So, if you visit my github pages example of this, visit each link on the left and scroll to a different position for each page. Then navigate back through the pages you’ll see that the scroll position for each page is adjusted to the location it was previously. Pretty cool eh? You can find the repository here. No more massive JavaScript to maintain the scroll position across 2 dozen different pages.

Share This: