聚合物纸卡个人资料图片

Question

是否可以按照 https://material.io/guidelines/components/cards.html#cards-actions 上的 material 设计卡片规范在纸卡元素中包含圆形缩略图？

webcomponents.org 文档只展示了通过 <paper-card image="demo/donuts.png"> 实现的全屏图像，但是我想实现类似

的东西

纸卡 Polymer 2 元素是否可行？

Answer 1

您可以通过在 paper-card 中使用 paper-icon-item 来实现。

<paper-card heading="Emmental">
  <div class="card-content">
    <!-- Paper icon item starts here -->
    <paper-icon-item>
      <div class="avatar blue" slot="item-icon"></div>
      <paper-item-body two-line>
        <div>Alphonso Engelking</div>
        <div secondary>Change photo</div>
      </paper-item-body>
    </paper-icon-item>
    <!-- Paper icon item ends -->
  </div>
  <div class="card-actions">
    <paper-button>Share</paper-button>
    <paper-button>Explore!</paper-button>
  </div>
</paper-card>

希望对您有所帮助:)

聚合物纸卡个人资料图片

Polymer paper-card profile picture

polymer

material-design