如何在 angular material 中的 md-card 主图像上方添加更多图像

Question

我想在 angular material.I 互联网搜索中的 md-card 主图像上方添加另外 3 张图像，但我没有找到合适的答案。我附上了一张图片来展示我真正想要的东西。

非常感谢任何帮助。谢谢，

Answer 1

您可以使用Angular Material提供的弹性框功能来实现您想要的布局。

文档 - https://material.angularjs.org/latest/layout/introduction

例如下面用div实现你要的东西，直接添加到卡片中应该就可以了。我建议将样式移动到 CSS 文件

<div layout="row" style="padding: 10px; background-color:green">
    <div flex style="height:300px; width: 250px;"></div>
    <div layout="column" style="width: 100px; ">
      <div style="height: 100px; margin: 5px 0px 5px 0px; background-color: white">1</div>
      <div style="height: 100px; margin: 5px 0px 5px 0px; background-color: white">2</div>
      <div style="height: 100px; margin: 5px 0px 5px 0px; background-color: white">3</div>
    </div>
</div>

https://plnkr.co/MCj2bRj6C9PAGbOH9erL

Answer 2

我会这样做 - CodePen。卡片效果使用md-whiteframe。

标记

<div ng-controller="AppCtrl" ng-cloak="" ng-app="MyApp" layout-fill layout="column" style="background:lightgrey; padding:100px">
  <div layout="row" flex="50" layout-align="center">
    <md-whiteframe class="md-whiteframe-1dp" flex="50" style="background:white" layout="column">
      <div style="background:darkgreen" flex="80" layout="row" layout-align="end">
        <div flex="20" layout-margin layout="column">
          <div style="background:red" flex>
          </div>
          <div style="background:yellow" flex>
          </div>
          <div style="background:blue" flex>
          </div>
        </div>
      </div>
      <div layout="row" layout-align="center center" flex>
        <label style="font-size:30px">Products</label>
      </div>
    </md-whiteframe>
  </div>
</div>

如何在 angular material 中的 md-card 主图像上方添加更多图像

How to add more images above md-card main image in angular material

angularjs

angular-material