如何在角度材质

Question

我想在角度材料中添加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>