问聚合物核-核内崩塌-菜单
EN

Stack Overflow用户

提问于 2014-12-19 04:28:12

回答 1查看 1K关注 0票数 1

我很难在核心菜单的核心崩溃部分找到正确打开的链接。我认为这是非常基本的东西，但我对聚合物还不熟悉，我只是在学习诀窍。我在这里可能有额外的代码，但是在遵循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>

polymer

回答 1

Stack Overflow用户

回答已采纳

发布于 2014-12-19 14:54:49

在这里，有一个柱塞按您的意愿工作，并基于您的代码：http://plnkr.co/edit/6MKF2uni2p6g6jlY0uzP?p=preview

我使用的是<core-submenu>，而不是<core-collapse>，因为在聚合物的最后一次迭代中，它似乎是打算采用的方式。

为了使子菜单选择，我必须做一些自定义的方法处理程序。我认为有一个更清洁的方法，但我今天没有找到它:)

希望能帮上忙！

守则的有关大部分内容如下：

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

票数 3

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/27559722

复制

相似问题

问聚合物核-核内崩塌-菜单
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问聚合物核-核内崩塌-菜单EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问聚合物核-核内崩塌-菜单
EN