Как создать отзывчивый (с разным количеством столбцов) Angular -Материальная карта

Я пытаюсь создать сетку Angular -Материальные карты, которые ведут себя как сетка Bootstrap. В идеале карты будут иметь полную ширину для малых экранов и перейти к двум столбцам при больших точках останова.

Демо с 2 картами

Проблема заключается в том, что A-M создает столбцы для каждой карты. Я не понял, как указать количество столбцов для каждой точки останова.

Демо с 5 картами

Вот основа разметки, которую я использую, которая берет макет карты из строк в столбцы в первой точке останова:

<div ng-app layout="column" layout-gt-sm="row" class="layout-sm-column layout-row">
  <div flex class="flex" ng-repeat="i in [1,2,3,4,5] track by $index">
    <md-card>

Там похожий вопрос на SO уже, но принятый ответ неудовлетворителен, так как он использует пользовательский CSS, а карты не являются текучей средой. Я не нашел других подобных примеров.

Я предполагаю, что я мог бы зацикливать каждую две карты с помощью Angular и создавать штабелированные наборы, но это кажется излишне громоздким. Я должен думать, что Material обеспечивает лучшее решение. Кроме того, такие решения оставляют пробелы на странице, где карты различаются по высоте. Материал кажется ориентированным на масонскую гибкую макет, и я хотел бы придерживаться этого.

Спасибо.

Ответы

Ответ 1

Вы можете использовать материал Grid-List, он позволяет настраивать col-промежутки и анимировать изменения при изменении ширины.

Я адаптировал образец с сайта и добавил md-card в содержание. Не забудьте добавить layout-fill в md-card. Вы можете легко адаптировать образец для подсчета столбцов.

http://codepen.io/anon/pen/QypjWY

Я также адаптировал ваш образец 5 карт. Вам нужно знать высоту карт, чтобы использовать Сетка-Список, но вы можете легко достичь 100% высоты на маленьких экранах. Вы можете использовать коэффициенты или фиксированные высоты CSS для строк, а затем это задание ваших карт для гибкого отображения содержимого.

<md-grid-list ng-app="app" layout-fill flex
    md-cols-sm="1"
    md-cols-md="2"
    md-cols-gt-md="5"
    md-row-height-sm="100%"
    md-row-height="600px"
    md-gutter="8px">
    <md-grid-tile ng-repeat="i in [1,2,3,4,5] track by $index">
        <md-card layout-fill>

http://jsfiddle.net/2afaok1n/34/

Edit:

Если вы ищете какую-то шахматную сетку, тогда вам нужно добавить библиотеку: angular-deckgrid, она просто предоставляет макет сетки, все в содержание angular -материал. В отличие от angular-masonry в этой библиотеке нет никаких зависимостей. Если вы не беспокоитесь о добавлении jQuery и т.д., Вы также можете использовать angular -masonry.

<div ng-app="app" ng-controller="DeckController" flex layout="column">
   <deckgrid class="deckgrid" flex source="data">
       <md-card>

Важной частью макета колоды является настройка CSS. С помощью этого вы настраиваете количество столбцов и их ширину. Я использовал медиа-запрос для точки останова angular -материал sm, чтобы переключиться на макет одного столбца.

.deckgrid::before {
  content: '4 .column.column-1-4';
  font-size: 0;
  visibility: hidden;
}

.deckgrid .column {
  float: left;
}

.deckgrid .column-1-4 {
  width: 25%;
}

.deckgrid .column-1-1 {
  width: 100%;
}

@media screen and (max-width: 960px) {
  .deckgrid::before {
    content: '1 .column.column-1-1';
  }
}

http://jsfiddle.net/2afaok1n/39/

Изменить 2:

Существует также версия кладки, которая не требует jQuery и простой директивы для ее использования: angular-masonry-directive. Вот пример, он работает аналогично другому.

http://jsfiddle.net/xjnp97ye/1/

Ответ 2

Если я правильно понял вопрос, это работает как прелесть:

<body ng-app="app" ng-cloak>
  <div layout="column" layout-gt-sm="row" layout-wrap>
  <div flex="25" flex-gt-sm="50" ng-repeat="i in [1,2, 3, 4, 5] track by $index">
    <md-card>
     <!--  You code-->
    </md-card>
  </div>
  </div>
</body>

Plunker с несколькими точками останова: (измените размер внутреннего окна, а не окна браузера) http://plnkr.co/edit/8QPYdzLD8qzEbdz5sesE?p=preview

Плункер обновлен, чтобы показать карты с разной высотой.
2 были сделаны, поэтому максимальная высота всех карт хранится в памяти, и эта применяется ко всем картам.

Ответ 3

<div  ng-repeat="i in [1,2, 3, 4, 5] track by $index" flex-xs="100" flex-sm="50" flex-md="50" flex="33">
<md-card>

  <md-card-title >
    <md-card-title-text >
      <span class="md-headline">Demo Title {{i}}</span>
      <span class="md-subhead">Demo Description</span>
    </md-card-title-text>    
  </md-card-title>
</md-card>
</div>

Отметьте этот пример: http://codepen.io/ktn/pen/jqNBOe

Ответ 4

если я понял ваш вопрос правильно Затем используйте этот код и замените привет на что угодно

<md-grid-list md-cols-lg="12" md-cols-gt-lg="15" md-cols-xs="3" md-cols-sm="6" md-cols-md="9" md-row-height-gt-md="1:1" md-row-height-md="1:1" md-row-height="1:2" md-gutter-gt-md="16px" md-gutter-md="8px" md-gutter="4px">
            <md-grid-tile ng-repeat="contact in contacts" md-colspan="3" md-rowspan-gt-sm="4" style="background:red;">
                hello
            </md-grid-tile>
        </md-grid-list>