1

私は spring-boot を使用してポリマー webApp に取り組んでいます。これまでのところ、タブからタブに移動する方法がわからないため、2 つの個別のアプリが好きでした。私が持っていない 2 つをマージしたいと思っていますナビゲートするためのボタンがあることを気にしないでください。

最初の写真でわかるように、それらをナビゲートしたいタブがあります。たとえば、アプリケーションタブは、別の写真のアプリに移動します。私は Web をよく検索しますが、静的コンテンツ間を移動する方法しか見つかりませんでした。

初めてのアプリです ここに画像の説明を入力

とそのsrc

ここに画像の説明を入力

そして、これは他のアプリです

ここに画像の説明を入力

とそのsrc

ここに画像の説明を入力

4

1 に答える 1

3

app-route コンポーネントを使用できます。 https://elements.polymer-project.org/elements/app-route

app-route に関するポリキャストは次のとおりです。 https://www.youtube.com/watch?v=iAgSvlYavX0&list=PLOU2XLYxmsII5c3Mgw6fNYCzaWrsM3sMN&index=2

基本的に、ルートとページ属性を使用して、アクティブなルートを設定します。どのコードがアクティブであるかの切り替えは、iron-selector コンポーネントを使用して行われます。

このようなもの：

<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>
于 2016-08-09T17:40:10.663 に答える