Açısal malzemeli bir kart ızgarası nasıl oluşturulur?

Question

ng-repeat kullanarak satır başına üç karttan oluşan bir ızgara oluşturmaya çalışıyorum. Kapsamına eklenmiş normal javascript nesneleri dizim var. Aşağıdaki kod her kart için yeni bir satır oluşturacaktır.

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

benim diziyi sürekli tekrarlanması ve üç sıra halinde kartları görüntüleyebilir nasıl

? this post ve this post'a baktım ama nasıl uygulandıklarını göremiyorum angular material

Answer 1

İstediğinize benzer bir şey yarattım. md-card, layout-wrap'a sahip bir div içine sarılır. Okumadan sonra div'ler dinamik olarak üretilir. ,

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

kart genişliği satır içi stil ayarlanabilir yardımcı olur umarım: Burada

kodudur.

Answer 2

Materyal/açısal hizalama yapmak için, md kartına flex attr kullanmalısınız. Flex attr, ebeveyniyle ilgili orantılı bir genişlik sağlar. Bu örnekte

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

, sen iki kart (% 40) ve ekran -SM için boyutlandırdığında, kartları% 80 olacaktır olacaktır.

Answer 3

Sadece buna ihtiyacım vardı; Burada sadece 3 sütunlar için, düzen özellikleri kullanarak, daha kapsamlı bir çözüm: Bir doğru büyüklükte div içinde

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

kart must be wrapped kontrol altında marjları tutmak ve taşma önlemek için.