Question

我想在Polymer 2.0中创建一个子菜单。我使用app-drawer布局创建一个简单的菜单。以下是代码： -

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

聚合物子菜单模板？

1 个答案: