Angular Material 2 md-card 响应列

Question

我正在寻找这种布局的 Angular 2/4 示例。我需要从两列卡片开始（左列 2 个，右列 1 个）。但是，如果屏幕很小，它们应该折叠成一列。我可以在带有 div 的 CSS 中做到这一点，但在 Material 2 中必须有一个简单的方法——有很多 Material 1 的例子。

此代码改编自 Angular Material 1 答案，但它不起作用（我将“行”更改为“列”希望这会起作用，但我只得到一个包含三张卡片的列）：

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>

来自答案：“在此示例中，您将有两张卡片（每张 40%），当屏幕大小调整为 -sm 时，卡片将为 80%。”

Answer 1

首先，在您的应用中添加@angular/flex-layout 包。阅读有关"flex-layout" 的更多信息。然后，您需要在 app.module.ts 导入条目中导入 FlexLayoutModule：

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

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

然后您可以在您的应用中使用“flex-layout”。要使卡片像您提到的那样响应，您可以使用以下模板：

<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>

链接到stackblitz demo。

Answer 2

我找到了一个 CSS flex box 解决方案——我仍然更喜欢 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

我有完全相同的要求，我使用 ma​​t-grid-list 包含 mat-cards 来做到这一点。我使用 mat-grid-list 使我的列表具有响应性，以便它可以调整编号。根据屏幕大小连续排列元素。这是我所做的：

<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?