как создать сетку из карточек с угловатым материалом?

Я пытаюсь создать сетку из трех карточек в строке с помощью ng-repeat. У меня есть обычный массив объектов javascript, прикрепленных к области видимости. Приведенный ниже код создаст новую строку для каждой карты.

<div layout="row" ng-repeat='post in posts' layout-fill="" layout-align="">
<md-card>
  <md-card-content>
    <h2 class="md-title">{{post.title}}</h2>
    <p>
      {{post.summary}}
    </p>
  </md-card-content>
  <div class="md-actions" layout="row" layout-align="end center">
    <md-button>View More</md-button>
  </div>
</md-card>
<br>

enter image description here

Как я могу перебирать свой массив и отображать карточки в строках по три? Я просмотрел этот пост и этот пост, но я не понимаю, как они применимы к угловой материал


javascript material-design angularjs angular-material
person Connor Leech    schedule 05.08.2015    source источник
comment
можете ли вы предоставить код или скрипку для вышеупомянутого?   -  person govindpatel    schedule 05.08.2015

Ответы (4)


arrow_upward
21
arrow_downward

Я создал нечто похожее на то, что вы, возможно, захотите. md-card заключен в div, имеющий layout-wrap. Блоки div динамически создаются после чтения.

Вот код:

<div class='md-padding' layout="row" layout-wrap>
    <md-card style="width: 350px;" ng-repeat="user in users">
      <img src="http://placehold.it/150x150" class="md-card-image" alt="user avatar">
      <md-card-content>
        <h2>{{user}}</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
      </md-card-content>
      <div class="md-actions" layout="row" layout-align="end center">
        <md-button>Save</md-button>
        <md-button>View</md-button>
      </div>
    </md-card>
  </div>

Ширину карточек можно отрегулировать с помощью встроенного стиля, надеюсь, это поможет.

person Community    schedule 05.08.2015
comment
это нормально, но я думаю, было бы даже лучше, если бы обертка div была определена с flex, чтобы каждый md-card мог наследовать и определять отзывчивое значение flex="33" вместо привязки фиксированной ширины в карточке - person gru; 16.02.2016
comment
@gru Можете привести пример? Звучит здорово, но я не могу создать ваше решение на практике. - person Jenan; 14.03.2016
comment
Привет, @gru, спасибо за ваш пример, но он не реагирует на запросы - в очень маленьком виде не работает. Можно ли объявить какой-либо атрибут, в котором я задаю определение количества карт в поле зрения для разной ширины? - person Jenan; 15.03.2016
comment
@Jenan, в этом случае вам следует просто использовать обычную нотацию точки останова, как описано в документах по компоновке материалов angular например у вас были бы flex-sm, flex-md и т. д. - person gru; 16.03.2016

arrow_upward
4
arrow_downward

Мне просто это было нужно; вот более полное решение, использующее только функции макета, для 3 столбцов:

<md-content class="md-padding" layout="row" layout-wrap>
    <div flex="33" ng-repeat="i in [1,2,3,4,5,6,7]">
        <md-card>
            // ...
        </md-card>
    </div>
</md-content>

Карточка должна быть обернута внутри блока div правильного размера, чтобы держать поля под контролем и избегать переполнение.

person Hanuman    schedule 06.10.2016
comment
layout-wrap - вот что решило мою проблему, flex не работал должным образом. Я до сих пор не могу понять, зачем это нужно, я еще немного прочитаю, как это работает. Спасибо! - person Alisson; 08.05.2017

arrow_upward
3
arrow_downward

Чтобы выполнить компилирование с материалом / angular, вы должны использовать flex attr для md-card. Flex attr даст вам пропорциональную ширину относительно своего родителя.

<div class='md-padding' layout="row" layout-wrap>
    <md-card flex="40" flex-sm="80" ng-repeat="user in users">
      <img src="http://placehold.it/150x150" class="md-card-image" alt="user avatar">
      <md-card-content>
        <h2>{{user}}</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
      </md-card-content>
      <div class="md-actions" layout="row" layout-align="end center">
        <md-button>Save</md-button>
        <md-button>View</md-button>
      </div>
    </md-card>
  </div>

В этом примере у вас будет две карты (по 40% каждая), и когда размер экрана изменится на -sm, карты будут иметь 80%.

person sGambolati    schedule 15.07.2016

arrow_upward
0
arrow_downward

Вы можете использовать class="grid-container" для этого. В качестве примера такой фрагмент кода,

<div class="grid-container">
    <mat-grid-list cols="2" rowHeight="350px">
        <mat-grid-tile [colspan]="1" [rowspan]="1">
            <mat-card class="mat-elevation-z8 card-prop"> CARD 1
            </mat-card>  
        </mat-grid-tile>
        <mat-grid-tile [colspan]="1" [rowspan]="2">
            <mat-card class="mat-elevation-z8 card-prop"> CARD 2
            </mat-card>  
        </mat-grid-tile>
        <mat-grid-tile [colspan]="1" [rowspan]="1">
            <mat-card class="mat-elevation-z8 card-prop"> CARD 3
            </mat-card>  
        </mat-grid-tile>
    </mat-grid-list>
</div>

Будет произведен вывод, подобный этому.

введите описание изображения здесь

person NishanW    schedule 23.12.2019