聚合物纸卡配置文件图片

时间:2017-06-21 14:57:51

标签: polymer material-design

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

webcomponents.org文档仅展示通过<paper-card image="demo/donuts.png">实现的全屏图像,但我希望实现类似

的内容

enter image description here

纸卡Polymer 2元素可以实现吗?

1 个答案:

答案 0 :(得分:2)

您可以在paper-icon-item内使用paper-card来实现这一目标。

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

希望这会有所帮助:)