Как использовать гибкий макет вместе с md-картой в сетке в angular 2?

Я использую «@ angular / core»: «2.4.10» и «@ angular / material»: «2.0.0-beta.2». Я установил flex-layout с помощью npm. Я хочу создать адаптивную сетку с карточками. Я использую md-grid-list и md-card. Как использовать гибкий макет с md-card или md-grid-list. Сетка и карточка должны реагировать в соответствии с размером окна / экрана. Ожидаемый результат: как только я уменьшу размер экрана, количество столбцов должно уменьшиться, а при большом размере экрана количество столбцов должно увеличиться без перекрытия содержимого карты.


material-design angular-material angular-flex-layout angular2-directives
person user2301    schedule 11.05.2017    source источник

Ответы (1)


arrow_upward
1
arrow_downward

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

<md-grid-list cols="4"  rowHeight="250px" gutterSize="20px">
  <md-grid-tile  *ngFor="let data of myData">
    <md-card [style.background]="'lightBlue'" [style.minHeight]="'100%'" >  
      <md-card-title>Your title here</md-card-title>
      <md-card-content>
        <h2>
            any heading or content here
        </h2>
      </md-card-content>    
    </md-card>
  </md-grid-tile>
</md-grid-list>
person user2301    schedule 16.05.2017