聚合物子菜单模板？

Question

我想在Polymer 2.0中创建一个子菜单。我使用应用程序抽屉布局来创建一个简单的菜单。以下是代码： -

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

聚合物2.0中是否存在用于构建子菜单的现有模板？

Answer 1

我检查了一些菜单选项，但没有一个与Polymer2.0一起工作，我猜它只是一个新版本。所以我创建了一个新的小部件来创建菜单和子菜单。以下是该代码： -

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