Question

造型菜鸟问题：我可以创建一个元素来填充继承父母原始样式的纸质菜单吗？

起点：聚合物入门套件。在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>

菜单水平显示，字体不同等。

Answer 1

我发现有助于维护字体和填充的样式是将app-＆gt; styles-＆gt; app-theme.html中的样式信息包含在此处示例后面的代码中的代码中的标记中（{ {3}}）。

Polymer 1.0使用原始样式填充纸张菜单

1 个答案: