Navigation through dynamic pages polymer

Question

i'm working on a polymer webApp with spring-boot, so far I've did like two seperate apps because I can't figure out how to navigate from tab to tab, I'd really like to merge the two I don't mind having buttons to navigate please.

As u can see in the first picture there are tabs I would like to navigate through them the applications tab would for example take me to the app in the other picture. I search a lot through the web but all I could find are how to navigate between static content.

This is the first app

and its src

and this the other app

and its src

MarioAleo · Accepted Answer · 2016-08-10T12:36:29.443

You can use the app-route component. https://elements.polymer-project.org/elements/app-route

Here's the polycast about the app-route. https://www.youtube.com/watch?v=iAgSvlYavX0&list=PLOU2XLYxmsII5c3Mgw6fNYCzaWrsM3sMN&index=2

Basicly, you'll use the route and page attribute to set the route that is active. The switch between of what piece of code is active will be made using the iron-selector component.

Something like this:

<app-location route="{{ route }}"></app-location>
<app-route route="{{ route }}"
           pattern="/:page"
           data="{{ routeData }}"
           tail="{{ subroute }}"></app-route>

<iron-selector attr-for-selected="route"
               selected="[[ page ]]"
               role="navigation">
    <a route="editor" href="/editor">Editor</a>
    <a route="analyze" href="/analyze">Analyze</a>
    <a route="community" href="/community">Community</a>
</iron-selector>

<iron-pages role="main"
            attr-for-selected="route"
            selected="[[ page ]]">
    <my-editor route="editor"></my-editor>
    <my-analyze route="analyze"></my-analyze>
    <my-community route="community"></my-community>
</iron-pages>

<script>
     Polymer({ 
         is:'my-element',
         properties: {
             page: {
                 type: String,
                 notify: true,
                 reflectToAttribute: true,
                 observer: "_pageChanged"
             }
         },

         observers: [
             "_routePageChanged(routeData.page)"
         ],

         attached: function(e) {
             // Lazyload the views as soon as the AppShell has been Painted
             this.importHref(
                 this.resolveUrl("my-editor.html"), null, null, true);
             this.importHref(
                 this.resolveUrl("my-analyze"), null, null, true);
             this.importHref(
                 this.resolveUrl("my-community"), null, null, true);

             // If the application is reloaded, redirect to /analyze
             if(this.page != "analyze"){
                 this.set("route.path", "/analyze");
             }
         },

         _changeRoute: function(e) {
             this.set("route.path", e.detail.requestRoute);
         },

         _routePageChanged: function(page) {
             this.page = page || "analyze";
         },
     })
</script>

yes I saw the video but I don't know how to link them to the tabs element — mahaSaez, Aug 10 '16 at 09:03
At my sample I have the iron-selector and the iron-pages components, the iron-selector is your navigation bar options and the iron-pages is your page switch manager, and page that is the route attribute value. When you click on the iron-selector option it will say to the url by the href "go to /editor", also it will update the variable page to the value of route on the , page is the variable that is used by the iron-pages to know what piece of code should be active so it will look at the attribute route that has the same name as the attibute page and will active that piece of code. — MarioAleo, Aug 10 '16 at 12:49

Navigation through dynamic pages polymer

1 Answers1