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>
的菜單顯示了水平,不同字體等