Question

我正在搜索此布局的Angular 2/4示例。我需要从两列牌开始（左侧2个，右侧1个）。但是，如果屏幕很小，它们应该折叠到一列。我可以在带有div的CSS中完成它，但在Material 2中必须有一个简单的方法 - 有很多Material 1的例子。

此代码改编自Angular Material 1答案，但它不起作用（我改变了＃34;行＆＃34;到＆＃34;列＆＃34;希望这样可行但我只是得到一栏三张牌）：

how do i create a grid of cards with angular material?

<div class='md-padding' layout="column" layout-wrap>
    <md-card flex="40" flex-sm="80">
      <md-card-content>
        <h2>Left Card 1</h2>
      </md-card-content>
    </md-card>

    <md-card flex="40" flex-sm="80">
      <md-card-content>
        <h2>Left Card 2</h2>
      </md-card-content> 
    </md-card>
</div>

<div class='md-padding' layout="column" layout-wrap>
    <md-card flex="40" flex-sm="80">
      <md-card-content>
        <h2>Right Column </h2>
      </md-card-content>
    </md-card>
</div>

从答案：＆＃34;在这个例子中，你将有两张牌（每张40％），当屏幕调整到-sm时，牌将达到80％。＆＃34;

Answer 1

首先，在您的应用中添加@angular/flex-layout个包。详细了解stackblitz demo。然后，您需要在FlexLayoutModule导入条目中导入app.module.ts：

import { FlexLayoutModule } from '@angular/flex-layout';

....
@NgModule({
    imports: [
        // other modules
        // .....
        FlexLayoutModule
    ],
    ....

然后你可以使用＆＃34; flex-layout＆＃34;在你的应用程序中要像上面提到的那样使卡片响应，您可以使用以下模板：

<div fxLayout="row" fxLayout.xs="column">
    <md-card fxFlex="40%;" fxFlex.xs="80%">
        <md-card-content>
            <h2>Left Card 1</h2>
        </md-card-content>
    </md-card>

    <md-card fxFlex="40%;" fxFlex.xs="80%">
        <md-card-content>
            <h2>Left Card 2</h2>
        </md-card-content>
    </md-card>

    <md-card fxFlex="20%;" fxFlex.xs="80%">
        <md-card-content>
            <h2>Right Column </h2>
        </md-card-content>
    </md-card>
</div>

链接到Sideload LOB apps in Windows 10。

Answer 2

我发现了一个CSS弹性框解决方案 - 我仍然更喜欢Angular flex布局答案，但现在这样做。感谢@Faisal指出我正确的方向。这会在大屏幕上生成两列，第一列中包含两行。如果屏幕较小，则布局会更改为包含三行的一列。

我基于此示例的代码：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes

HTML：

<div id='main'>
    <div id='col1'>
        <article>article</article>
        <nav>nav</nav>
    </div>
    <aside>aside</aside>
</div>

CSS：

#main {
  min-height: 100px;
  margin: 0;
  padding: 0;
  display: flex;
  flex-flow: row;
}

#main > col1 {
  min-height: 100px;
  margin: 0;
  padding: 0;
  display: flex;
  flex-flow: column;
}

#col1 > article {
  margin: 4px;
  padding: 5px;
  border: 1px solid #cccc33;
  border-radius: 7pt;
  background: #dddd88;
  flex: 3 1 60%;
  order: 2;
}

#col1 > nav {
  margin: 4px;
  padding: 5px;
  border: 1px solid #8888bb;
  border-radius: 7pt;
  background: #dddd88;
  flex: 1 6 20%;
  order: 1;
}

#main > aside {
  margin: 4px;
  padding: 5px;
  border: 1px solid #8888bb;
  border-radius: 7pt;
  background: #ccccff;
  flex: 1 6 20%;
  order: 3;
}

/* Too narrow to support three columns */
@media all and (max-width: 640px) {
  #main, #page {
      flex-direction: column;
  }

  #col1 > article, #col1 > nav, #main > aside {
  /* Return them to document order */
      order: 0;
  }

  #main > col1, #main > aside {
      min-height: 50px;
      max-height: 50px;
  }
}

Answer 3

我有完全相同的要求，而我使用的是包含有席卡的 mat-grid-list 。我使用了mat-grid-list来使列表具有响应性，从而可以调整no。根据屏幕大小连续排列的元素数。这是我所做的：

<mat-grid-list [cols]="breakpoint" rowHeight="4:5" (window:resize)="onResize($event)" >
  <mat-grid-tile *ngFor="let product of pagedList">
    <div>
      <mat-card class="example-card">
          mat-card content here..
      </mat-card>
    </div>
  </mat-grid-tile>
</mat-grid-list>

这是组件的样子：

  pagedList: Product[]= [];
  breakpoint: number = 3;  //to adjust to screen

  ngOnInit() {
        this.breakpoint = (window.innerWidth <= 800) ? 1 : 3;
        this.pagedList = <SOME LIST>;
    });
  }

  onResize(event) { //to adjust to screen size
    this.breakpoint = (event.target.innerWidth <= 800) ? 1 : 3;
  }

您还可以向其中添加分页。在这里How to use angular-material pagination with mat-card?

检查我的答案

Angular Material 2 md卡响应列

3 个答案: