Menu 聚合物芯在芯菜单内坍塌_Menu_Polymer

Menu 聚合物芯在芯菜单内坍塌

menu polymer

Menu 聚合物芯在芯菜单内坍塌,menu,polymer,Menu,Polymer,我无法正确打开核心菜单中核心折叠部分的链接。我认为这是一个非常基本的东西，但我对聚合物还不熟悉，只是学习一些诀窍。我可能在这里有额外的代码，但是在遵循SPA示例之后，我想在没有基于脚本的链接的情况下设置类似的东西。但现在，当我点击我的子菜单时，“教师第2页”和“教师第3页”的链接不起作用，最后的菜单标题（账户余额图标）会将您带到“教师第2页”。这是我的密码： <body unresolved fullbleed> <template is="auto-binding"

我无法正确打开核心菜单中核心折叠部分的链接。我认为这是一个非常基本的东西，但我对聚合物还不熟悉，只是学习一些诀窍。我可能在这里有额外的代码，但是在遵循SPA示例之后，我想在没有基于脚本的链接的情况下设置类似的东西。但现在，当我点击我的子菜单时，“教师第2页”和“教师第3页”的链接不起作用，最后的菜单标题（账户余额图标）会将您带到“教师第2页”。这是我的密码：

  <body unresolved fullbleed>
   <template is="auto-binding">
    <core-scaffold id="scaffold">
     <nav>
      <core-toolbar><span>Menu</span></core-toolbar>
       <core-menu valueattr="hash" selected="{{route}}">
        <core-item icon="social:school" label="students" onclick="document.querySelector('#smenu').toggle();">
        </core-item>
        <core-collapse id="smenu">
         <paper-item hash="students" noink>
          <core-icon icon="label-outline"></core-icon>
          <a href="#students">Student Page</a>
         </paper-item>
       </core-collapse>   
     <core-item icon="social:people" label="teachers" onclick="document.querySelector('#tmenu').toggle();">
    </core-item>
     <core-collapse id="tmenu">
      <paper-item hash="teachers1" noink>
       <core-icon icon="label-outline"></core-icon>
       <a href="#teachers1">Teacher Page 1</a>
     </paper-item>
    <paper-item hash="teachers2" noink>
     <core-icon icon="label-outline"></core-icon>
     <a href="#teachers2">Teacher Page 2</a>
    </paper-item>
   <paper-item hash="teachers3" noink>
    <core-icon icon="label-outline"></core-icon>
    <a href="#teachers3">Teacher Page 3</a>
   </paper-item>
 </core-collapse>
<core-icon icon="account-balance" label="support"></core-icon>
</core-menu>
</nav>
<!-- flex makes the bar span across the top of the main content area -->
 <core-toolbar tool flex>
  <!-- flex spaces this element and jusifies the icons to the right-side -->
  <div flex>Application</div>
  <core-icon-button icon="refresh"></core-icon-button>
  <core-icon-button icon="add"></core-icon-button>
 </core-toolbar>
<div layout horizontal center-center fit>
 <core-animated-pages  valueattr="hash" selected="{{route}}" transitions="slide-from-right">
  <section hash="students" layout vertical center-center>
   <div>Student Home</div>
  </section>
  <section hash="students2" layout vertical center-center>
   <div>
    Student Page 1
   </div>
  </section>
  <section hash="teachers" layout vertical center-center>
   <div>Teacher Home</div>
  </section>
  <section hash="teachers1" layout vertical center-center>
   <div>Teacher Materials 1</div>
  </section>
  <section hash="teachers2" layout vertical center-center>
   <div>Teacher Materials 2</div>
  </section>
  <section hash="teachers3" layout vertical center-center>
   <div>Teacher Materials 3</div>
  </section>
</core-animated-pages>
</div>
</core-scaffold>
</template>
</body>


菜单
应用
学生之家
学生第1页
教师之家
教材1
教材2
教材3

在这里，您有一个根据您的代码按预期工作的Plunker：

我使用了

而不是

，因为这似乎是Polymer上一次迭代的预期方式

为了选择子菜单，我必须做一些自定义方法处理程序。我认为可以有一个更干净的方法，但我今天没有找到：）

希望能有帮助

代码的大部分相关部分：

<polymer-element name="my-core-menu" attributes="route">
  <template>
    <core-toolbar><span>Menu</span></core-toolbar>
    <h1>Route: {{route}}</h1>
    <core-menu id="menu" on-core-select="{{mainMenuSelected}}">
      <core-submenu icon="social:school" label="Students" hash="students" >
        <core-item icon="label-outline" label="Student Page" on-click="{{menuItemSelected}}"></core-item>        
      </core-submenu>
      <core-submenu icon="social:school" label="Teachers"  hash="teachers" >
        <core-item icon="label-outline" label="Teacher Page 1" hash="teachers1" on-click="{{menuItemSelected}}"></core-item>  
        <core-item icon="label-outline" label="Teacher Page 2" hash="teachers2" on-click="{{menuItemSelected}}"></core-item> 
        <core-item icon="label-outline" label="Teacher Page 3" hash="teachers3" on-click="{{menuItemSelected}}"></core-item>       
      </core-submenu>

      <core-icon icon="account-balance" label="support"></core-icon>
    </core-menu>
  </template>
  <script>
  Polymer("my-core-menu", {
     route: "students",
     mainMenuSelected:function(event, detail, sender) {
      if (detail.isSelected) {
        console.log("tick! "+detail.item.getAttribute("hash"))
        this.route =  detail.item.getAttribute("hash");
      }
     },
     menuItemSelected: function(event, detail, sender) {
      this.route = sender.getAttribute("hash");
     }
  });
</script>
</polymer-element>


菜单
路由：{{Route}}
聚合物（“我的核心菜单”{
路线：“学生”，
已选择主菜单：功能（事件、详细信息、发件人）{
如果（选择详细信息）{
console.log（“勾号！”+detail.item.getAttribute（“哈希”））
this.route=detail.item.getAttribute（“哈希”）；
}
},
menuItemSelected:功能（事件、详细信息、发件人）{
this.route=sender.getAttribute（“哈希”）；
}
});

在Plunker的

我的核心菜单中，标签为label=“Teachers”
的核心子菜单应该是hash=“Teachers”
而不是hash=“teachers1”
。但是除了那张纸条-很好的解决方案。谢谢！现在改正错误：）谢谢！抱歉耽误了你的时间。。。我感谢你的帮助！