Polymer 聚合物子菜单模板？_Polymer

Polymer 聚合物子菜单模板？

polymer

Polymer 聚合物子菜单模板？,polymer,Polymer,我想在Polymer 2.0中创建一个子菜单。我使用应用程序抽屉布局创建了一个简单的菜单。代码如下：- <app-drawer-layout fullbleed>  <app-drawer id="drawer" slot="drawer"> <app-toolbar>Menu</app-toolbar> <iron-selec

我想在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>

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


[[标题]]

polymer 2.0中是否有用于构建子菜单的现有模板？

我检查了许多菜单选项，但没有一个与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>

<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.出票人名单{
利润率：0.20px；
}
.抽屉列表，.抽屉列表a{
显示：块；
填充：0 16px；
文字装饰：无；
颜色：var（--app二次色）；
线高：40px；
}
.抽屉列表，.抽屉列表a.已选定{
颜色：黑色；
字体大小：粗体；
}
菜单li>ul{
显示：无；
-webkit过渡：高度2s；/*适用于Safari 3.1到6.0*/
过渡：高度2s；
}
ul.菜单li：悬停>ul{
显示：块；
位置：相对位置；
/*高度：100px*/
/*过渡期：6个月*/
/*背景色：#666；*/
}
ul.childList a：悬停{
背景色：#666；
}



[[child.key]]



类ConfluenceMenu扩展了Polymer.Element{
静态get是（）{return'汇流菜单'；}
静态获取属性（）{
返回{
第页：{
类型：字符串，
reflectToAttribute:真
}
};
}
}
window.customElements.define（ConfluenceMenu.is，ConfluenceMenu）；

我检查了许多菜单选项，但它们都不适用于Polymer2.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>

<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.出票人名单{
利润率：0.20px；
}
.抽屉列表，.抽屉列表a{
显示：块；
填充：0 16px；
文字装饰：无；
颜色：var（--app二次色）；
线高：40px；
}
.抽屉列表，.抽屉列表a.已选定{
颜色：黑色；
字体大小：粗体；
}
菜单li>ul{
显示：无；
-webkit过渡：高度2s；/*适用于Safari 3.1到6.0*/
过渡：高度2s；
}
ul.菜单li：悬停>ul{
显示：块；
位置：相对位置；
/*高度：100px*/
/*过渡期：6个月*/
/*背景色：#666；*/
}
ul.childList a：悬停{
背景色：#666；
}



[[child.key]]



类ConfluenceMenu扩展了Polymer.Element{
静态get是（）{return'汇流菜单'；}
静态获取属性（）{
返回{
第页：{
类型：字符串，
reflectToAttribute:真
}
};
}
}
window.customElements.define（ConfluenceMenu.is，ConfluenceMenu）；