Polymer Untermenüs Vorlagen?

Question

Ich wollte ein Untermenü in Polymer 2.0 erstellen. Ich habe das Layout der App-Schublade verwendet, um ein einfaches Menü zu erstellen. Folgendes ist der Code: -

<app-drawer-layout fullbleed> 
     <!-- Drawer content --> 
     <app-drawer id="drawer" slot="drawer"> 
     <app-toolbar>Menu</app-toolbar> 

     <iron-selector role="navigation" class="drawer-list" selected="[[categoryName]]" attr-for-selected="name"> 
       <template is="dom-repeat" items="[[categories]]" as="category" initial-count="4"> 

       <a name="[[category.name]]" href="/[[category.url]]" >[[category.title]]</a> 
      </template> 
     </iron-selector> 
     <paper-menu> 


     </app-drawer> 

     <!-- Main content --> 
     <app-header-layout has-scrolling-region> 

     <app-header slot="header" condenses reveals effects="waterfall"> 
      <app-toolbar> 
      <paper-icon-button icon="my-icons:menu" drawer-toggle></paper-icon-button> 
      <div main-title>[[title]]</div> 
      </app-toolbar> 
     </app-header> 

     <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> 
     </app-header-layout> 
    </app-drawer-layout> 

Gibt es eine vorhandene Vorlage in Polymer 2.0 zum Erstellen des Untermenüs?

Answer 1

Ich überprüfte die Anzahl der Menüoptionen, aber keine funktionierte mit Polymer2.0. Ich denke, es ist nur eine neue Ausgabe. Also habe ich ein neues kleines Widget zum Erstellen von Menüs und Untermenüs erstellt. Folgendes ist der Code: -

<link rel="import" href="../bower_components/iron-pages/iron-pages.html"> 
<link rel="import" href="../bower_components/iron-selector/iron-selector.html"> 
<link rel="import" href="../bower_components/iron-selector/iron-selector.html"> 
<link rel="import" href="../bower_components/app-layout/app-drawer/app-drawer.html"> 
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html"> 
<link rel="import" href="../bower_components/app-layout/app-toolbar/app-toolbar.html"> 
<link rel="import" href="../bower_components/paper-menu/paper-menu.html"> 
<link rel="import" href="../bower_components/paper-menu/paper-submenu.html"> 
<link rel="import" href="../bower_components/polymer/lib/elements/dom-repeat.html"> 

<link rel="import" href="confluence-data.html"> 



<dom-module id="confluence-menu"> 


    <template> 

    <style shim-shadowdom> 
     .drawer-list{ 
     margin: 0 20px; 
     } 
    .drawer-list ,.drawer-list a { 
     display: block; 
     padding: 0 16px; 
     text-decoration: none; 
     color: var(--app-secondary-color); 
     line-height: 40px; 
     } 
     .drawer-list ,.drawer-list a.iron-selected { 
     color: black; 
     font-weight: bold; 
     } 



    ul.menu li >ul { 
    display:none; 
    -webkit-transition: height 2s; /* For Safari 3.1 to 6.0 */ 
    transition: height 2s; 
} 


ul.menu li:hover >ul{ 
    display:block; 
    position:relative; 
    /*height:100px;*/ 
    /*transition: 6 ease-out;*/ 

/*background-color: #666;*/ 
} 

ul.childList a:hover{ 
    background-color: #666; 

} 
</style> 
    <confluence-data categories="{{categories}}"></confluence-data> 
     <app-toolbar>Menu</app-toolbar> 
<app-location route="{{route}}"></app-location> 
    <app-route 
     route="{{route}}" 
     pattern="/:page" 
     data="{{routeData}}" 
     tail="{{subroute}}"></app-route> 
<iron-selector role="navigation" class="drawer-list" selected="[[categoryName]]" attr-for-selected="name"> 
<ul class="menu" style="list-style: none;"> 

      <!-- Different way to loop 

       <template is="dom-repeat" items="[[categories]]" as="category" initial-count="4"> 
       <li> 
       <a name="[[category.name]]" href="/[[category.url]]">[[category.title]]</a> 
       <ul> 
       <template is="dom-repeat" items="[[category.child]]" as="child" initial-count="4"> 
        <li><a href="/[[child.key]]"/>[[child.key]]</li> 
       </template> 
       </ul> 
      </li> 
      </template> 
     </ul> --> 

<dom-repeat items="{{categories}}" as="category"> 
    <template> 
     <li> 

     <a name="[[category.name]]" href="/[[category.url]]" >[[category.title]]</a> 
     <ul style="list-style: none;" class="childList"> 
      <dom-repeat items="{{category.child}}" as="child"> 

      <template> 
       <li><a href="/[[child.key]]"/>[[child.key]]</li> 
      </template> 
      </dom-repeat> 
     </ul> 
     </li> 

    </template> 


</dom-repeat> 

</ul> 
</iron-selector> 

    </template> 


    <script> 
    class ConfluenceMenu extends Polymer.Element { 
    static get is() { return 'confluence-menu'; } 
    static get properties() { 
     return { 
      page: { 
      type: String, 
      reflectToAttribute: true 

      } 

     }; 
     } 


    } 

    window.customElements.define(ConfluenceMenu.is, ConfluenceMenu); 
    </script> 
</dom-module>