Как добавить больше изображений над основным изображением md-карты в угловом материале

Question

Как добавить больше изображений над основным изображением md-карты в угловом материале

0

Я хочу добавить еще 3 изображения над основным изображением md-карты в угловом материале. Я ищу через интернет, и я не нашел подходящего ответа для этого. Я добавил изображение, чтобы показать, что я действительно хочу.

Любая помощь очень ценится. Благодаря,

Udara 26 июль 2016, в 20:24

Источник

Теги:

angularjs

angular-material

2 ответа

1

Вот как я это сделаю - 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>

camden_kid 27 июль 2016, в 06:15

0

Это тоже работает. Какая лучшая md-карта или md-whiteframe?
Udara 29 июль 2016, в 03:27
0

@ Udara Я бы, вероятно, использовал md-card особым образом, описанным в документах, и md-whiteframe чтобы получить эффект «карты», но с большей гибкостью.
camden_kid 29 июль 2016, в 07:42

Ещё вопросы

Это тоже работает. Какая лучшая md-карта или md-whiteframe?
@ Udara Я бы, вероятно, использовал md-card особым образом, описанным в документах, и md-whiteframe чтобы получить эффект «карты», но с большей гибкостью.

Graham S · Accepted Answer · 2016-07-27T06-12-00.000Z

Вы можете использовать функции гибкой коробки, предоставляемые угловым материалом, для достижения желаемого макета.

Документы - 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

Это работает для меня. Большое спасибо.