Search code examples
htmlpolymerweb-componentpolymer-designer-tool

Navigation through dynamic pages polymer

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 enter image description here

and its src

enter image description here

and this the other app

enter image description here

and its src

enter image description here

Solution

  • 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>