如何在角材料的md卡主图像上方添加更多图像

Question

I want to add another 3 images above the main image of md-card in angular material.I search trough internet and i didn't find suitable answer for that. I have attached an image to show what i really want.

Any help highly appreciate. Thanks,

Answer 1

You can use the flex box features provided by Angular Material to achieve the layout you want.

Docs - https://material.angularjs.org/latest/layout/introduction

For example, the following will achieve what you are looking for with divs, it should be straight forward to add to a card. I recommend moving the styling to a CSS file

<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

This is how I would do it - CodePen . Using md-whiteframe for the card effect.

Markup

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