Wie erstelle ich ein Kartenraster mit eckigem Material?

Question

Ich versuche ein Raster von drei Karten pro Zeile mit ng-repeat zu erstellen. Ich habe ein normales Array von JavaScript-Objekten an den Bereich angehängt. Der folgende Code erstellt eine neue Zeile für jede Karte.

<div layout="row" ng-repeat='post in posts' layout-fill="" layout-align=""> 
<md-card> 
    <md-card-content> 
    <h2 class="md-title">{{post.title}}</h2> 
    <p> 
     {{post.summary}} 
    </p> 
    </md-card-content> 
    <div class="md-actions" layout="row" layout-align="end center"> 
    <md-button>View More</md-button> 
    </div> 
</md-card> 
<br> 

Wie kann ich über meinen Array iterieren und die Karten in Reihen von drei angezeigt werden? Ich schaute auf this post und this post, aber ich sehe nicht, wie sie auf angular material

Answer 1

gelten. Ich habe etwas ähnlich zu dem, was Sie wollen, erstellt. Die md-card ist in eine div mit layout-wrap verpackt. Die divs werden nach dem Lesen dynamisch generiert. Hier

ist der Code:

<div class='md-padding' layout="row" layout-wrap> 
    <md-card style="width: 350px;" ng-repeat="user in users"> 
     <img src="http://placehold.it/150x150" class="md-card-image" alt="user avatar"> 
     <md-card-content> 
     <h2>{{user}}</h2> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p> 
     </md-card-content> 
     <div class="md-actions" layout="row" layout-align="end center"> 
     <md-button>Save</md-button> 
     <md-button>View</md-button> 
     </div> 
    </md-card> 
    </div> 

Die Karten Breite kann mit Inline-Styling angepasst werden, hoffen, dass es hilft.

Answer 2

Um sich an Material/eckig anzupassen, müssen Sie flex attr zu MD-Karte verwenden. Flex attr gibt Ihnen eine proportionale Breite über seine Eltern.

<div class='md-padding' layout="row" layout-wrap> 
    <md-card flex="40" flex-sm="80" ng-repeat="user in users"> 
     <img src="http://placehold.it/150x150" class="md-card-image" alt="user avatar"> 
     <md-card-content> 
     <h2>{{user}}</h2> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p> 
     </md-card-content> 
     <div class="md-actions" layout="row" layout-align="end center"> 
     <md-button>Save</md-button> 
     <md-button>View</md-button> 
     </div> 
    </md-card> 
    </div> 

In diesem Beispiel werden Sie zwei Karten (jeweils 40%) haben und wenn der Bildschirm -sm ändert die Größe, werden die Karten bei 80% liegen.

Answer 3

Ich brauchte nur das; hier ist eine umfassende Lösung, nur die Layout-Funktionen verwenden, für 3 Spalten:

<md-content class="md-padding" layout="row" layout-wrap> 
    <div flex="33" ng-repeat="i in [1,2,3,4,5,6,7]"> 
     <md-card> 
      // ... 
     </md-card> 
    </div> 
</md-content> 

Die Karte must be wrapped in einem richtig großen div die Margen unter Kontrolle zu halten und Überlauf zu vermeiden.