web-dev-qa-db-fra.com

comment créer une grille de cartes avec du matériel angular?

J'essaie de créer une grille de trois cartes par ligne en utilisant ng-repeat. J'ai un tableau normal d'objets javascript attachés à la portée. Le code ci-dessous créera une nouvelle ligne pour chaque carte.

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

enter image description here

Comment puis-je parcourir mon tableau et afficher les cartes en rangées de trois? J'ai regardé ce post et ce post mais je ne vois pas comment ils s'appliquent à matériau angulaire

javascriptangularjsmaterial-designangular-material
15
Connor Leech

J'ai créé quelque chose de similaire à ce que vous pourriez souhaiter. Le md-card est enveloppé dans un div ayant layout-wrap. Les divs sont générés dynamiquement après la lecture.

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

La largeur des cartes peut être ajustée avec un style en ligne, j'espère que cela aide.

21
user2719890

J'avais juste besoin de ça; voici une solution plus complète, utilisant uniquement les fonctionnalités de mise en page, pour 3 colonnes:

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

La carte doit être emballée à l'intérieur d'un div correctement dimensionné pour garder les marges sous contrôle et éviter les débordements.

4
Jaime Gómez

Pour être conforme au matériau/angulaire, vous devez utiliser flex attr sur md-card. Flex attr vous donnera une largeur proportionnelle par rapport à son parent.

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

Dans cet exemple, vous aurez deux cartes (40% chacune) et lorsque l'écran sera redimensionné à -sm, les cartes seront à 80%.

3
sGambolati