wake-up-neo.com

Angular Material 2 md-card responsive Spalten

Ich suche nach einem Angular 2/4 Beispiel für dieses Layout. Ich muss mit zwei Kartensäulen beginnen (2 in linker Spalte, 1 in rechter Spalte). Wenn der Bildschirm jedoch klein ist, sollten sie auf eine Spalte reduziert werden. Ich kann das in CSS mit divs machen, aber in Material 2 muss es einen einfachen Weg geben - es gibt viele Beispiele für Material 1.

Dieser Code wurde aus einer Angular Material 1-Antwort angepasst, funktioniert jedoch nicht (ich habe "row" in "column" geändert und hoffe, dass dies funktionieren würde, aber ich bekomme nur eine Spalte mit den drei Karten): 

wie erstelle ich ein gitter von karten mit eckigem 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>

Aus der Antwort: "In diesem Beispiel haben Sie zwei Karten (je 40%), und wenn der Bildschirm auf -sm geändert wird, sind die Karten zu 80%."

4
beachCode

Fügen Sie zunächst @angular/flex-layout-Paket in Ihre App ein. Lesen Sie mehr über "Flex-Layout" . Dann müssen Sie FlexLayoutModule in Ihren app.module.ts-Importeintrag importieren: 

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

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

Sie können dann "Flex-Layout" in Ihrer App verwenden. Um die Karten wie erwähnt ansprechend zu machen, können Sie die folgende Vorlage verwenden: 

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

Link zu stackblitz Demo

3
Faisal

Ich habe eine CSS-Flexbox-Lösung gefunden - ich würde immer noch eine Angular Flex-Layout-Antwort vorziehen, aber dies wird vorerst ausreichen. Danke an @Faisal, dass Sie mich in die richtige Richtung weisen. Dies erzeugt zwei Spalten auf einem großen Bildschirm mit zwei Zeilen in der ersten Spalte. Wenn der Bildschirm klein ist, ändert sich das Layout in eine Spalte mit drei Zeilen.

Der Code basiert auf diesem Beispiel: 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;
  }
}
2
beachCode

Ich hatte genau die gleiche Anforderung und habe dies mit mat-grid-list mit den mat-cards gemacht. Ich habe mat-grid-list verwendet, um meine Liste ansprechbar zu machen, damit sie die Nr. Anpassen kann. von Elementen in einer Reihe nach Bildschirmgröße. Folgendes habe ich getan:

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

So sieht eine Komponente aus:

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

Sie können auch Paginierung hinzufügen. Überprüfen Sie meine Antwort hier Wie verwende ich die Winkel-Material-Paginierung mit der Mattenkarte?

0
Sachin Parashar