2017-03-05 86 views
0

我试图在paper-menu的项目中放入一些丰富的内容,但是这似乎不像预期的那样工作(请参见下面的截图)。在聚合物纸项目中是否可以使用html样式?

需要做什么才能将样式化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> 

Screenshot

回答

0

这或多或少会产生什么,我想实现:

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