Question

我正在尝试在paper-menu的项目中添加一些丰富的内容，但这似乎不能按预期工作（请参见下面的屏幕截图）。

将样式化的html添加到paper-item。

需要做些什么

代码在这里：

<style is="custom-style">
    .personItem {
        @apply(--layout-horizontal);
        margin: 16px 16px 0 16px;
        padding: 20px;
        border-radius: 8px;
        background-color: white;
        border: 1px solid #ddd;
    }
    .avatar {
        height: 50px;
        width: 50px;
        border-radius: 25px;
        box-sizing: border-box;
        background-color: #DDD;
    }
    .pad {
        padding: 0 16px;
        @apply(--layout-flex);
        @apply(--layout-vertical);
    }
    .primary {
        font-size: 16px;
        font-weight: bold;
    }
        .dim {
        color: gray;
    }
</style>

<paper-menu-button vertical-align="top" horizontal-align="right" vertical-offset="64">
    <paper-icon-button id="notif" icon="social:notifications" class="dropdown-trigger" alt="menu"></paper-icon-button>
    <paper-menu class="dropdown-content">
        <template is="dom-repeat" items="[[notifications]]" as="item">
            <paper-item>
                <paper-item-body two-line>
                    <!--<div th:inline="none"><iron-icon icon='communication:message'></iron-icon></div>-->
                    <div secondary th:inline="none">
                        <div class="personItem">
                            <iron-image class="avatar" sizing="contain" src="[[item.pic]]"></iron-image>
                            <div class="pad">
                                <div class="primary" th:inline="none">
                                    <span style="float:right;">[[m.date]]</span>
                                    <span>[[m.user]]</span>
                                </div>
                                <div class="dim" th:inline="none">[[m.content]]</div>
                            </div>
                        </div>
                    </div>
                </paper-item-body>
            </paper-item>
        </template>
    </paper-menu>
</paper-menu-button>
<paper-badge id="badge" for="notif" label="[[number]]"></paper-badge>

Answer 1

这或多或少会产生我想要达到的目标：

<paper-menu-button>
    <paper-icon-button id="n" icon="social:notifications" class="dropdown-trigger" alt="menu"></paper-icon-button>
    <paper-menu class="dropdown-content">
        <template is="dom-repeat" items="[[notifications]]" as="item">
            <paper-icon-item>
                <iron-icon item-icon class="avatar" sizing="contain" src="/path/to/pic"></iron-icon>
                <paper-item-body two-line>
                    <div>John Doe</div>
                    <div secondary>Hello World</div>
                </paper-item-body>
                <paper-icon-button icon="communication:message"></paper-icon-button>
            </paper-icon-item>
        </template>
    </paper-menu>
</paper-menu-button>
<paper-badge id="badge" for="n" label="[[number]]"></paper-badge>

可以在聚合物纸张项目中设置样式的html吗？

1 个答案: