web-dev-qa-db-fra.com

Ionic 2 multi-ion-item d'affilée

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

angulartypescriptionic-frameworkionic2ionic3
7
TheUnreal

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.

16
sebaferreras

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

0
Suraj Rao