Adding a new Page to the Polymer Starter Kit

Question

How can you add a new page (say <my-view4>) to the Polymer Starter Kit that covers the whole screen and has a different header than the default view?

       <app-location route="{{route}}" url-space-regex="^[[rootPath]]">                                               
       </app-location>
       <app-route
        route="{{route}}"
        pattern="[[rootPath]]:page"
        data="{{routeData}}"
        tail="{{subroute}}"></app-route>                             
       <iron-pages
        selected="[[page]]"
        attr-for-selected="name"
        fallback-selection="view404"
        role="main">
      <my-view1 name="view1"></my-view1>
      <my-view2 name="view2"></my-view2>
      <my-view3 name="view3"></my-view3>
      <my-view404 name="view404"></my-view404>
     </iron-pages>

The default iron pages selector is embedded into the app-header-layout element, and all new elements (or views) are displayed inside app-header layout. I would however like to add a new element that covers the whole site and "breaks out" of the iron-pages sandbox inside the app-header-layout.

At the same time the app-route element should still work so that navigating to the new route is possible via the /view4 link. Is this possible with app-route and the PSK?

mishu mishu · Accepted Answer · 2017-09-26T07:50:09

Sure it is possible, that's why they give that example. I am not sure where exactly is your problem since you did not post any of your own code, this looks like what is provided by the starter kit, but you can try to follow the episode from the Polycasts series that covers the Polymer CLI, and you will see exactly what you're trying to do: https://www.youtube.com/watch?v=pj2lmXVa84U

Adding a new Page to the Polymer Starter Kit

1 Answers