web-dev-qa-db-fra.com

Angular Matériau 2 colonnes réactives md-card

Je recherche un Angular 2/4 de cette mise en page. Je dois commencer par deux colonnes de cartes (2 en col de gauche et 1 en col de droite). Toutefois, si l'écran est petit, ils doivent être réduits à une colonne. Je peux le faire en CSS avec des divs, mais il doit y avoir un moyen simple dans le matériau 2 - il existe de nombreux exemples du matériau 1.

Ce code est adapté d'une réponse de Angular Material 1, mais il ne fonctionne pas (j'ai remplacé "row" par "column" en espérant que cela fonctionnerait, mais je n'ai qu'une colonne avec les trois cartes): 

comment créer une grille de cartes avec un matériau angulaire?

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

D'après la réponse: "Dans cet exemple, vous aurez deux cartes (40% chacune) et lorsque l'écran sera redimensionné à -sm, les cartes seront à 80%."

angularangular-materialangular-material2
4
beachCode

Tout d'abord, ajoutez le package @angular/flex-layout dans votre application. En savoir plus sur "flex-layout" . Ensuite, vous devez importer FlexLayoutModule dans votre entrée app.module.ts imports: 

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

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

Vous pouvez ensuite utiliser "flex-layout" dans votre application. Pour que les cartes soient réactives, comme vous l'avez mentionné, vous pouvez utiliser le modèle suivant: 

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

Lien vers stackblitz demo . 

3
Faisal

J'ai trouvé une solution de boîte flex CSS: je préférerais toujours une réponse de mise en page Angular flex, mais cela ira pour le moment. Merci à @Faisal de m'avoir orienté dans la bonne direction. Cela produit deux colonnes sur un grand écran avec deux lignes dans la première colonne. Si l'écran est petit, la disposition change en une colonne avec trois lignes.

J'ai basé le code sur cet exemple: 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

J'avais exactement la même exigence et je l'ai fait avec mat-grid-list contenant les mat-cards. J'ai utilisé mat-grid-list pour rendre ma liste réactive afin qu'elle puisse ajuster le no. d'éléments dans une rangée en fonction de la taille de l'écran. Voici ce que j'ai fait:

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

Voici à quoi ressemble ce composant:

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

Vous pouvez également y ajouter une pagination. Vérifiez ma réponse ici Comment utiliser la pagination de matériau angulaire avec mat-card?

0
Sachin Parashar