La création de la Grille de Cartes de manière dynamique à l'aide Angulaire des Matériaux 2
Salut, je suis nouveau sur Angulaire du Matériel et je veux créer une grille de cartes de la forme r
lignes c
colonnes (r X c)
de façon dynamique. e.g Si j'ai 5 utilisateurs, alors il devrait créer r=3
et c=2
comme suit.
user1 user2
user3 user4
user5
Je l'ai réalisé comme suit:
<md-grid-list cols="2" rowHeight="200px" gutterSize="10px">
<md-grid-tile class="divcls" *ngFor="let user1 of users">
<md-card fxLayoutWrap="wrap" fxLayout="column" fxFlex="90%" fxLayoutGap="16px">
<md-card-title>User : {{user1.name}}</md-card-title>
<md-card-content>{{user1.details}}</md-card-content>
<md-card-actions>
<button md-button>LIKE</button>
<button md-button>SHARE</button>
</md-card-actions>
</md-card>
</md-grid-tile>
</md-grid-list>
Est-ce la bonne approche? Parce que quand j'essaie de redimensionner les fenêtres, il va se chevauchent avec carte et de la cellule de la grille. J'ai vérifié sur internet mais n'ai pas trouvé propre approche pure angulaire. Merci de me guider pour atteindre le même avec la meilleure approche que ci-dessus.
pouvez-vous partager plunker ?
OriginalL'auteur Sarang Shinde | 2017-07-09
Vous devez vous connecter pour publier un commentaire.
Bien, j'avais une tâche similaire à la création d'une liste de produits à afficher /filtré de manière dynamique.
D'abord je vous propose de créer un nouveau composant qui est responsable de l'affichage de la carte.
Puis créer une carte de pont qui détient le deck que vous voulez afficher.
Maintenant afin d'être cohérent avec le nombre de produits que vous souhaitez montrer, et aussi de garder à l'esprit que vous pourriez avoir quelques pagination et aussi des cartes pour être réactif, vous avez à afficher un certain nombre de cartes qui sont divisés par 2, 3, 4, 6 (12 ou 24) - utilisée dans les cas où le paquet de cartes est sensible et que vous voulez toujours avoir toutes les lignes affichées avec des cartes.
Cartes composant CSS
La chose principale ici est dans le CSS. Le jeu de cartes le conteneur a un max-width de 1200px et en fonction de la largeur de chaque carte, il devra remplir le récipient avec un maximum de 4 cartes (4 cartes * 300px = 1200px : une ligne).
Si le conteneur va plus petits de la carte, le point va aller sur la ligne suivante (à partir de la propriété de fxLayoutWrap).
Je vais poster un plunker exemple bientôt. Espérons que cette aide jusqu'à alors.
p.s. N'essayez pas de comprendre ce que ces messages à partir de produits sont en train de dire 🙂
Plunker exemple
https://plnkr.co/edit/egsNB7TLOI1HHzBgbTbP?p=preview (Utilisez Google Chrome)
Les éléments affichés peuvent être modifiés en fonction de l'interaction avec une possibilité de la pagination de la composante. Mais alors que vous auriez à garder tous les produits/articles dans un tableau, et vous auriez un autre tableau avec les produits/articles à afficher.
Espère que cela aide :).
Aussi, ne pas oublier Angulaire projet Flex:
OriginalL'auteur Adrian Claudiu Dima
Je pense que la solution la plus élégante que vous pouvez vous permettre est de mettre un
mat-card
ou d'un composant personnalisé qui utilisentmat-card
avecfxFlex
valeur à l'intérieur d'undiv
ou quel que soit l'élément avecfxLayout="row wrap
comme ceci:OriginalL'auteur b00leant