2015-08-20 88 views
0

樣式noob問題:我可以製作一個填充繼承父母原始樣式的紙質菜單的元素嗎?聚合物1.0使用原始樣式填充紙質菜單

起始點:聚合物起始劑套件。 在index.html文件中有一個紙質菜單,看起來像這樣;

<paper-menu class="list" attr-for-selected="data-route" selected="{{route}}" on-iron-select="onMenuSelect"> 
       <a data-route="home" href="/" > 
        <iron-icon icon="home"></iron-icon> 
        <span>Home</span> 
       </a> 
</paper-menu> 

一切都風格優良,垂直。

我決定創建我自己的元素,從ajax請求中提取這個菜單項。

<dom-module id="my-sidebar"> 
<style> 

</style> 
<template> 
    <iron-ajax id="menuAjax" params="{{menuParams}}" on-response="handleResponse" handle-as="json" last-response="{{ajaxResponse}}"></iron-ajax> 
      <template is="dom-repeat" items="{{ajaxResponse.main}}"> 
       <a data-route="{{item.data-route}}" href="{{item.href}}"> 
        <iron-icon icon="{{item.icon}}"></iron-icon> 
        <span>{{item.label}}</span> 
       </a> 
      </template> 
</template> 

<script> 
    (function() { 
     Polymer({ 
      is: 'my-sidebar', 
      properties: { 

       ajaxResponse: {}, 
       url: { 
        type: String 
       }, 
       menuParams: {} 
      }, 
      ready: function() { 
       this.url = "/json/sidebar-menu.json"; 
       this.$.menuAjax.url = this.url; 
       this.$.menuAjax.generateRequest(); 
       this.$.menuAjax.auto = true; 
       console.log("my-sidebar is ready"); 
      }, 
      handleResponse: function (request) { 
       console.log("response recieved"); 
      } 
     }); 
    })(); 
</script> 

這件作品和不拉正確的JSON,但造型是無處接近原始垂直菜單項。

我的新紙菜單看起來像這樣。

<paper-menu class="list" attr-for-selected="data-route" selected="{{route}}" on-iron-select="onMenuSelect"> 
      <my-sidebar></my-sidebar> 
</paper-menu> 

的菜單顯示了水平,不同字體等

回答