Je veux afficher 4 ion-items
dans mon ion-list
à la suite.
Depuis que j'utilise Bootstrap, j'ai essayé de faire:
<button class="col-sm-3" ion-item *ngFor="let player of players">
<ion-avatar item-left>
<img [src]="user.photoURL">
</ion-avatar>
{{ user.name }}
</button>
mais ça n'a pas marché.
Vous pouvez définir manuellement la largeur de chaque colonne en utilisant les attributs de pourcentage de colonne explicites comme ceci:
<ion-row>
<ion-col width-25>
<!-- item 1 -->
</ion-col>
<ion-col width-25>
<!-- item 2 -->
</ion-col>
<ion-col width-25>
<!-- item 3 -->
</ion-col>
<ion-col width-25>
<!-- item 4 -->
</ion-col>
</ion-row>
Ou ajoutez simplement ion-col
de manière dynamique, et ils se développeront pour remplir leur ligne et se redimensionneront pour s'adapter à des colonnes supplémentaires, comme ceci:
<ion-row>
<ion-col *ngFor="let player of players">
<ion-item>
<ion-avatar item-left>
<img [src]="user.photoURL">
</ion-avatar>
{{ user.name }}
</ion-item>
</ion-col>
</ion-row>
Vous trouverez plus d'informations sur les attributs de pourcentage de colonne explicite ici .
METTRE &AGRAVE; JOUR
A partir de Ionic 3.0.0 , voici comment procéder pour obtenir le même résultat avec la nouvelle grille:
<ion-row>
<ion-col col-3>
<!-- item 1 -->
</ion-col>
<ion-col col-3>
<!-- item 2 -->
</ion-col>
<ion-col col-3>
<!-- item 3 -->
</ion-col>
<ion-col col-3>
<!-- item 4 -->
</ion-col>
</ion-row>
Donc, l'attribut width-25
doit être remplacé par col-3
.
Essayer:
<ion-item>
<ion-row>
<ion-col *ngFor="let player of players">
<ion-avatar item-left>
<img [src]="user.photoURL">
</ion-avatar>
{{ user.name }}
</ion-col>
</ion-row>
</ion-item>
Vous n’avez pas vraiment besoin de bootstrap pour cela . Vérifiez ce tutoriel et ici